{"id":20,"date":"2026-03-03T18:20:51","date_gmt":"2026-03-03T18:20:51","guid":{"rendered":"https:\/\/classiqueengineering.co.za\/public_html\/contact-us\/"},"modified":"2026-08-11T06:14:49","modified_gmt":"2026-08-11T06:14:49","slug":"contact-us","status":"publish","type":"page","link":"https:\/\/classiqueengineering.co.za\/public_html\/contact-us\/","title":{"rendered":"Contact Us"},"content":{"rendered":"\n\n<!-- =========================================================\n     CLASSIQUE ENGINEERING\n     CONTACT PAGE\n     Gutenberg Custom HTML Block\n     ========================================================= -->\n\n<style>\n\n\/* =========================================================\n   CONTACT PAGE\n   ========================================================= *\/\n\n.classique-contact {\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    background: #ffffff;\n    color: #222222;\n    font-family: Arial, Helvetica, sans-serif;\n    box-sizing: border-box;\n}\n\n.classique-contact *,\n.classique-contact *::before,\n.classique-contact *::after {\n    box-sizing: border-box;\n}\n\n\n\/* =========================================================\n   HERO\n   ========================================================= *\/\n\n.contact-hero {\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-left: calc(50% - 50vw);\n    margin-right: calc(50% - 50vw);\n\n    background: #620b0f;\n    color: #ffffff;\n}\n\n.contact-hero-inner {\n    max-width: 1050px;\n    margin: 0 auto;\n\n    padding: 75px 30px;\n\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 70px;\n\n    align-items: center;\n}\n\n.contact-red-line {\n    width: 55px;\n    height: 4px;\n\n    background: #b52a30;\n\n    margin-bottom: 24px;\n}\n\n.contact-hero h1 {\n    margin: 0 0 20px;\n\n    color: #ffffff;\n\n    font-size: 54px;\n    line-height: 1.05;\n\n    font-weight: 700;\n}\n\n.contact-hero p {\n    margin: 0;\n\n    max-width: 560px;\n\n    color: #ffffff;\n\n    font-size: 18px;\n    line-height: 1.6;\n}\n\n.contact-hero-image {\n    width: 100%;\n}\n\n.contact-hero-image img {\n    display: block;\n\n    width: 100%;\n    height: 330px;\n\n    object-fit: cover;\n\n    border-radius: 5px;\n}\n\n\n\/* =========================================================\n   MAIN CONTACT AREA\n   ========================================================= *\/\n\n.contact-main {\n    padding: 85px 30px 90px;\n\n    background: #ffffff;\n}\n\n.contact-main-inner {\n    max-width: 1050px;\n\n    margin: 0 auto;\n\n    display: grid;\n\n    grid-template-columns: 0.9fr 1.1fr;\n\n    gap: 70px;\n\n    align-items: start;\n}\n\n\n\/* =========================================================\n   CONTACT INFORMATION\n   ========================================================= *\/\n\n.contact-information h2 {\n    margin: 0 0 18px;\n\n    color: #111111;\n\n    font-size: 36px;\n    line-height: 1.15;\n}\n\n.contact-information > p {\n    margin: 0 0 35px;\n\n    color: #555555;\n\n    font-size: 17px;\n\n    line-height: 1.65;\n}\n\n.contact-details {\n    display: flex;\n\n    flex-direction: column;\n\n    gap: 25px;\n}\n\n.contact-detail {\n    display: flex;\n\n    gap: 18px;\n\n    align-items: flex-start;\n}\n\n.contact-detail-icon {\n    flex: 0 0 44px;\n\n    width: 44px;\n    height: 44px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    background: #620b0f;\n\n    color: #ffffff;\n\n    border-radius: 3px;\n\n    font-size: 18px;\n}\n\n.contact-detail-content strong {\n    display: block;\n\n    margin-bottom: 5px;\n\n    color: #111111;\n\n    font-size: 15px;\n}\n\n.contact-detail-content span,\n.contact-detail-content a {\n    color: #555555;\n\n    font-size: 15px;\n\n    line-height: 1.5;\n\n    text-decoration: none;\n}\n\n.contact-detail-content a:hover {\n    color: #a9252b;\n}\n\n\n\/* =========================================================\n   CONTACT FORM\n   ========================================================= *\/\n\n.contact-form-wrapper {\n    background: #f5f7f6;\n\n    padding: 40px;\n\n    border: 1px solid #e2e2e2;\n\n    border-radius: 5px;\n}\n\n.contact-form-wrapper h2 {\n    margin: 0 0 10px;\n\n    color: #111111;\n\n    font-size: 30px;\n}\n\n.contact-form-intro {\n    margin: 0 0 28px;\n\n    color: #666666;\n\n    font-size: 15px;\n\n    line-height: 1.55;\n}\n\n.contact-form {\n    display: grid;\n\n    grid-template-columns: 1fr 1fr;\n\n    gap: 20px;\n}\n\n.contact-form-group {\n    display: flex;\n\n    flex-direction: column;\n}\n\n.contact-form-group.full-width {\n    grid-column: 1 \/ -1;\n}\n\n.contact-form label {\n    margin-bottom: 7px;\n\n    color: #222222;\n\n    font-size: 13px;\n\n    font-weight: 700;\n}\n\n.contact-form input,\n.contact-form select,\n.contact-form textarea {\n\n    width: 100%;\n\n    padding: 13px 14px;\n\n    background: #ffffff;\n\n    border: 1px solid #d7d7d7;\n\n    border-radius: 3px;\n\n    color: #222222;\n\n    font-family: inherit;\n\n    font-size: 15px;\n\n    outline: none;\n\n    transition:\n        border-color 0.2s ease,\n        box-shadow 0.2s ease;\n}\n\n.contact-form input:focus,\n.contact-form select:focus,\n.contact-form textarea:focus {\n\n    border-color: #a9252b;\n\n    box-shadow: 0 0 0 2px rgba(169,37,43,0.08);\n}\n\n.contact-form textarea {\n\n    min-height: 145px;\n\n    resize: vertical;\n}\n\n.contact-submit {\n\n    grid-column: 1 \/ -1;\n\n    display: inline-flex;\n\n    align-items: center;\n    justify-content: center;\n\n    padding: 14px 28px;\n\n    background: #b52a30;\n\n    color: #ffffff;\n\n    border: none;\n\n    border-radius: 3px;\n\n    font-size: 14px;\n\n    font-weight: 700;\n\n    cursor: pointer;\n\n    transition: background 0.2s ease;\n}\n\n.contact-submit:hover {\n    background: #8f1f24;\n}\n\n\n\/* =========================================================\n   PROJECT \/ QUOTE STRIP\n   ========================================================= *\/\n\n.contact-strip {\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-left: calc(50% - 50vw);\n    margin-right: calc(50% - 50vw);\n\n    background: #620b0f;\n\n    padding: 55px 30px;\n\n    color: #ffffff;\n}\n\n.contact-strip-inner {\n\n    max-width: 1050px;\n\n    margin: 0 auto;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: space-between;\n\n    gap: 35px;\n}\n\n.contact-strip h3 {\n\n    margin: 0 0 8px;\n\n    color: #ffffff;\n\n    font-size: 25px;\n}\n\n.contact-strip p {\n\n    margin: 0;\n\n    color: #e6dada;\n\n    font-size: 15px;\n\n    line-height: 1.5;\n}\n\n.contact-strip-button {\n\n    flex-shrink: 0;\n\n    display: inline-block;\n\n    padding: 13px 25px;\n\n    background: #b52a30;\n\n    color: #ffffff;\n\n    text-decoration: none;\n\n    font-size: 14px;\n\n    font-weight: 700;\n\n    border-radius: 3px;\n\n    transition: background 0.2s ease;\n}\n\n.contact-strip-button:hover {\n\n    background: #d03a40;\n\n    color: #ffffff;\n}\n\n\n\/* =========================================================\n   MAP \/ LOCATION SECTION\n   ========================================================= *\/\n\n.contact-location {\n\n    padding: 80px 30px;\n\n    background: #f5f7f6;\n}\n\n.contact-location-inner {\n\n    max-width: 1050px;\n\n    margin: 0 auto;\n\n    display: grid;\n\n    grid-template-columns: 0.8fr 1.2fr;\n\n    gap: 50px;\n\n    align-items: center;\n}\n\n.contact-location h2 {\n\n    margin: 0 0 18px;\n\n    color: #111111;\n\n    font-size: 34px;\n}\n\n.contact-location p {\n\n    margin: 0 0 22px;\n\n    color: #555555;\n\n    font-size: 16px;\n\n    line-height: 1.65;\n}\n\n.contact-map {\n\n    width: 100%;\n\n    height: 320px;\n\n    background: #dddddd;\n\n    border: 1px solid #d3d3d3;\n\n    border-radius: 5px;\n\n    overflow: hidden;\n}\n\n.contact-map iframe {\n\n    width: 100%;\n\n    height: 100%;\n\n    border: 0;\n}\n\n\n\/* =========================================================\n   FINAL CTA\n   ========================================================= *\/\n\n.contact-final {\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-left: calc(50% - 50vw);\n    margin-right: calc(50% - 50vw);\n\n    padding: 80px 30px;\n\n    background: #ffffff;\n\n    text-align: center;\n}\n\n.contact-final-inner {\n\n    max-width: 800px;\n\n    margin: 0 auto;\n}\n\n.contact-final h2 {\n\n    margin: 0 0 16px;\n\n    color: #111111;\n\n    font-size: 36px;\n}\n\n.contact-final p {\n\n    margin: 0 auto 28px;\n\n    max-width: 680px;\n\n    color: #555555;\n\n    font-size: 17px;\n\n    line-height: 1.6;\n}\n\n.contact-final-button {\n\n    display: inline-block;\n\n    padding: 14px 28px;\n\n    background: #620b0f;\n\n    color: #ffffff;\n\n    text-decoration: none;\n\n    border-radius: 3px;\n\n    font-size: 14px;\n\n    font-weight: 700;\n}\n\n.contact-final-button:hover {\n\n    background: #b52a30;\n\n    color: #ffffff;\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 800px) {\n\n    .contact-hero-inner {\n\n        grid-template-columns: 1fr;\n\n        gap: 35px;\n\n        padding: 55px 25px;\n    }\n\n    .contact-hero h1 {\n\n        font-size: 42px;\n    }\n\n    .contact-hero-image img {\n\n        height: 260px;\n    }\n\n    .contact-main-inner {\n\n        grid-template-columns: 1fr;\n\n        gap: 45px;\n    }\n\n    .contact-strip-inner {\n\n        flex-direction: column;\n\n        align-items: flex-start;\n    }\n\n    .contact-location-inner {\n\n        grid-template-columns: 1fr;\n    }\n}\n\n\n@media (max-width: 600px) {\n\n    .contact-main {\n\n        padding: 60px 20px;\n    }\n\n    .contact-form-wrapper {\n\n        padding: 25px 20px;\n    }\n\n    .contact-form {\n\n        grid-template-columns: 1fr;\n    }\n\n    .contact-form-group.full-width {\n\n        grid-column: auto;\n    }\n\n    .contact-submit {\n\n        grid-column: auto;\n    }\n\n    .contact-hero h1 {\n\n        font-size: 36px;\n    }\n\n    .contact-information h2,\n    .contact-location h2,\n    .contact-final h2 {\n\n        font-size: 29px;\n    }\n\n    .contact-strip {\n\n        padding: 45px 20px;\n    }\n\n    .contact-location {\n\n        padding: 60px 20px;\n    }\n\n}\n\n<\/style>\n\n\n<!-- =========================================================\n     CONTACT PAGE\n     ========================================================= -->\n\n<div class=\"classique-contact\">\n\n\n    <!-- =====================================================\n         HERO\n         ===================================================== -->\n\n    <section class=\"contact-hero\">\n\n        <div class=\"contact-hero-inner\">\n\n            <div>\n\n                <div class=\"contact-red-line\"><\/div>\n\n                <h1>\n                    Let&#8217;s Build<br>\n                    Something Great\n                <\/h1>\n\n                <p>\n                    Whether you have a new project in the planning\n                    stage or require a reliable structural steel\n                    partner, our team is ready to discuss your\n                    requirements.\n                <\/p>\n\n            <\/div>\n\n\n            <div class=\"contact-hero-image\">\n\n                <!--\n                Replace this with your actual Classique Engineering\n                contact\/steel project image.\n                -->\n\n                <noscript><img decoding=\"async\" data-skip-lazy src=\"YOUR-CONTACT-HERO-IMAGE.jpg\" alt=\"Classique Engineering structural steel project\"><\/noscript><img decoding=\"async\" src=\"YOUR-CONTACT-HERO-IMAGE.jpg\" alt=\"Classique Engineering structural steel project\" data-src=\"YOUR-CONTACT-HERO-IMAGE.jpg\" data-sizes=\"auto\" loading=\"eager\" class=\"vp-lazyload\">\n\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n\n    <!-- =====================================================\n         CONTACT INFORMATION + FORM\n         ===================================================== -->\n\n    <section class=\"contact-main\">\n\n        <div class=\"contact-main-inner\">\n\n\n            <!-- CONTACT DETAILS -->\n\n            <div class=\"contact-information\">\n\n                <div class=\"contact-red-line\"><\/div>\n\n                <h2>\n                    Get in Touch\n                <\/h2>\n\n                <p>\n                    Speak to our team about your next structural steel\n                    project, tender or technical requirement.\n                <\/p>\n\n\n                <div class=\"contact-details\">\n\n\n                    <div class=\"contact-detail\">\n\n                        <div class=\"contact-detail-icon\">\n                            \u260e\n                        <\/div>\n\n                        <div class=\"contact-detail-content\">\n\n                            <strong>\n                                Phone\n                            <\/strong>\n\n                            <a href=\"tel:+27000000000\">\n                                +27 XX XXX XXXX\n                            <\/a>\n\n                        <\/div>\n\n                    <\/div>\n\n\n                    <div class=\"contact-detail\">\n\n                        <div class=\"contact-detail-icon\">\n                            @\n                        <\/div>\n\n                        <div class=\"contact-detail-content\">\n\n                            <strong>\n                                Email\n                            <\/strong>\n\n                            <a href=\"mailto:info@classiqueengineering.co.za\">\n                                info@classiqueengineering.co.za\n                            <\/a>\n\n                        <\/div>\n\n                    <\/div>\n\n\n                    <div class=\"contact-detail\">\n\n                        <div class=\"contact-detail-icon\">\n                            \u25cf\n                        <\/div>\n\n                        <div class=\"contact-detail-content\">\n\n                            <strong>\n                                Location\n                            <\/strong>\n\n                            <span>\n                                KwaZulu-Natal, South Africa\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n\n                    <div class=\"contact-detail\">\n\n                        <div class=\"contact-detail-icon\">\n                            \u23f1\n                        <\/div>\n\n                        <div class=\"contact-detail-content\">\n\n                            <strong>\n                                Business Hours\n                            <\/strong>\n\n                            <span>\n                                Monday \u2013 Friday<br>\n                                08:00 \u2013 17:00\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n\n                <\/div>\n\n            <\/div>\n\n\n\n            <!-- CONTACT FORM -->\n\n            <div class=\"contact-form-wrapper\">\n\n                <h2>\n                    Request a Quote\n                <\/h2>\n\n                <p class=\"contact-form-intro\">\n                    Tell us a little about your project and a member\n                    of our team will get back to you.\n                <\/p>\n\n\n                <form class=\"contact-form\" id=\"classiqueContactForm\" action=\"#\" method=\"post\">\n\n\n                    <div class=\"contact-form-group\">\n\n                        <label for=\"contact-name\">\n                            Name *\n                        <\/label>\n\n                        <input type=\"text\" id=\"contact-name\" name=\"name\" placeholder=\"Your name\" required=\"\">\n\n                    <\/div>\n\n\n                    <div class=\"contact-form-group\">\n\n                        <label for=\"contact-company\">\n                            Company\n                        <\/label>\n\n                        <input type=\"text\" id=\"contact-company\" name=\"company\" placeholder=\"Company name\">\n\n                    <\/div>\n\n\n                    <div class=\"contact-form-group\">\n\n                        <label for=\"contact-email\">\n                            Email *\n                        <\/label>\n\n                        <input type=\"email\" id=\"contact-email\" name=\"email\" placeholder=\"you@example.com\" required=\"\">\n\n                    <\/div>\n\n\n                    <div class=\"contact-form-group\">\n\n                        <label for=\"contact-phone\">\n                            Phone\n                        <\/label>\n\n                        <input type=\"tel\" id=\"contact-phone\" name=\"phone\" placeholder=\"+27\">\n\n                    <\/div>\n\n\n                    <div class=\"contact-form-group full-width\">\n\n                        <label for=\"contact-project\">\n\n                            Project Type\n\n                        <\/label>\n\n                        <select id=\"contact-project\" name=\"project_type\">\n\n                            <option value=\"\">\n                                Select project type\n                            <\/option>\n\n                            <option value=\"structural-steel\">\n                                Structural Steel\n                            <\/option>\n\n                            <option value=\"fabrication\">\n                                Steel Fabrication\n                            <\/option>\n\n                            <option value=\"installation\">\n                                Steel Installation\n                            <\/option>\n\n                            <option value=\"commercial\">\n                                Commercial Development\n                            <\/option>\n\n                            <option value=\"industrial\">\n                                Industrial Project\n                            <\/option>\n\n                            <option value=\"other\">\n                                Other\n                            <\/option>\n\n                        <\/select>\n\n                    <\/div>\n\n\n                    <div class=\"contact-form-group full-width\">\n\n                        <label for=\"contact-message\">\n\n                            Project Details *\n\n                        <\/label>\n\n                        <textarea id=\"contact-message\" name=\"message\" placeholder=\"Tell us about your project...\" required=\"\"><\/textarea>\n\n                    <\/div>\n\n\n                    <button type=\"submit\" class=\"contact-submit\">\n\n                        Send Enquiry \u2192\n\n                    <\/button>\n\n\n                <\/form>\n\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n\n    <!-- =====================================================\n         RED STRIP\n         ===================================================== -->\n\n    <section class=\"contact-strip\">\n\n        <div class=\"contact-strip-inner\">\n\n            <div>\n\n                <h3>\n                    Planning a Structural Steel Project?\n                <\/h3>\n\n                <p>\n                    Talk to our team about your requirements,\n                    programme and technical specifications.\n                <\/p>\n\n            <\/div>\n\n\n            <a href=\"#classiqueContactForm\" class=\"contact-strip-button\">\n                Start a Conversation \u2192\n            <\/a>\n\n        <\/div>\n\n    <\/section>\n\n\n\n    <!-- =====================================================\n         LOCATION\n         ===================================================== -->\n\n    <section class=\"contact-location\">\n\n        <div class=\"contact-location-inner\">\n\n\n            <div>\n\n                <div class=\"contact-red-line\"><\/div>\n\n                <h2>\n                    Where We Work\n                <\/h2>\n\n                <p>\n                    Based in KwaZulu-Natal, Classique Engineering\n                    provides structural steel fabrication and\n                    installation services for projects across\n                    South Africa.\n                <\/p>\n\n                <p>\n                    Contact our team to discuss your project\n                    requirements and geographic scope.\n                <\/p>\n\n            <\/div>\n\n\n            <div class=\"contact-map\">\n\n                <!--\n                Replace the iframe below with your actual\n                Google Maps embed code if required.\n                -->\n\n                <iframe src=\"https:\/\/www.google.com\/maps?q=KwaZulu-Natal,South Africa&amp;output=embed\" loading=\"lazy\" title=\"Classique Engineering location map\">\n                <\/iframe>\n\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n\n    <!-- =====================================================\n         FINAL CTA\n         ===================================================== -->\n\n    <section class=\"contact-final\">\n\n        <div class=\"contact-final-inner\">\n\n            <div class=\"contact-red-line\" style=\"margin-left:auto;margin-right:auto;\">\n            <\/div>\n\n            <h2>\n                Ready to Start?\n            <\/h2>\n\n            <p>\n                From concept and detailing through fabrication and\n                installation, Classique Engineering is ready to\n                support your next project.\n            <\/p>\n\n            <a href=\"#classiqueContactForm\" class=\"contact-final-button\">\n                Contact Classique Engineering \u2192\n\n            <\/a>\n\n        <\/div>\n\n    <\/section>\n\n\n<\/div>\n\n\n<!-- =========================================================\n     FORM INTERACTION\n     ========================================================= -->\n\n<script>\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n    const form =\n        document.getElementById(\"classiqueContactForm\");\n\n    if (!form) return;\n\n    form.addEventListener(\"submit\", function (event) {\n\n        \/*\n         IMPORTANT:\n         This does NOT send the email.\n\n         Connect this form to your WordPress form plugin,\n         WPForms, Fluent Forms, Contact Form 7, Gravity Forms,\n         or your preferred form-processing system.\n        *\/\n\n        event.preventDefault();\n\n        alert(\n            \"Thank you. Your enquiry has been prepared. \" +\n            \"Please connect this form to your WordPress email system.\"\n        );\n\n    });\n\n});\n\n<\/script>\n&#8220;`\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s Build Something Great Whether you have a new project in the planning stage or require a reliable structural steel partner, our team is ready to discuss your requirements. Get in Touch Speak to our team about your next structural steel project, tender or technical requirement. \u260e Phone +27 XX XXX XXXX @ Email info@classiqueengineering.co.za &#8230; <a title=\"Contact Us\" class=\"read-more\" href=\"https:\/\/classiqueengineering.co.za\/public_html\/contact-us\/\" aria-label=\"Read more about Contact Us\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_vp_format_video_url":"","_vp_image_focal_point":[],"footnotes":""},"class_list":["post-20","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/classiqueengineering.co.za\/public_html\/wp-json\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/classiqueengineering.co.za\/public_html\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/classiqueengineering.co.za\/public_html\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/classiqueengineering.co.za\/public_html\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/classiqueengineering.co.za\/public_html\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":75,"href":"https:\/\/classiqueengineering.co.za\/public_html\/wp-json\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":1587,"href":"https:\/\/classiqueengineering.co.za\/public_html\/wp-json\/wp\/v2\/pages\/20\/revisions\/1587"}],"wp:attachment":[{"href":"https:\/\/classiqueengineering.co.za\/public_html\/wp-json\/wp\/v2\/media?parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}