{"id":64,"date":"2026-10-17T17:54:55","date_gmt":"2026-10-17T17:54:55","guid":{"rendered":"https:\/\/idealcs.co.za\/?page_id=64"},"modified":"2026-10-18T13:52:51","modified_gmt":"2026-10-18T11:52:51","slug":"home","status":"publish","type":"page","link":"https:\/\/idealcs.co.za\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"64\" class=\"elementor elementor-64\">\n\t\t\t\t<div class=\"elementor-element elementor-element-58ddfa7 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"58ddfa7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9211745 elementor-widget elementor-widget-html\" data-id=\"9211745\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ==========================================================\n   IDEAL COMPUTER SOLUTIONS\n   HOMEPAGE HERO \u2014 FULL SCREEN BALANCED V4\n\n   GLOBAL HEADER = ROYAL ADDONS\n   GLOBAL FOOTER = ROYAL ADDONS\n\n   Header remains separate.\n   Hero fills the remaining first-screen space.\n   ========================================================== *\/\n\n:root {\n    --ics-header-height: 86px;\n\n    --ics-bg: #071C30;\n    --ics-blue: #168BD2;\n    --ics-blue-hover: #209BE2;\n    --ics-yellow: #E4B84A;\n}\n\n\n\/* ==========================================================\n   HERO WRAPPER\n   ========================================================== *\/\n\n.ics-hero {\n    position: relative;\n\n    width: 100vw;\n    max-width: none;\n\n    \/*\n       Header + Hero = first screen.\n       The max-height prevents huge desktop monitors from\n       making the entire composition ridiculously oversized.\n    *\/\n\n    min-height: calc(100vh - var(--ics-header-height));\n    min-height: calc(100svh - var(--ics-header-height));\n\n    max-height: 900px;\n\n    margin-left: calc(50% - 50vw);\n    margin-right: calc(50% - 50vw);\n\n    padding: 0;\n\n    display: flex;\n    align-items: center;\n\n    overflow: hidden;\n\n    background: var(--ics-bg);\n\n    color: #ffffff;\n\n    font-family:\n        Arial,\n        Helvetica,\n        sans-serif;\n\n    isolation: isolate;\n}\n\n\n\/* Dynamic mobile browser viewport *\/\n\n@supports (height: 100dvh) {\n\n    .ics-hero {\n        min-height:\n            calc(\n                100dvh - var(--ics-header-height)\n            );\n    }\n\n}\n\n\n\/* ==========================================================\n   REMOVE ELEMENTOR HTML WIDGET SPACING\n   ========================================================== *\/\n\n.elementor-widget-html:has(.ics-hero) {\n    margin: 0 !important;\n}\n\n\n.elementor-widget-html:has(.ics-hero)\n> .elementor-widget-container {\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n\n\/* ==========================================================\n   BACKGROUND IMAGE\n   Same approved hero image.\n   Stationary.\n   ========================================================== *\/\n\n.ics-hero-image {\n    position: absolute;\n\n    inset: 0;\n\n    z-index: 0;\n\n    background-image:\n        url(\"https:\/\/idealcs.co.za\/wp-content\/uploads\/2026\/10\/Modern-IT-Server-Room-with-Blue-Accents.png\");\n\n    background-size: cover;\n\n    \/*\n       Very close to original framing.\n       Slightly favours the equipment side.\n    *\/\n\n    background-position:\n        54% center;\n\n    background-repeat:\n        no-repeat;\n\n    transform: none;\n\n    animation: none;\n}\n\n\n\/* ==========================================================\n   MASTER IMAGE BLEND\n\n   Keeps the original effect:\n   image emerges from #071C30 instead of looking like\n   a rectangular photograph.\n   ========================================================== *\/\n\n.ics-hero-blend {\n    position: absolute;\n\n    inset: 0;\n\n    z-index: 1;\n\n    pointer-events: none;\n\n    background:\n\n        \/* ---------------------------------------------\n           LEFT FADE\n           --------------------------------------------- *\/\n\n        linear-gradient(\n            90deg,\n\n            #071C30 0%,\n\n            rgba(7,28,48,1) 12%,\n\n            rgba(7,28,48,.98) 22%,\n\n            rgba(7,28,48,.91) 31%,\n\n            rgba(7,28,48,.72) 40%,\n\n            rgba(7,28,48,.44) 49%,\n\n            rgba(7,28,48,.18) 59%,\n\n            rgba(7,28,48,.05) 69%,\n\n            transparent 79%\n        ),\n\n\n        \/* ---------------------------------------------\n           BOTTOM FADE\n           Slightly deeper than original so the hero\n           flows into the next section.\n           --------------------------------------------- *\/\n\n        linear-gradient(\n            180deg,\n\n            transparent 0%,\n\n            transparent 61%,\n\n            rgba(7,28,48,.05) 68%,\n\n            rgba(7,28,48,.14) 74%,\n\n            rgba(7,28,48,.30) 81%,\n\n            rgba(7,28,48,.57) 88%,\n\n            rgba(7,28,48,.82) 94%,\n\n            #071C30 100%\n        ),\n\n\n        \/* ---------------------------------------------\n           TOP BLEND\n           Meets Royal Addons header.\n           --------------------------------------------- *\/\n\n        linear-gradient(\n            180deg,\n\n            rgba(7,28,48,.56) 0%,\n\n            rgba(7,28,48,.17) 9%,\n\n            transparent 19%\n        );\n}\n\n\n\/* ==========================================================\n   SOFT IMAGE TRANSITION\n\n   Only softens the transition between dark canvas and image.\n   Does NOT blur the entire photograph.\n   ========================================================== *\/\n\n.ics-hero-soft-edge {\n    position: absolute;\n\n    z-index: 2;\n\n    top: 0;\n    bottom: 0;\n\n    left: 30%;\n\n    width: 28%;\n\n    pointer-events: none;\n\n    background:\n        linear-gradient(\n            90deg,\n\n            rgba(7,28,48,.14),\n\n            rgba(7,28,48,.04),\n\n            transparent\n        );\n\n    backdrop-filter:\n        blur(1.2px);\n\n    -webkit-backdrop-filter:\n        blur(1.2px);\n\n    -webkit-mask-image:\n        linear-gradient(\n            90deg,\n\n            transparent,\n\n            black 25%,\n\n            black 70%,\n\n            transparent\n        );\n\n    mask-image:\n        linear-gradient(\n            90deg,\n\n            transparent,\n\n            black 25%,\n\n            black 70%,\n\n            transparent\n        );\n}\n\n\n\/* ==========================================================\n   SUBTLE BLUE AMBIENCE\n   ========================================================== *\/\n\n.ics-hero-ambient {\n    position: absolute;\n\n    z-index: 2;\n\n    left: -320px;\n    top: 50%;\n\n    width: 650px;\n    height: 650px;\n\n    transform:\n        translateY(-50%);\n\n    border-radius: 50%;\n\n    pointer-events: none;\n\n    background:\n        radial-gradient(\n            circle,\n\n            rgba(22,139,210,.07) 0%,\n\n            rgba(22,139,210,.025) 38%,\n\n            transparent 70%\n        );\n}\n\n\n\/* ==========================================================\n   BOTTOM FLOW\n\n   Adds a final dark transition into the Managed IT section.\n   ========================================================== *\/\n\n.ics-hero-bottom-flow {\n    position: absolute;\n\n    z-index: 3;\n\n    left: 0;\n    right: 0;\n\n    bottom: -1px;\n\n    height: 100px;\n\n    pointer-events: none;\n\n    background:\n        linear-gradient(\n            180deg,\n\n            transparent 0%,\n\n            rgba(7,28,48,.18) 35%,\n\n            rgba(7,28,48,.60) 70%,\n\n            #071C30 100%\n        );\n}\n\n\n\/* ==========================================================\n   INNER CONTENT\n\n   Slightly larger overall than original.\n   ========================================================== *\/\n\n.ics-hero-inner {\n    position: relative;\n\n    z-index: 5;\n\n    width: 100%;\n    max-width: 1320px;\n\n    margin: 0 auto;\n\n    padding:\n        60px\n        42px\n        90px;\n}\n\n\n\/* ==========================================================\n   CONTENT WIDTH\n   ========================================================== *\/\n\n.ics-hero-content {\n    width: 100%;\n\n    max-width: 720px;\n}\n\n\n\/* ==========================================================\n   MAIN HEADING\n\n   Original:\n   58px \u2192 82px\n\n   New:\n   62px \u2192 90px\n\n   So it grows WITH the hero rather than looking tiny.\n   ========================================================== *\/\n\n.ics-hero-title {\n    margin:\n        0\n        0\n        30px;\n\n    padding: 0;\n\n    color: #ffffff;\n\n    font-size:\n        clamp(62px, 5.5vw, 90px);\n\n    font-weight: 800;\n\n    line-height: .94;\n\n    letter-spacing: -3px;\n\n    text-transform: uppercase;\n\n    text-shadow:\n        0 4px 24px\n        rgba(0,0,0,.18);\n\n    opacity: 0;\n\n    animation:\n        icsHeroContentIn\n        .65s\n        ease\n        forwards;\n}\n\n\n.ics-hero-title-line {\n    display: block;\n}\n\n\n\/* ==========================================================\n   MANAGED\n   ========================================================== *\/\n\n.ics-hero-managed {\n    color:\n        var(--ics-blue);\n\n    text-shadow:\n        0 0 30px\n        rgba(22,139,210,.10);\n}\n\n\n\/* ==========================================================\n   YELLOW FULL STOP\n   ========================================================== *\/\n\n.ics-hero-dot {\n    color:\n        var(--ics-yellow);\n}\n\n\n\/* ==========================================================\n   DESCRIPTION\n\n   Slightly scales with larger screens.\n   ========================================================== *\/\n\n.ics-hero-description {\n    width: 100%;\n\n    max-width: 600px;\n\n    margin:\n        0\n        0\n        36px;\n\n    color:\n        rgba(255,255,255,.80);\n\n    font-size:\n        clamp(17px, 1.15vw, 19px);\n\n    font-weight: 400;\n\n    line-height: 1.7;\n\n    text-shadow:\n        0 2px 12px\n        rgba(0,0,0,.25);\n\n    opacity: 0;\n\n    animation:\n        icsHeroContentIn\n        .65s\n        .10s\n        ease\n        forwards;\n}\n\n\n\/* ==========================================================\n   BUTTON CONTAINER\n   ========================================================== *\/\n\n.ics-hero-actions {\n    display: flex;\n\n    align-items: center;\n\n    flex-wrap: wrap;\n\n    gap: 14px;\n\n    opacity: 0;\n\n    animation:\n        icsHeroContentIn\n        .65s\n        .20s\n        ease\n        forwards;\n}\n\n\n\/* ==========================================================\n   PRIMARY CTA\n   ========================================================== *\/\n\n.ics-hero-primary {\n    min-height: 56px;\n\n    padding:\n        0\n        29px;\n\n    display: inline-flex;\n\n    align-items: center;\n    justify-content: center;\n\n    gap: 15px;\n\n    background:\n        var(--ics-blue);\n\n    border:\n        1px solid\n        var(--ics-blue);\n\n    border-radius: 6px;\n\n    color:\n        #ffffff !important;\n\n    font-size: 14px;\n\n    font-weight: 800;\n\n    letter-spacing: .2px;\n\n    text-decoration:\n        none !important;\n\n    box-shadow:\n        0 10px 28px\n        rgba(0,0,0,.22),\n\n        0 0 22px\n        rgba(22,139,210,.10);\n\n    transition:\n        transform .20s ease,\n        background .20s ease,\n        box-shadow .20s ease;\n}\n\n\n.ics-hero-primary:hover {\n    background:\n        var(--ics-blue-hover);\n\n    transform:\n        translateY(-2px);\n\n    box-shadow:\n        0 14px 32px\n        rgba(0,0,0,.28),\n\n        0 0 25px\n        rgba(22,139,210,.18);\n}\n\n\n.ics-hero-primary-arrow {\n    font-size: 18px;\n\n    line-height: 1;\n\n    transition:\n        transform .20s ease;\n}\n\n\n.ics-hero-primary:hover\n.ics-hero-primary-arrow {\n    transform:\n        translateX(5px);\n}\n\n\n\/* ==========================================================\n   SECONDARY CTA\n   ========================================================== *\/\n\n.ics-hero-secondary {\n    min-height: 56px;\n\n    padding:\n        0\n        27px;\n\n    display: inline-flex;\n\n    align-items: center;\n    justify-content: center;\n\n    gap: 15px;\n\n    background:\n        rgba(7,28,48,.46);\n\n    border:\n        1px solid\n        rgba(255,255,255,.25);\n\n    border-radius: 6px;\n\n    color:\n        #ffffff !important;\n\n    font-size: 14px;\n\n    font-weight: 700;\n\n    letter-spacing: .1px;\n\n    text-decoration:\n        none !important;\n\n    backdrop-filter:\n        blur(7px);\n\n    -webkit-backdrop-filter:\n        blur(7px);\n\n    transition:\n        transform .20s ease,\n        border-color .20s ease,\n        background .20s ease;\n}\n\n\n.ics-hero-secondary:hover {\n    transform:\n        translateY(-2px);\n\n    border-color:\n        rgba(228,184,74,.65);\n\n    background:\n        rgba(228,184,74,.07);\n}\n\n\n.ics-hero-secondary-arrow {\n    color:\n        var(--ics-yellow);\n\n    font-size: 17px;\n\n    line-height: 1;\n\n    transition:\n        transform .20s ease;\n}\n\n\n.ics-hero-secondary:hover\n.ics-hero-secondary-arrow {\n    transform:\n        translateY(4px);\n}\n\n\n\/* ==========================================================\n   CONTENT ENTRANCE\n\n   Photograph itself NEVER moves.\n   ========================================================== *\/\n\n@keyframes icsHeroContentIn {\n\n    from {\n        opacity: 0;\n\n        transform:\n            translateY(14px);\n    }\n\n\n    to {\n        opacity: 1;\n\n        transform:\n            translateY(0);\n    }\n\n}\n\n\n\/* ==========================================================\n   NORMAL \/ SHORT LAPTOP SCREENS\n\n   This brings it very close to the ORIGINAL hero proportions.\n   ========================================================== *\/\n\n@media\n(max-height: 800px)\nand (min-width: 1001px) {\n\n    .ics-hero {\n        max-height: none;\n    }\n\n\n    .ics-hero-inner {\n        padding:\n            45px\n            42px\n            70px;\n    }\n\n\n    .ics-hero-content {\n        max-width: 680px;\n    }\n\n\n    .ics-hero-title {\n        margin-bottom: 26px;\n\n        font-size:\n            clamp(58px, 5vw, 82px);\n    }\n\n\n    .ics-hero-description {\n        max-width: 570px;\n\n        margin-bottom: 32px;\n\n        font-size: 17px;\n    }\n\n\n    .ics-hero-primary,\n    .ics-hero-secondary {\n        min-height: 54px;\n    }\n\n}\n\n\n\/* ==========================================================\n   TABLET\n   ========================================================== *\/\n\n@media (max-width: 1000px) {\n\n    :root {\n        --ics-header-height: 78px;\n    }\n\n\n    .ics-hero {\n        max-height: none;\n    }\n\n\n    .ics-hero-image {\n        background-position:\n            60% center;\n    }\n\n\n    .ics-hero-blend {\n        background:\n\n            linear-gradient(\n                90deg,\n\n                #071C30 0%,\n\n                rgba(7,28,48,1) 20%,\n\n                rgba(7,28,48,.94) 34%,\n\n                rgba(7,28,48,.75) 48%,\n\n                rgba(7,28,48,.42) 62%,\n\n                rgba(7,28,48,.12) 78%,\n\n                transparent 100%\n            ),\n\n\n            linear-gradient(\n                180deg,\n\n                transparent 56%,\n\n                rgba(7,28,48,.12) 69%,\n\n                rgba(7,28,48,.43) 82%,\n\n                rgba(7,28,48,.78) 93%,\n\n                #071C30 100%\n            ),\n\n\n            linear-gradient(\n                180deg,\n\n                rgba(7,28,48,.55),\n\n                transparent 18%\n            );\n    }\n\n\n    .ics-hero-soft-edge {\n        left: 34%;\n\n        width: 32%;\n    }\n\n\n    .ics-hero-inner {\n        padding:\n            55px\n            28px\n            80px;\n    }\n\n\n    .ics-hero-content {\n        max-width: 590px;\n    }\n\n\n    .ics-hero-title {\n        margin-bottom: 26px;\n\n        font-size:\n            clamp(52px, 8vw, 72px);\n    }\n\n\n    .ics-hero-description {\n        max-width: 540px;\n\n        margin-bottom: 32px;\n\n        font-size: 16px;\n    }\n\n\n    .ics-hero-primary,\n    .ics-hero-secondary {\n        min-height: 54px;\n    }\n\n}\n\n\n\/* ==========================================================\n   MOBILE\n\n   Keeps the original mobile composition:\n   equipment above, content on dark canvas below.\n   ========================================================== *\/\n\n@media (max-width: 640px) {\n\n    :root {\n        --ics-header-height: 72px;\n    }\n\n\n    .ics-hero {\n        min-height:\n            max(\n                calc(\n                    100svh - var(--ics-header-height)\n                ),\n                680px\n            );\n\n        max-height: none;\n\n        align-items:\n            flex-end;\n    }\n\n\n    @supports (height: 100dvh) {\n\n        .ics-hero {\n            min-height:\n                max(\n                    calc(\n                        100dvh - var(--ics-header-height)\n                    ),\n                    680px\n                );\n        }\n\n    }\n\n\n    .ics-hero-image {\n        background-position:\n            67% center;\n    }\n\n\n    .ics-hero-blend {\n        background:\n\n            linear-gradient(\n                180deg,\n\n                rgba(7,28,48,.12) 0%,\n\n                rgba(7,28,48,.24) 22%,\n\n                rgba(7,28,48,.54) 42%,\n\n                rgba(7,28,48,.88) 60%,\n\n                rgba(7,28,48,.98) 74%,\n\n                #071C30 100%\n            );\n    }\n\n\n    .ics-hero-soft-edge {\n        display: none;\n    }\n\n\n    .ics-hero-ambient {\n        width: 450px;\n        height: 450px;\n\n        left: -280px;\n    }\n\n\n    .ics-hero-bottom-flow {\n        height: 75px;\n    }\n\n\n    .ics-hero-inner {\n        padding:\n            190px\n            20px\n            58px;\n    }\n\n\n    .ics-hero-content {\n        max-width: 100%;\n    }\n\n\n    .ics-hero-title {\n        margin-bottom: 22px;\n\n        font-size:\n            clamp(44px, 13vw, 60px);\n\n        line-height: .95;\n\n        letter-spacing: -2px;\n    }\n\n\n    .ics-hero-description {\n        max-width: 100%;\n\n        margin-bottom: 28px;\n\n        font-size: 15px;\n\n        line-height: 1.65;\n    }\n\n\n    .ics-hero-actions {\n        width: 100%;\n\n        flex-direction: column;\n\n        align-items: stretch;\n    }\n\n\n    .ics-hero-primary,\n    .ics-hero-secondary {\n        width: 100%;\n\n        min-height: 54px;\n    }\n\n}\n\n\n\/* ==========================================================\n   REDUCED MOTION \/ ACCESSIBILITY\n   ========================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .ics-hero-title,\n    .ics-hero-description,\n    .ics-hero-actions {\n        opacity: 1;\n\n        animation: none !important;\n\n        transform: none;\n    }\n\n}\n\n<\/style>\n\n\n<!-- ========================================================\n     IDEALCS HOMEPAGE HERO \u2014 BALANCED FULL SCREEN V4\n\n     HEADER = GLOBAL\n     FOOTER = GLOBAL\n     ======================================================== -->\n\n<section\n    class=\"ics-hero\"\n    id=\"home\"\n>\n\n\n    <!-- HERO IMAGE -->\n\n    <div\n        class=\"ics-hero-image\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n\n    <!-- IMAGE \/ WEBSITE BLEND -->\n\n    <div\n        class=\"ics-hero-blend\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n\n    <!-- SOFT IMAGE TRANSITION -->\n\n    <div\n        class=\"ics-hero-soft-edge\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n\n    <!-- BLUE AMBIENCE -->\n\n    <div\n        class=\"ics-hero-ambient\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n\n    <!-- FLOW INTO NEXT SECTION -->\n\n    <div\n        class=\"ics-hero-bottom-flow\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n\n    <!-- ====================================================\n         HERO CONTENT\n         ==================================================== -->\n\n    <div class=\"ics-hero-inner\">\n\n        <div class=\"ics-hero-content\">\n\n\n            <!-- MAIN HEADING -->\n\n            <h1 class=\"ics-hero-title\">\n\n                <span class=\"ics-hero-title-line\">\n                    YOUR IDEAL IT.\n                <\/span>\n\n\n                <span\n                    class=\"\n                    ics-hero-title-line\n                    ics-hero-managed\n                    \"\n                >\n\n                    MANAGED<span class=\"ics-hero-dot\">.<\/span>\n\n                <\/span>\n\n            <\/h1>\n\n\n            <!-- DESCRIPTION -->\n\n            <p class=\"ics-hero-description\">\n\n                From the devices your team uses to the systems\n                behind your business \u2014 we bring your technology\n                together and keep it managed.\n\n            <\/p>\n\n\n            <!-- ACTIONS -->\n\n            <div class=\"ics-hero-actions\">\n\n\n                <a\n                    href=\"\/contact\/\"\n                    class=\"ics-hero-primary\"\n                >\n\n                    LET'S CHAT\n\n                    <span class=\"ics-hero-primary-arrow\">\n                        \u2192\n                    <\/span>\n\n                <\/a>\n\n\n                <a\n                    href=\"#it-solutions\"\n                    class=\"ics-hero-secondary\"\n                >\n\n                    EXPLORE OUR SERVICES\n\n                    <span class=\"ics-hero-secondary-arrow\">\n                        \u2193\n                    <\/span>\n\n                <\/a>\n\n\n            <\/div>\n\n\n        <\/div>\n\n    <\/div>\n\n\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e8f034 elementor-widget elementor-widget-html\" data-id=\"8e8f034\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* =========================================================\n   IDEALCS \u2014 IT SOLUTIONS\n   HOMEPAGE ECOSYSTEM \u2014 SCROLL FLOW V3\n\n   BASE:\n   #071C30\n\n   IMPORTANT:\n   - Working ecosystem layout preserved\n   - Actual scroll position drives movement\n   - No timed \"pop-in\" sequence\n   - Content remains visible if JS fails\n   ========================================================= *\/\n\n.ics-managed {\n    --bg: #071C30;\n    --blue: #168BD2;\n    --blue-hot: #20A8F5;\n    --yellow: #E4B84A;\n    --white: #FFFFFF;\n\n    position: relative;\n\n    width: 100vw;\n\n    margin-left: calc(50% - 50vw);\n    margin-right: calc(50% - 50vw);\n\n    overflow: hidden;\n\n    background:\n        radial-gradient(\n            circle at 50% 58%,\n            rgba(22,139,210,.075),\n            transparent 34%\n        ),\n        var(--bg);\n\n    color: var(--white);\n\n    font-family:\n        Arial,\n        Helvetica,\n        sans-serif;\n\n    isolation: isolate;\n}\n\n\n\/* =========================================================\n   ELEMENTOR CLEANUP\n   ========================================================= *\/\n\n.elementor-widget-html:has(.ics-managed),\n.elementor-widget-html:has(.ics-managed)\n> .elementor-widget-container {\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n\n\/* =========================================================\n   FLOW FROM HERO\n   ========================================================= *\/\n\n.ics-managed-top-flow {\n    position: absolute;\n\n    z-index: 0;\n\n    top: 0;\n    left: 0;\n    right: 0;\n\n    height: 190px;\n\n    pointer-events: none;\n\n    background:\n        linear-gradient(\n            180deg,\n            #071C30 0%,\n            rgba(7,28,48,.97) 30%,\n            rgba(7,28,48,.72) 62%,\n            transparent 100%\n        );\n}\n\n\n\/* =========================================================\n   TECHNICAL GRID\n   ========================================================= *\/\n\n.ics-managed::before {\n    content: \"\";\n\n    position: absolute;\n\n    inset: 300px 0 0;\n\n    opacity: .04;\n\n    pointer-events: none;\n\n    background-image:\n\n        linear-gradient(\n            rgba(255,255,255,.15) 1px,\n            transparent 1px\n        ),\n\n        linear-gradient(\n            90deg,\n            rgba(255,255,255,.15) 1px,\n            transparent 1px\n        );\n\n    background-size:\n        54px 54px;\n\n    -webkit-mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 0%,\n            transparent 72%\n        );\n\n    mask-image:\n        radial-gradient(\n            ellipse at center,\n            #000 0%,\n            transparent 72%\n        );\n}\n\n\n\/* =========================================================\n   FLOW INTO NEXT SECTION\n   ========================================================= *\/\n\n.ics-managed::after {\n    content: \"\";\n\n    position: absolute;\n\n    z-index: 0;\n\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n    height: 260px;\n\n    pointer-events: none;\n\n    background:\n        radial-gradient(\n            ellipse at 68% 115%,\n            rgba(22,139,210,.10),\n            transparent 58%\n        );\n}\n\n\n\/* =========================================================\n   MAIN INNER\n   ========================================================= *\/\n\n.ics-managed-inner {\n    position: relative;\n\n    z-index: 2;\n\n    width: 100%;\n    max-width: 1380px;\n\n    margin: 0 auto;\n\n    padding:\n        105px\n        42px\n        115px;\n}\n\n\n\/* =========================================================\n   INTRO\n   ========================================================= *\/\n\n.ics-managed-intro {\n    position: relative;\n\n    display: grid;\n\n    grid-template-columns:\n        .8fr\n        1.2fr;\n\n    align-items: end;\n\n    gap: 82px;\n\n    max-width: 1120px;\n\n    margin:\n        0\n        auto\n        82px;\n\n    padding:\n        0\n        18px;\n}\n\n\n\/* =========================================================\n   HEADING\n   ========================================================= *\/\n\n.ics-managed-heading {\n    position: relative;\n}\n\n\n.ics-managed-title {\n    margin: 0;\n\n    font-size:\n        clamp(46px, 4.4vw, 64px);\n\n    font-weight: 800;\n\n    line-height: .98;\n\n    letter-spacing: -2.6px;\n\n    text-align: left;\n\n    text-transform: uppercase;\n}\n\n\n.ics-managed-title span {\n    display: block;\n}\n\n\n.ics-title-white {\n    color: #FFFFFF;\n}\n\n\n.ics-managed-title\n.ics-title-blue {\n    color:\n        var(--blue-hot);\n}\n\n\n\/* =========================================================\n   BRAND LINE\n   ========================================================= *\/\n\n.ics-managed-accent {\n    width: 74px;\n    height: 3px;\n\n    margin-top: 24px;\n\n    border-radius: 20px;\n\n    background:\n        linear-gradient(\n            90deg,\n\n            var(--blue-hot) 0%,\n\n            var(--blue-hot) 68%,\n\n            var(--yellow) 68%,\n\n            var(--yellow) 100%\n        );\n\n    box-shadow:\n        0 0 12px\n        rgba(32,168,245,.12);\n}\n\n\n\/* =========================================================\n   INTRO COPY\n   ========================================================= *\/\n\n.ics-managed-intro-copy {\n    max-width: 590px;\n\n    padding-bottom: 3px;\n}\n\n\n.ics-managed-lead {\n    margin:\n        0\n        0\n        12px;\n\n    color:\n        var(--yellow);\n\n    font-size: 18px;\n\n    font-weight: 700;\n\n    line-height: 1.4;\n\n    letter-spacing: -.15px;\n\n    text-align: left;\n}\n\n\n.ics-managed-copy {\n    margin: 0;\n\n    color:\n        rgba(255,255,255,.64);\n\n    font-size: 15px;\n\n    font-weight: 400;\n\n    line-height: 1.7;\n\n    text-align: left;\n}\n\n\n.ics-managed-copy strong {\n    color: #FFFFFF;\n\n    font-weight: 700;\n}\n\n\n\/* =========================================================\n   ECOSYSTEM\n   ========================================================= *\/\n\n.ics-ecosystem {\n    position: relative;\n\n    width: 100%;\n    height: 790px;\n\n    margin: 0 auto;\n}\n\n\n\/* =========================================================\n   SVG CONNECTION SYSTEM\n   ========================================================= *\/\n\n.ics-connections {\n    position: absolute;\n\n    z-index: 1;\n\n    inset: 0;\n\n    width: 100%;\n    height: 100%;\n\n    pointer-events: none;\n\n    overflow: visible;\n}\n\n\n.ics-cable-glow {\n    fill: none;\n\n    stroke:\n        rgba(32,168,245,.08);\n\n    stroke-width: 9;\n\n    stroke-linecap: round;\n\n    filter:\n        blur(5px);\n}\n\n\n.ics-cable {\n    fill: none;\n\n    stroke:\n        rgba(32,168,245,.16);\n\n    stroke-width: 2;\n\n    stroke-linecap: round;\n}\n\n\n.ics-data-flow {\n    fill: none;\n\n    stroke:\n        var(--blue-hot);\n\n    stroke-width: 2.4;\n\n    stroke-linecap: round;\n\n    stroke-dasharray:\n        5 18;\n\n    filter:\n        drop-shadow(\n            0 0 5px\n            rgba(32,168,245,.8)\n        );\n\n    animation:\n        icsFlow\n        3.3s\n        linear\n        infinite;\n}\n\n\n.ics-data-flow.gold {\n    stroke:\n        var(--yellow);\n\n    animation-duration:\n        4.1s;\n\n    filter:\n        drop-shadow(\n            0 0 5px\n            rgba(228,184,74,.75)\n        );\n}\n\n\n\/* =========================================================\n   DATA PACKETS\n   ========================================================= *\/\n\n.ics-packet {\n    fill:\n        #7ED8FF;\n\n    filter:\n        drop-shadow(\n            0 0 7px\n            #20A8F5\n        );\n}\n\n\n.ics-packet.gold {\n    fill:\n        #FFD369;\n\n    filter:\n        drop-shadow(\n            0 0 7px\n            #E4B84A\n        );\n}\n\n\n\/* =========================================================\n   SERVICE NODE\n   ========================================================= *\/\n\n.ics-service {\n    position: absolute;\n\n    z-index: 5;\n\n    width: 280px;\n\n    text-align: center;\n\n    text-decoration:\n        none !important;\n\n    color:\n        inherit !important;\n\n    cursor: pointer;\n\n    transition:\n        filter .28s ease;\n\n    will-change:\n        transform,\n        opacity;\n}\n\n\n.ics-service:hover {\n    filter:\n        drop-shadow(\n            0 15px 22px\n            rgba(22,139,210,.15)\n        );\n}\n\n\n\/* =========================================================\n   SERVICE ART\n   ========================================================= *\/\n\n.ics-service-art {\n    position: relative;\n\n    display: flex;\n\n    align-items: flex-end;\n    justify-content: center;\n\n    width: 100%;\n    height: 190px;\n\n    margin-bottom: 15px;\n}\n\n\n.ics-service-art img {\n    display: block;\n\n    max-width: 100%;\n    max-height: 190px;\n\n    width: auto;\n    height: auto;\n\n    object-fit: contain;\n\n    filter:\n        drop-shadow(\n            0 15px 20px\n            rgba(0,0,0,.28)\n        );\n\n    transition:\n        transform .28s ease,\n        filter .28s ease;\n}\n\n\n.ics-service:hover\n.ics-service-art img {\n    transform:\n        scale(1.035);\n\n    filter:\n        drop-shadow(\n            0 18px 28px\n            rgba(22,139,210,.20)\n        );\n}\n\n\n\/* =========================================================\n   INDIVIDUAL ART BALANCE\n   ========================================================= *\/\n\n.ics-service.cloud\n.ics-service-art img {\n    max-width: 260px;\n    max-height: 175px;\n}\n\n\n.ics-service.servers\n.ics-service-art img {\n    max-width: 245px;\n}\n\n\n.ics-service.internet\n.ics-service-art img {\n    max-width: 255px;\n}\n\n\n.ics-service.network\n.ics-service-art img {\n    max-width: 235px;\n}\n\n\n.ics-service.backup\n.ics-service-art img {\n    max-width: 250px;\n}\n\n\n\/* =========================================================\n   CONNECTION PORTS\n   ========================================================= *\/\n\n.ics-port {\n    position: absolute;\n\n    z-index: 8;\n\n    left: 50%;\n\n    width: 9px;\n    height: 9px;\n\n    transform:\n        translateX(-50%);\n\n    border:\n        2px solid\n        var(--bg);\n\n    border-radius: 50%;\n\n    background:\n        var(--blue-hot);\n\n    box-shadow:\n        0 0 14px\n        rgba(32,168,245,.9);\n}\n\n\n.ics-service.top\n.ics-port {\n    bottom: 50px;\n}\n\n\n.ics-service.bottom\n.ics-port {\n    top: 2px;\n}\n\n\n\/* =========================================================\n   SERVICE TEXT\n   ========================================================= *\/\n\n.ics-service-name {\n    margin-bottom: 6px;\n\n    color:\n        rgba(255,255,255,.95);\n\n    font-size: 13px;\n\n    font-weight: 800;\n\n    line-height: 1.25;\n\n    letter-spacing: .4px;\n\n    text-transform: uppercase;\n}\n\n\n.ics-service-detail {\n    color:\n        rgba(255,255,255,.38);\n\n    font-size: 9px;\n\n    font-weight: 700;\n\n    line-height: 1.45;\n\n    letter-spacing: .6px;\n\n    text-transform: uppercase;\n}\n\n\n\/* =========================================================\n   LEARN MORE HINT\n   ========================================================= *\/\n\n.ics-service-read {\n    margin-top: 8px;\n\n    color:\n        rgba(228,184,74,.78);\n\n    font-size: 8px;\n\n    font-weight: 800;\n\n    line-height: 1.4;\n\n    letter-spacing: .8px;\n\n    text-transform: uppercase;\n\n    opacity: 0;\n\n    transform:\n        translateY(3px);\n\n    transition:\n        opacity .2s ease,\n        transform .2s ease;\n}\n\n\n.ics-service:hover\n.ics-service-read {\n    opacity: 1;\n\n    transform:\n        translateY(0);\n}\n\n\n\/* =========================================================\n   EXACT WORKING NODE POSITIONS\n   ========================================================= *\/\n\n.ics-service.users {\n    top: 40px;\n    left: 0;\n}\n\n\n.ics-service.cloud {\n    top: 0;\n\n    left: 50%;\n\n    transform:\n        translateX(-50%);\n}\n\n\n.ics-service.servers {\n    top: 40px;\n    right: 0;\n}\n\n\n.ics-service.internet {\n    bottom: 5px;\n    left: 0;\n}\n\n\n.ics-service.network {\n    bottom: -5px;\n\n    left: 50%;\n\n    transform:\n        translateX(-50%);\n}\n\n\n.ics-service.backup {\n    bottom: 5px;\n    right: 0;\n}\n\n\n\/* =========================================================\n   CENTRAL IDEALCS CORE\n   ========================================================= *\/\n\n.ics-core {\n    position: absolute;\n\n    z-index: 10;\n\n    left: 50%;\n    top: 50%;\n\n    width: 305px;\n    height: 305px;\n\n    transform:\n        translate(-50%, -50%);\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    will-change:\n        transform,\n        opacity;\n}\n\n\n.ics-core::before {\n    content: \"\";\n\n    position: absolute;\n\n    inset: 18px;\n\n    border-radius: 50%;\n\n    background:\n        radial-gradient(\n            circle,\n            rgba(32,168,245,.16),\n            transparent 68%\n        );\n\n    filter:\n        blur(20px);\n\n    animation:\n        icsCoreGlow\n        3.4s\n        ease-in-out\n        infinite;\n}\n\n\n.ics-core::after {\n    content: \"\";\n\n    position: absolute;\n\n    inset: -17px;\n\n    border:\n        1px dashed\n        rgba(32,168,245,.14);\n\n    border-radius: 50%;\n\n    animation:\n        icsOrbit\n        35s\n        linear\n        infinite;\n}\n\n\n.ics-core img {\n    position: relative;\n\n    z-index: 3;\n\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: contain;\n\n    filter:\n        drop-shadow(\n            0 24px 35px\n            rgba(0,0,0,.34)\n        )\n        drop-shadow(\n            0 0 22px\n            rgba(22,139,210,.13)\n        );\n}\n\n\n\/* =========================================================\n   CORE STATUS\n   ========================================================= *\/\n\n.ics-core-status {\n    position: absolute;\n\n    z-index: 15;\n\n    left: 50%;\n    bottom: -32px;\n\n    transform:\n        translateX(-50%);\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 7px;\n\n    padding:\n        7px\n        11px;\n\n    border:\n        1px solid\n        rgba(255,255,255,.07);\n\n    border-radius: 20px;\n\n    background:\n        rgba(5,22,38,.92);\n\n    color:\n        rgba(255,255,255,.52);\n\n    font-size: 8px;\n\n    font-weight: 800;\n\n    letter-spacing: 1px;\n\n    white-space: nowrap;\n\n    text-transform: uppercase;\n}\n\n\n.ics-status-dot {\n    width: 6px;\n    height: 6px;\n\n    border-radius: 50%;\n\n    background:\n        #5BDC91;\n\n    box-shadow:\n        0 0 9px\n        rgba(91,220,145,.85);\n\n    animation:\n        icsStatusPulse\n        2s\n        ease-in-out\n        infinite;\n}\n\n\n\/* =========================================================\n   BOTTOM CONTENT\n   ========================================================= *\/\n\n.ics-managed-action {\n    position: relative;\n\n    z-index: 3;\n\n    max-width: 680px;\n\n    margin:\n        48px\n        auto\n        0;\n\n    text-align: center;\n\n    will-change:\n        transform,\n        opacity;\n}\n\n\n.ics-managed-action-copy {\n    margin:\n        0\n        auto\n        19px;\n\n    color:\n        rgba(255,255,255,.46);\n\n    font-size: 12px;\n\n    line-height: 1.65;\n}\n\n\n.ics-managed-action-copy strong {\n    color:\n        rgba(255,255,255,.78);\n\n    font-weight: 700;\n}\n\n\n.ics-managed-link {\n    position: relative;\n\n    display: inline-flex;\n\n    align-items: center;\n\n    gap: 12px;\n\n    padding-bottom: 7px;\n\n    color:\n        rgba(255,255,255,.88) !important;\n\n    font-size: 12px;\n\n    font-weight: 800;\n\n    letter-spacing: .6px;\n\n    text-decoration:\n        none !important;\n\n    text-transform: uppercase;\n}\n\n\n.ics-managed-link::after {\n    content: \"\";\n\n    position: absolute;\n\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n    height: 1px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--blue),\n            var(--yellow)\n        );\n}\n\n\n.ics-managed-link span {\n    color:\n        var(--yellow);\n\n    font-size: 17px;\n\n    transition:\n        transform .2s ease;\n}\n\n\n.ics-managed-link:hover span {\n    transform:\n        translateX(5px);\n}\n\n\n\/* =========================================================\n   CONTINUOUS NETWORK ANIMATIONS\n   ========================================================= *\/\n\n@keyframes icsFlow {\n\n    to {\n        stroke-dashoffset: -92;\n    }\n\n}\n\n\n@keyframes icsOrbit {\n\n    from {\n        transform:\n            rotate(0deg);\n    }\n\n    to {\n        transform:\n            rotate(360deg);\n    }\n\n}\n\n\n@keyframes icsCoreGlow {\n\n    0%,\n    100% {\n        opacity: .6;\n\n        transform:\n            scale(.96);\n    }\n\n    50% {\n        opacity: 1;\n\n        transform:\n            scale(1.05);\n    }\n\n}\n\n\n@keyframes icsStatusPulse {\n\n    0%,\n    100% {\n        opacity: .55;\n    }\n\n    50% {\n        opacity: 1;\n    }\n\n}\n\n\n\/* =========================================================\n   SCROLL-DRIVEN FLOW\n\n   IMPORTANT:\n   These rules only activate AFTER JS successfully adds\n   .ics-scroll-ready.\n\n   So the section can NEVER remain blank if JS fails.\n   ========================================================= *\/\n\n\n\/* INTRO *\/\n\n.ics-managed.ics-scroll-ready\n.ics-managed-intro {\n\n    opacity:\n        var(--intro-opacity, 1);\n\n    transform:\n        translateY(\n            var(--intro-y, 0px)\n        );\n\n    will-change:\n        transform,\n        opacity;\n}\n\n\n\/* CORE *\/\n\n.ics-managed.ics-scroll-ready\n.ics-core {\n\n    opacity:\n        var(--core-opacity, 1);\n\n    transform:\n        translate(-50%, -50%)\n        translateY(\n            var(--core-y, 0px)\n        )\n        scale(\n            var(--core-scale, 1)\n        );\n}\n\n\n\/* TOP LEFT \/ RIGHT + BOTTOM LEFT \/ RIGHT *\/\n\n.ics-managed.ics-scroll-ready\n.ics-service.users,\n\n.ics-managed.ics-scroll-ready\n.ics-service.servers,\n\n.ics-managed.ics-scroll-ready\n.ics-service.internet,\n\n.ics-managed.ics-scroll-ready\n.ics-service.backup {\n\n    opacity:\n        var(--node-opacity, 1);\n\n    transform:\n        translateY(\n            var(--node-y, 0px)\n        )\n        scale(\n            var(--node-scale, 1)\n        );\n}\n\n\n\/* CENTRED NODES *\/\n\n.ics-managed.ics-scroll-ready\n.ics-service.cloud,\n\n.ics-managed.ics-scroll-ready\n.ics-service.network {\n\n    opacity:\n        var(--node-opacity, 1);\n\n    transform:\n        translateX(-50%)\n        translateY(\n            var(--node-y, 0px)\n        )\n        scale(\n            var(--node-scale, 1)\n        );\n}\n\n\n\/* CONNECTION NETWORK *\/\n\n.ics-managed.ics-scroll-ready\n.ics-connections {\n\n    opacity:\n        var(--network-opacity, 1);\n\n    will-change:\n        opacity;\n}\n\n\n\/* BOTTOM CTA *\/\n\n.ics-managed.ics-scroll-ready\n.ics-managed-action {\n\n    opacity:\n        var(--action-opacity, 1);\n\n    transform:\n        translateY(\n            var(--action-y, 0px)\n        );\n}\n\n\n\/* =========================================================\n   SCROLL MODE HOVER\n   ========================================================= *\/\n\n.ics-managed.ics-scroll-ready\n.ics-service.users:hover,\n\n.ics-managed.ics-scroll-ready\n.ics-service.servers:hover,\n\n.ics-managed.ics-scroll-ready\n.ics-service.internet:hover,\n\n.ics-managed.ics-scroll-ready\n.ics-service.backup:hover {\n\n    transform:\n        translateY(\n            calc(\n                var(--node-y, 0px) - 7px\n            )\n        )\n        scale(\n            var(--node-scale, 1)\n        );\n}\n\n\n.ics-managed.ics-scroll-ready\n.ics-service.cloud:hover,\n\n.ics-managed.ics-scroll-ready\n.ics-service.network:hover {\n\n    transform:\n        translateX(-50%)\n        translateY(\n            calc(\n                var(--node-y, 0px) - 7px\n            )\n        )\n        scale(\n            var(--node-scale, 1)\n        );\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media (max-width: 1050px) {\n\n    .ics-managed-inner {\n        padding:\n            90px\n            26px\n            100px;\n    }\n\n\n    .ics-managed-intro {\n        grid-template-columns:\n            .9fr\n            1.1fr;\n\n        gap: 50px;\n\n        padding:\n            0\n            10px;\n    }\n\n\n    .ics-ecosystem {\n        height: 760px;\n    }\n\n\n    .ics-service {\n        width: 220px;\n    }\n\n\n    .ics-service-art {\n        height: 160px;\n    }\n\n\n    .ics-service-art img {\n        max-height: 160px;\n    }\n\n\n    .ics-core {\n        width: 260px;\n        height: 260px;\n    }\n\n}\n\n\n\/* =========================================================\n   SMALL TABLET\n   ========================================================= *\/\n\n@media (max-width: 900px) {\n\n    .ics-managed-intro {\n        grid-template-columns:\n            1fr;\n\n        gap: 28px;\n\n        max-width: 720px;\n\n        margin-bottom: 70px;\n    }\n\n\n    .ics-managed-intro-copy {\n        max-width: 650px;\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 700px) {\n\n    .ics-managed-inner {\n        padding:\n            75px\n            20px\n            80px;\n    }\n\n\n    .ics-managed-intro {\n        display: block;\n\n        margin-bottom: 58px;\n\n        padding: 0;\n    }\n\n\n    .ics-managed-title {\n        font-size:\n            clamp(40px, 12vw, 52px);\n\n        letter-spacing:\n            -2px;\n    }\n\n\n    .ics-managed-accent {\n        margin-bottom:\n            27px;\n    }\n\n\n    .ics-managed-lead {\n        font-size:\n            17px;\n    }\n\n\n    .ics-managed-copy {\n        font-size:\n            14px;\n\n        line-height:\n            1.65;\n    }\n\n\n    \/* -----------------------------------------------\n       Mobile becomes vertical\n       ----------------------------------------------- *\/\n\n    .ics-ecosystem {\n        display: flex;\n\n        flex-direction: column;\n\n        align-items: center;\n\n        gap: 50px;\n\n        height: auto;\n    }\n\n\n    .ics-connections {\n        display: none;\n    }\n\n\n    .ics-core {\n        position: relative;\n\n        left: auto;\n        top: auto;\n\n        order: -1;\n\n        width: 245px;\n        height: 245px;\n\n        margin-bottom: 32px;\n\n        transform: none;\n    }\n\n\n    .ics-service,\n    .ics-service.users,\n    .ics-service.cloud,\n    .ics-service.servers,\n    .ics-service.internet,\n    .ics-service.network,\n    .ics-service.backup {\n\n        position: relative;\n\n        top: auto;\n        right: auto;\n        bottom: auto;\n        left: auto;\n\n        width: 100%;\n\n        max-width: 300px;\n\n        transform: none;\n    }\n\n\n    .ics-service-art {\n        height: 190px;\n    }\n\n\n    .ics-service-art img {\n        max-height: 190px;\n    }\n\n\n    .ics-port {\n        display: none;\n    }\n\n\n    .ics-service-read {\n        opacity: .72;\n\n        transform: none;\n    }\n\n\n    .ics-managed-action {\n        margin-top:\n            65px;\n    }\n\n\n    \/* -----------------------------------------------\n       Mobile scroll transforms\n       ----------------------------------------------- *\/\n\n    .ics-managed.ics-scroll-ready\n    .ics-core {\n\n        transform:\n            translateY(\n                var(--core-y, 0px)\n            )\n            scale(\n                var(--core-scale, 1)\n            );\n    }\n\n\n    .ics-managed.ics-scroll-ready\n    .ics-service,\n\n    .ics-managed.ics-scroll-ready\n    .ics-service.cloud,\n\n    .ics-managed.ics-scroll-ready\n    .ics-service.network {\n\n        transform:\n            translateY(\n                var(--node-y, 0px)\n            )\n            scale(\n                var(--node-scale, 1)\n            );\n    }\n\n\n    .ics-managed.ics-scroll-ready\n    .ics-service:hover,\n\n    .ics-managed.ics-scroll-ready\n    .ics-service.cloud:hover,\n\n    .ics-managed.ics-scroll-ready\n    .ics-service.network:hover {\n\n        transform:\n            translateY(\n                calc(\n                    var(--node-y, 0px) - 5px\n                )\n            )\n            scale(\n                var(--node-scale, 1)\n            );\n    }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n   ========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .ics-managed {\n        --intro-opacity: 1 !important;\n        --intro-y: 0px !important;\n\n        --core-opacity: 1 !important;\n        --core-y: 0px !important;\n        --core-scale: 1 !important;\n\n        --network-opacity: 1 !important;\n\n        --action-opacity: 1 !important;\n        --action-y: 0px !important;\n    }\n\n\n    .ics-service {\n        --node-opacity: 1 !important;\n        --node-y: 0px !important;\n        --node-scale: 1 !important;\n    }\n\n\n    .ics-data-flow,\n    .ics-core::before,\n    .ics-core::after,\n    .ics-status-dot {\n\n        animation:\n            none !important;\n    }\n\n}\n\n<\/style>\n\n\n<!-- ========================================================\n     IDEALCS \u2014 IT SOLUTIONS\n     ======================================================== -->\n\n<section\n    class=\"ics-managed\"\n    id=\"it-solutions\"\n>\n\n\n    <div\n        class=\"ics-managed-top-flow\"\n        aria-hidden=\"true\"\n    ><\/div>\n\n\n    <div class=\"ics-managed-inner\">\n\n\n        <!-- =================================================\n             INTRO\n             ================================================= -->\n\n        <div class=\"ics-managed-intro\">\n\n\n            <div class=\"ics-managed-heading\">\n\n\n                <h2 class=\"ics-managed-title\">\n\n                    <span class=\"ics-title-white\">\n                        IT\n                    <\/span>\n\n                    <span class=\"ics-title-blue\">\n                        Solutions.\n                    <\/span>\n\n                <\/h2>\n\n\n                <div\n                    class=\"ics-managed-accent\"\n                    aria-hidden=\"true\"\n                ><\/div>\n\n\n            <\/div>\n\n\n            <div class=\"ics-managed-intro-copy\">\n\n\n                <p class=\"ics-managed-lead\">\n                    Technology that works together.\n                <\/p>\n\n\n                <p class=\"ics-managed-copy\">\n\n                    From the devices your team works on to the\n                    cloud, connectivity, infrastructure and backups\n                    behind your business \u2014 IdealCS brings the pieces\n                    together into one technology environment, then\n                    keeps it\n\n                    <strong>\n                        managed, monitored and supported.\n                    <\/strong>\n\n                <\/p>\n\n\n            <\/div>\n\n\n        <\/div>\n\n\n        <!-- =================================================\n             ECOSYSTEM\n             ================================================= -->\n\n        <div class=\"ics-ecosystem\">\n\n\n            <!-- =================================================\n                 CONNECTION NETWORK\n                 ================================================= -->\n\n            <svg\n                class=\"ics-connections\"\n                viewBox=\"0 0 1296 790\"\n                preserveAspectRatio=\"none\"\n                aria-hidden=\"true\"\n            >\n\n\n                <defs>\n\n\n                    <path\n                        id=\"icsPathUsers\"\n                        d=\"M140 215 C300 240 405 325 515 375\"\n                    \/>\n\n\n                    <path\n                        id=\"icsPathCloud\"\n                        d=\"M648 185 C648 245 648 290 648 325\"\n                    \/>\n\n\n                    <path\n                        id=\"icsPathServers\"\n                        d=\"M1156 215 C996 240 891 325 781 375\"\n                    \/>\n\n\n                    <path\n                        id=\"icsPathInternet\"\n                        d=\"M515 430 C405 480 300 555 140 590\"\n                    \/>\n\n\n                    <path\n                        id=\"icsPathNetwork\"\n                        d=\"M648 465 C648 515 648 555 648 600\"\n                    \/>\n\n\n                    <path\n                        id=\"icsPathBackup\"\n                        d=\"M781 430 C891 480 996 555 1156 590\"\n                    \/>\n\n\n                <\/defs>\n\n\n                <!-- GLOW -->\n\n\n                <use\n                    href=\"#icsPathUsers\"\n                    class=\"ics-cable-glow\"\n                \/>\n\n\n                <use\n                    href=\"#icsPathCloud\"\n                    class=\"ics-cable-glow\"\n                \/>\n\n\n                <use\n                    href=\"#icsPathServers\"\n                    class=\"ics-cable-glow\"\n                \/>\n\n\n                <use\n                    href=\"#icsPathInternet\"\n                    class=\"ics-cable-glow\"\n                \/>\n\n\n                <use\n                    href=\"#icsPathNetwork\"\n                    class=\"ics-cable-glow\"\n                \/>\n\n\n                <use\n                    href=\"#icsPathBackup\"\n                    class=\"ics-cable-glow\"\n                \/>\n\n\n                <!-- STATIC CONNECTIONS -->\n\n\n                <use\n                    href=\"#icsPathUsers\"\n                    class=\"ics-cable\"\n                \/>\n\n\n                <use\n                    href=\"#icsPathCloud\"\n                    class=\"ics-cable\"\n                \/>\n\n\n                <use\n                    href=\"#icsPathServers\"\n                    class=\"ics-cable\"\n                \/>\n\n\n                <use\n                    href=\"#icsPathInternet\"\n                    class=\"ics-cable\"\n                \/>\n\n\n                <use\n                    href=\"#icsPathNetwork\"\n                    class=\"ics-cable\"\n                \/>\n\n\n                <use\n                    href=\"#icsPathBackup\"\n                    class=\"ics-cable\"\n                \/>\n\n\n                <!-- MOVING ENERGY -->\n\n\n                <use\n                    href=\"#icsPathUsers\"\n                    class=\"ics-data-flow\"\n                \/>\n\n\n                <use\n                    href=\"#icsPathCloud\"\n                    class=\"ics-data-flow gold\"\n                \/>\n\n\n                <use\n                    href=\"#icsPathServers\"\n                    class=\"ics-data-flow\"\n                \/>\n\n\n                <use\n                    href=\"#icsPathInternet\"\n                    class=\"ics-data-flow gold\"\n                \/>\n\n\n                <use\n                    href=\"#icsPathNetwork\"\n                    class=\"ics-data-flow\"\n                \/>\n\n\n                <use\n                    href=\"#icsPathBackup\"\n                    class=\"ics-data-flow gold\"\n                \/>\n\n\n                <!-- DATA PACKETS -->\n\n\n                <circle\n                    class=\"ics-packet\"\n                    r=\"4\"\n                >\n\n                    <animateMotion\n                        dur=\"4.2s\"\n                        repeatCount=\"indefinite\"\n                    >\n\n                        <mpath\n                            href=\"#icsPathUsers\"\n                        \/>\n\n                    <\/animateMotion>\n\n                <\/circle>\n\n\n                <circle\n                    class=\"ics-packet gold\"\n                    r=\"4\"\n                >\n\n                    <animateMotion\n                        dur=\"3.5s\"\n                        begin=\".8s\"\n                        repeatCount=\"indefinite\"\n                    >\n\n                        <mpath\n                            href=\"#icsPathCloud\"\n                        \/>\n\n                    <\/animateMotion>\n\n                <\/circle>\n\n\n                <circle\n                    class=\"ics-packet\"\n                    r=\"4\"\n                >\n\n                    <animateMotion\n                        dur=\"4.5s\"\n                        begin=\"1.5s\"\n                        repeatCount=\"indefinite\"\n                    >\n\n                        <mpath\n                            href=\"#icsPathServers\"\n                        \/>\n\n                    <\/animateMotion>\n\n                <\/circle>\n\n\n                <circle\n                    class=\"ics-packet gold\"\n                    r=\"4\"\n                >\n\n                    <animateMotion\n                        dur=\"4.6s\"\n                        begin=\".5s\"\n                        repeatCount=\"indefinite\"\n                    >\n\n                        <mpath\n                            href=\"#icsPathInternet\"\n                        \/>\n\n                    <\/animateMotion>\n\n                <\/circle>\n\n\n                <circle\n                    class=\"ics-packet\"\n                    r=\"4\"\n                >\n\n                    <animateMotion\n                        dur=\"3.7s\"\n                        begin=\"1.2s\"\n                        repeatCount=\"indefinite\"\n                    >\n\n                        <mpath\n                            href=\"#icsPathNetwork\"\n                        \/>\n\n                    <\/animateMotion>\n\n                <\/circle>\n\n\n                <circle\n                    class=\"ics-packet gold\"\n                    r=\"4\"\n                >\n\n                    <animateMotion\n                        dur=\"4.8s\"\n                        begin=\"2s\"\n                        repeatCount=\"indefinite\"\n                    >\n\n                        <mpath\n                            href=\"#icsPathBackup\"\n                        \/>\n\n                    <\/animateMotion>\n\n                <\/circle>\n\n\n            <\/svg>\n\n\n            <!-- =================================================\n                 USERS & DEVICES\n                 ================================================= -->\n\n            <a\n                class=\"ics-service users top\"\n                href=\"\/insights\/users-devices\/\"\n                aria-label=\"Learn more about users and devices\"\n            >\n\n\n                <div class=\"ics-service-art\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/idealcs.co.za\/wp-content\/uploads\/2026\/10\/Futuristic-Neon-Workstation-Setup.png\"\n                        alt=\"IdealCS users and managed business devices\"\n                        loading=\"lazy\"\n                    >\n\n                <\/div>\n\n\n                <span\n                    class=\"ics-port\"\n                    aria-hidden=\"true\"\n                ><\/span>\n\n\n                <div class=\"ics-service-name\">\n                    Users &amp; Devices\n                <\/div>\n\n\n                <div class=\"ics-service-detail\">\n                    Desktops \u2022 Laptops \u2022 Mobile \u2022 Endpoints\n                <\/div>\n\n\n                <div class=\"ics-service-read\">\n                    Learn More \u2192\n                <\/div>\n\n\n            <\/a>\n\n\n            <!-- =================================================\n                 CLOUD & SERVICES\n                 ================================================= -->\n\n            <a\n                class=\"ics-service cloud top\"\n                href=\"\/insights\/cloud-microsoft-365\/\"\n                aria-label=\"Learn more about cloud and Microsoft 365\"\n            >\n\n\n                <div class=\"ics-service-art\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/idealcs.co.za\/wp-content\/uploads\/2026\/10\/Futuristic-Cloud-Computing-Ecosystem.png\"\n                        alt=\"IdealCS cloud services and Microsoft 365\"\n                        loading=\"lazy\"\n                    >\n\n                <\/div>\n\n\n                <span\n                    class=\"ics-port\"\n                    aria-hidden=\"true\"\n                ><\/span>\n\n\n                <div class=\"ics-service-name\">\n                    Cloud &amp; Services\n                <\/div>\n\n\n                <div class=\"ics-service-detail\">\n                    Microsoft 365 \u2022 Google Workspace \u2022 Cloud\n                <\/div>\n\n\n                <div class=\"ics-service-read\">\n                    Learn More \u2192\n                <\/div>\n\n\n            <\/a>\n\n\n            <!-- =================================================\n                 SERVERS\n                 ================================================= -->\n\n            <a\n                class=\"ics-service servers top\"\n                href=\"\/insights\/servers-infrastructure\/\"\n                aria-label=\"Learn more about servers and infrastructure\"\n            >\n\n\n                <div class=\"ics-service-art\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/idealcs.co.za\/wp-content\/uploads\/2026\/10\/Futuristic-Neon-Server-Infrastructure.png\"\n                        alt=\"IdealCS managed servers and infrastructure\"\n                        loading=\"lazy\"\n                    >\n\n                <\/div>\n\n\n                <span\n                    class=\"ics-port\"\n                    aria-hidden=\"true\"\n                ><\/span>\n\n\n                <div class=\"ics-service-name\">\n                    Servers &amp; Infrastructure\n                <\/div>\n\n\n                <div class=\"ics-service-detail\">\n                    Physical \u2022 Virtual \u2022 Cloud\n                <\/div>\n\n\n                <div class=\"ics-service-read\">\n                    Learn More \u2192\n                <\/div>\n\n\n            <\/a>\n\n\n            <!-- =================================================\n                 CENTRAL CS CORE\n                 ================================================= -->\n\n            <div class=\"ics-core\">\n\n\n                <img decoding=\"async\"\n                    src=\"https:\/\/idealcs.co.za\/wp-content\/uploads\/2026\/10\/Neon-CS-Cyberpunk-Tech-Emblem.png\"\n                    alt=\"Ideal Computer Solutions managed technology ecosystem\"\n                >\n\n\n                <div class=\"ics-core-status\">\n\n                    <span\n                        class=\"ics-status-dot\"\n                        aria-hidden=\"true\"\n                    ><\/span>\n\n                    Managed &amp; Monitored\n\n                <\/div>\n\n\n            <\/div>\n\n\n            <!-- =================================================\n                 INTERNET & CONNECTIVITY\n                 ================================================= -->\n\n            <a\n                class=\"ics-service internet bottom\"\n                href=\"\/insights\/business-connectivity\/\"\n                aria-label=\"Learn more about internet and connectivity\"\n            >\n\n\n                <span\n                    class=\"ics-port\"\n                    aria-hidden=\"true\"\n                ><\/span>\n\n\n                <div class=\"ics-service-art\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/idealcs.co.za\/wp-content\/uploads\/2026\/10\/Futuristic-Network-Hub-on-a-Neon-Platform.png\"\n                        alt=\"IdealCS business internet and connectivity\"\n                        loading=\"lazy\"\n                    >\n\n                <\/div>\n\n\n                <div class=\"ics-service-name\">\n                    Internet &amp; Connectivity\n                <\/div>\n\n\n                <div class=\"ics-service-detail\">\n                    Fibre \u2022 LTE \u2022 Failover \u2022 VPN\n                <\/div>\n\n\n                <div class=\"ics-service-read\">\n                    Learn More \u2192\n                <\/div>\n\n\n            <\/a>\n\n\n            <!-- =================================================\n                 NETWORK \/ WIFI \/ CCTV\n                 ================================================= -->\n\n            <a\n                class=\"ics-service network bottom\"\n                href=\"\/insights\/network-wifi-cctv\/\"\n                aria-label=\"Learn more about networks Wi-Fi and CCTV\"\n            >\n\n\n                <span\n                    class=\"ics-port\"\n                    aria-hidden=\"true\"\n                ><\/span>\n\n\n                <div class=\"ics-service-art\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/idealcs.co.za\/wp-content\/uploads\/2026\/10\/Neon-Network-Security-Showcase.png\"\n                        alt=\"IdealCS business networking Wi-Fi and CCTV\"\n                        loading=\"lazy\"\n                    >\n\n                <\/div>\n\n\n                <div class=\"ics-service-name\">\n                    Network \u2022 Wi-Fi \u2022 CCTV\n                <\/div>\n\n\n                <div class=\"ics-service-detail\">\n                    Switching \u2022 Wireless \u2022 CCTV \u2022 Security\n                <\/div>\n\n\n                <div class=\"ics-service-read\">\n                    Learn More \u2192\n                <\/div>\n\n\n            <\/a>\n\n\n            <!-- =================================================\n                 BACKUP & RECOVERY\n                 ================================================= -->\n\n            <a\n                class=\"ics-service backup bottom\"\n                href=\"\/insights\/backup-recovery\/\"\n                aria-label=\"Learn more about backup and recovery\"\n            >\n\n\n                <span\n                    class=\"ics-port\"\n                    aria-hidden=\"true\"\n                ><\/span>\n\n\n                <div class=\"ics-service-art\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/idealcs.co.za\/wp-content\/uploads\/2026\/10\/Neon-Cloud-Backup-Server-Setup.png\"\n                        alt=\"IdealCS backup and disaster recovery\"\n                        loading=\"lazy\"\n                    >\n\n                <\/div>\n\n\n                <div class=\"ics-service-name\">\n                    Backup &amp; Recovery\n                <\/div>\n\n\n                <div class=\"ics-service-detail\">\n                    Acronis \u2022 NAS \u2022 Servers \u2022 Cloud\n                <\/div>\n\n\n                <div class=\"ics-service-read\">\n                    Learn More \u2192\n                <\/div>\n\n\n            <\/a>\n\n\n        <\/div>\n\n\n        <!-- =================================================\n             BOTTOM BRIDGE\n             ================================================= -->\n\n        <div class=\"ics-managed-action\">\n\n\n            <p class=\"ics-managed-action-copy\">\n\n                Explore any solution above to understand the\n                technology behind it, or\n\n                <strong>\n                    talk to us about your complete IT environment.\n                <\/strong>\n\n            <\/p>\n\n\n            <a\n                href=\"\/contact\/\"\n                class=\"ics-managed-link\"\n            >\n\n                Let's Talk About Your IT\n\n                <span>\n                    \u2192\n                <\/span>\n\n            <\/a>\n\n\n        <\/div>\n\n\n    <\/div>\n\n\n<\/section>\n\n\n<script>\n\/* =========================================================\n   IDEALCS \u2014 TRUE SCROLL-DRIVEN FLOW\n\n   Scroll down:\n   Content physically rises into position.\n\n   Scroll slowly:\n   Animation moves slowly.\n\n   Scroll quickly:\n   Animation moves quickly.\n\n   Scroll upward:\n   Movement reverses.\n\n   No timer-based entrance sequence.\n   ========================================================= *\/\n\n(function () {\n\n    function initIdealCSScrollFlow() {\n\n\n        const section =\n            document.querySelector(\n                \".ics-managed\"\n            );\n\n\n        if (!section) {\n            return;\n        }\n\n\n        \/* =================================================\n           ACCESSIBILITY\n           ================================================= *\/\n\n        const reducedMotion =\n            window.matchMedia(\n                \"(prefers-reduced-motion: reduce)\"\n            ).matches;\n\n\n        if (reducedMotion) {\n            return;\n        }\n\n\n        \/*\n           Only activate scroll CSS once JS is confirmed alive.\n\n           Without this class everything remains normally visible.\n        *\/\n\n        section.classList.add(\n            \"ics-scroll-ready\"\n        );\n\n\n        const intro =\n            section.querySelector(\n                \".ics-managed-intro\"\n            );\n\n\n        const core =\n            section.querySelector(\n                \".ics-core\"\n            );\n\n\n        const network =\n            section.querySelector(\n                \".ics-connections\"\n            );\n\n\n        const action =\n            section.querySelector(\n                \".ics-managed-action\"\n            );\n\n\n        const users =\n            section.querySelector(\n                \".ics-service.users\"\n            );\n\n\n        const cloud =\n            section.querySelector(\n                \".ics-service.cloud\"\n            );\n\n\n        const servers =\n            section.querySelector(\n                \".ics-service.servers\"\n            );\n\n\n        const internet =\n            section.querySelector(\n                \".ics-service.internet\"\n            );\n\n\n        const networkNode =\n            section.querySelector(\n                \".ics-service.network\"\n            );\n\n\n        const backup =\n            section.querySelector(\n                \".ics-service.backup\"\n            );\n\n\n        let ticking = false;\n\n\n        \/* =================================================\n           HELPERS\n           ================================================= *\/\n\n        function clamp(\n            value,\n            minimum,\n            maximum\n        ) {\n\n            return Math.min(\n                Math.max(\n                    value,\n                    minimum\n                ),\n                maximum\n            );\n\n        }\n\n\n        function range(\n            value,\n            start,\n            end\n        ) {\n\n            return clamp(\n                (\n                    value -\n                    start\n                ) \/\n                (\n                    end -\n                    start\n                ),\n                0,\n                1\n            );\n\n        }\n\n\n        function smooth(value) {\n\n            return (\n                value *\n                value *\n                (\n                    3 -\n                    2 * value\n                )\n            );\n\n        }\n\n\n        \/* =================================================\n           SET NODE\n           ================================================= *\/\n\n        function setNode(\n            element,\n            progress,\n            distance\n        ) {\n\n            if (!element) {\n                return;\n            }\n\n\n            const eased =\n                smooth(\n                    progress\n                );\n\n\n            const y =\n                (\n                    1 -\n                    eased\n                ) *\n                distance;\n\n\n            const scale =\n                .93 +\n                (\n                    eased *\n                    .07\n                );\n\n\n            element.style.setProperty(\n                \"--node-opacity\",\n                eased.toFixed(3)\n            );\n\n\n            element.style.setProperty(\n                \"--node-y\",\n                y.toFixed(2) + \"px\"\n            );\n\n\n            element.style.setProperty(\n                \"--node-scale\",\n                scale.toFixed(4)\n            );\n\n        }\n\n\n        \/* =================================================\n           UPDATE\n           ================================================= *\/\n\n        function update() {\n\n\n            ticking = false;\n\n\n            const rect =\n                section.getBoundingClientRect();\n\n\n            const viewport =\n                window.innerHeight ||\n                document.documentElement.clientHeight;\n\n\n            \/*\n               SCROLL JOURNEY\n\n               Start:\n               IT Solutions begins entering near the bottom.\n\n               End:\n               roughly when the ecosystem is comfortably\n               inside the viewport.\n\n               This is what makes it feel attached to scrolling\n               instead of being an automatic animation.\n            *\/\n\n\n            const startPoint =\n                viewport * .96;\n\n\n            const journey =\n                Math.min(\n                    Math.max(\n                        viewport * 1.25,\n                        780\n                    ),\n                    1200\n                );\n\n\n            const travelled =\n                startPoint -\n                rect.top;\n\n\n            const master =\n                clamp(\n                    travelled \/\n                    journey,\n                    0,\n                    1\n                );\n\n\n            \/* =================================================\n               INDIVIDUAL SCROLL RANGES\n               ================================================= *\/\n\n\n            \/*\n               Intro begins immediately.\n            *\/\n\n            const introProgress =\n                smooth(\n                    range(\n                        master,\n                        0,\n                        .25\n                    )\n                );\n\n\n            \/*\n               Core starts while intro is still moving.\n            *\/\n\n            const coreProgress =\n                smooth(\n                    range(\n                        master,\n                        .08,\n                        .35\n                    )\n                );\n\n\n            \/*\n               Each top node is slightly offset.\n\n               This gives the ecosystem some life without\n               turning it into a timed slideshow.\n            *\/\n\n            const usersProgress =\n                range(\n                    master,\n                    .16,\n                    .43\n                );\n\n\n            const cloudProgress =\n                range(\n                    master,\n                    .20,\n                    .47\n                );\n\n\n            const serversProgress =\n                range(\n                    master,\n                    .24,\n                    .51\n                );\n\n\n            \/*\n               Bottom row follows.\n            *\/\n\n            const internetProgress =\n                range(\n                    master,\n                    .32,\n                    .59\n                );\n\n\n            const networkProgress =\n                range(\n                    master,\n                    .36,\n                    .63\n                );\n\n\n            const backupProgress =\n                range(\n                    master,\n                    .40,\n                    .67\n                );\n\n\n            \/*\n               Connections become visible as the nodes settle.\n            *\/\n\n            const connectionProgress =\n                smooth(\n                    range(\n                        master,\n                        .28,\n                        .65\n                    )\n                );\n\n\n            \/*\n               CTA finishes the section.\n            *\/\n\n            const actionProgress =\n                smooth(\n                    range(\n                        master,\n                        .56,\n                        .82\n                    )\n                );\n\n\n            \/* =================================================\n               INTRO\n               ================================================= *\/\n\n            if (intro) {\n\n\n                intro.style.setProperty(\n                    \"--intro-opacity\",\n                    introProgress.toFixed(3)\n                );\n\n\n                intro.style.setProperty(\n                    \"--intro-y\",\n                    (\n                        (\n                            1 -\n                            introProgress\n                        ) *\n                        85\n                    ).toFixed(2) +\n                    \"px\"\n                );\n\n            }\n\n\n            \/* =================================================\n               CORE\n               ================================================= *\/\n\n            if (core) {\n\n\n                core.style.setProperty(\n                    \"--core-opacity\",\n                    coreProgress.toFixed(3)\n                );\n\n\n                core.style.setProperty(\n                    \"--core-y\",\n                    (\n                        (\n                            1 -\n                            coreProgress\n                        ) *\n                        85\n                    ).toFixed(2) +\n                    \"px\"\n                );\n\n\n                core.style.setProperty(\n                    \"--core-scale\",\n                    (\n                        .87 +\n                        coreProgress *\n                        .13\n                    ).toFixed(4)\n                );\n\n            }\n\n\n            \/* =================================================\n               TOP ROW\n               ================================================= *\/\n\n            setNode(\n                users,\n                usersProgress,\n                105\n            );\n\n\n            setNode(\n                cloud,\n                cloudProgress,\n                105\n            );\n\n\n            setNode(\n                servers,\n                serversProgress,\n                105\n            );\n\n\n            \/* =================================================\n               BOTTOM ROW\n               ================================================= *\/\n\n            setNode(\n                internet,\n                internetProgress,\n                110\n            );\n\n\n            setNode(\n                networkNode,\n                networkProgress,\n                110\n            );\n\n\n            setNode(\n                backup,\n                backupProgress,\n                110\n            );\n\n\n            \/* =================================================\n               NETWORK\n               ================================================= *\/\n\n            if (network) {\n\n                network.style.setProperty(\n                    \"--network-opacity\",\n                    connectionProgress.toFixed(3)\n                );\n\n            }\n\n\n            \/* =================================================\n               CTA\n               ================================================= *\/\n\n            if (action) {\n\n\n                action.style.setProperty(\n                    \"--action-opacity\",\n                    actionProgress.toFixed(3)\n                );\n\n\n                action.style.setProperty(\n                    \"--action-y\",\n                    (\n                        (\n                            1 -\n                            actionProgress\n                        ) *\n                        55\n                    ).toFixed(2) +\n                    \"px\"\n                );\n\n            }\n\n        }\n\n\n        \/* =================================================\n           RAF\n           ================================================= *\/\n\n        function requestUpdate() {\n\n            if (ticking) {\n                return;\n            }\n\n\n            ticking = true;\n\n\n            window.requestAnimationFrame(\n                update\n            );\n\n        }\n\n\n        \/* =================================================\n           EVENTS\n           ================================================= *\/\n\n        window.addEventListener(\n            \"scroll\",\n            requestUpdate,\n            {\n                passive: true\n            }\n        );\n\n\n        window.addEventListener(\n            \"resize\",\n            requestUpdate,\n            {\n                passive: true\n            }\n        );\n\n\n        \/*\n           Elementor sometimes alters page height shortly\n           after initial rendering.\n\n           Calculate immediately, then once again after layout.\n        *\/\n\n        update();\n\n\n        window.setTimeout(\n            update,\n            150\n        );\n\n\n        window.setTimeout(\n            update,\n            600\n        );\n\n    }\n\n\n    \/* =====================================================\n       INITIALISE\n       ===================================================== *\/\n\n    if (\n        document.readyState ===\n        \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initIdealCSScrollFlow\n        );\n\n    } else {\n\n        initIdealCSScrollFlow();\n\n    }\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b6de82f elementor-widget elementor-widget-html\" data-id=\"b6de82f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- IdealCS Digital & Development \u2014 compact windowed showcase. Paste this entire block into one HTML widget. -->\n<section class=\"ics-windowed\" id=\"idealcs-digital\" aria-labelledby=\"ics-window-title\">\n<style>\n.ics-windowed{--bg:#071C30;--blue:#20a8f5;--yellow:#e4b84a;--muted:#adc6d9;position:relative;isolation:isolate;background:radial-gradient(ellipse at 65% 40%,#0b314d 0,transparent 65%),#071C30;color:white;font-family:Arial,Helvetica,sans-serif;scroll-margin-top:100px;overflow:hidden}\n.ics-windowed *{box-sizing:border-box}.ics-windowed a{color:inherit}.ics-windowed button{font:inherit;box-shadow:none}.ics-windowed a:focus-visible,.ics-windowed button:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}\n.ics-windowed__inner{max-width:1400px;width:calc(100% - 80px);margin:auto;padding:54px 0 36px}\n.ics-windowed__scene{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);align-items:center;gap:30px;min-height:380px}\n.ics-windowed__intro{position:relative;z-index:2}.ics-windowed h2{margin:0 0 14px;color:#fff;font-size:clamp(32px,3.5vw,52px);font-weight:800;line-height:1.02;letter-spacing:-1.6px;text-transform:uppercase}.ics-windowed h2 em{font-style:normal;color:var(--blue)}.ics-windowed h2 b{color:var(--yellow)}\n.ics-windowed__tagline{margin:0 0 14px;color:var(--yellow);font-size:clamp(17px,1.6vw,23px);line-height:1.3;font-weight:600}.ics-windowed__intro>p:not(.ics-windowed__tagline){max-width:360px;margin:0 0 20px;font-size:14px;line-height:1.65;color:var(--muted)}\n.ics-windowed__intro-link{display:inline-flex;align-items:center;gap:16px;padding:10px 16px;border:1px solid rgba(228,184,74,.7);border-radius:4px;text-decoration:none;font-size:11px;letter-spacing:.5px;text-transform:uppercase}\n.ics-windowed__window{position:relative;min-width:0;border:1px solid rgba(32,168,245,.4);border-radius:12px;background:#041321;box-shadow:0 22px 65px #0006,0 0 40px #20a8f512;overflow:hidden}\n.ics-windowed__bar{height:28px;display:flex;align-items:center;gap:5px;padding:0 12px;border-bottom:1px solid #ffffff12;color:#adc6d9;background:#061625;font-size:10px}.ics-windowed__bar i{height:5px;width:5px;border-radius:50%;background:#34516a}.ics-windowed__bar i:nth-child(2){background:var(--blue)}.ics-windowed__bar i:nth-child(3){background:var(--yellow)}.ics-windowed__bar span{margin-left:auto}\n.ics-windowed__screen{position:relative;aspect-ratio:1672\/941}.ics-windowed__panel{position:absolute;inset:0;margin:0}.ics-windowed__panel[hidden]{display:none!important}.ics-windowed__panel img{display:block;width:100%;height:100%;object-fit:contain}.ics-windowed__panel:focus-visible{outline:2px solid var(--yellow);outline-offset:-3px}\n.ics-windowed__fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:32px;border-top:1px solid #20a8f54d}\n.ics-windowed__field{min-width:0;padding:0 18px;border-right:1px solid #ffffff0b}.ics-windowed__field:first-child{padding-left:0}.ics-windowed__field:last-child{padding-right:0;border:0}\n.ics-windowed__tab{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;min-height:83px;padding:14px 0 12px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent!important;color:#fff;text-align:left;cursor:pointer;text-transform:uppercase;transition:color .2s,border-color .2s}.ics-windowed__tab:hover{color:var(--blue)}.ics-windowed__tab[aria-selected=\"true\"]{color:var(--blue);border-bottom-color:var(--blue)}.ics-windowed__number{display:grid;place-items:center;width:23px;height:23px;border:1px solid #adc6d980;border-radius:50%;font-size:10px;font-weight:400}.ics-windowed__tab[aria-selected=\"true\"] .ics-windowed__number{border-color:var(--blue);box-shadow:0 0 12px #20a8f533}.ics-windowed__name{font-size:14px;line-height:1.2;font-weight:700}\n.ics-windowed__field p{min-height:58px;margin:16px 0 8px;font-size:13px;line-height:1.5;color:var(--muted)}.ics-windowed__insight{display:inline-flex;align-items:center;min-height:34px;gap:10px;color:var(--yellow)!important;text-decoration:none;text-transform:uppercase;letter-spacing:.6px;font-size:10px;font-weight:700}.ics-windowed__insight:hover{text-decoration:underline}\n.ics-windowed__mobile-info{display:none}.ics-windowed__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n@media(max-width:1050px){.ics-windowed__inner{width:calc(100% - 48px)}.ics-windowed__scene{gap:22px;min-height:320px;grid-template-columns:.4fr .6fr}.ics-windowed h2{font-size:34px}.ics-windowed__field{padding-inline:10px}.ics-windowed__name{font-size:12px}}\n@media(max-width:760px){.ics-windowed__inner{width:calc(100% - 32px);padding:34px 0 25px}.ics-windowed__scene{grid-template-columns:1fr;gap:22px;min-height:0}.ics-windowed__intro{text-align:center}.ics-windowed h2{font-size:clamp(28px,7.6vw,40px);letter-spacing:-1px;margin-bottom:10px}.ics-windowed h2 br{display:none}.ics-windowed__tagline{font-size:17px;margin-bottom:9px}.ics-windowed__intro>p:not(.ics-windowed__tagline){max-width:480px;margin:0 auto;font-size:13px;line-height:1.5}.ics-windowed__intro-link{display:none}.ics-windowed__window{width:100%;max-width:620px;margin:auto;border-radius:8px}.ics-windowed__bar{height:22px}.ics-windowed__fields{margin-top:18px;grid-template-columns:repeat(6,minmax(0,1fr));gap:0}.ics-windowed__field{grid-column:span 2;padding:0 5px!important;border:0}.ics-windowed__field:nth-child(4){grid-column:2\/span 2}.ics-windowed__field:nth-child(5){grid-column:4\/span 2}.ics-windowed__tab{align-items:center;text-align:center;justify-content:center;min-height:49px;padding:9px 2px;gap:0}.ics-windowed__number{display:none}.ics-windowed__name{font-size:11px}.ics-windowed__field p,.ics-windowed__field>.ics-windowed__insight{display:none}.ics-windowed__mobile-info{display:block;text-align:center;padding-top:12px;min-height:89px}.ics-windowed__mobile-info p{max-width:410px;min-height:38px;margin:0 auto 4px;color:var(--muted);font-size:13px;line-height:1.5}}\n@media(min-width:761px){.ics-windowed__inner{padding-top:38px;padding-bottom:24px}.ics-windowed__screen{height:clamp(250px,27vw,390px);aspect-ratio:auto}.ics-windowed__scene{min-height:0}.ics-windowed__fields{margin-top:24px}}\n@media(prefers-reduced-motion:reduce){.ics-windowed *{animation:none!important;transition:none!important}}\n<\/style>\n<div class=\"ics-windowed__inner\">\n <div class=\"ics-windowed__scene\">\n  <header class=\"ics-windowed__intro\">\n   <h2 id=\"ics-window-title\">Digital <em>&amp;<\/em><br> development<b>.<\/b><\/h2>\n   <p class=\"ics-windowed__tagline\">From an idea to something real.<\/p>\n   <p>Websites, software, automation and AI, designed around how your business works \u2014 from what your customers see to what happens behind the scenes.<\/p>\n   <a class=\"ics-windowed__intro-link\" href=\"\/insights\/\">Explore our insights <span aria-hidden=\"true\">\u2192<\/span><\/a>\n  <\/header>\n  <div class=\"ics-windowed__window\">\n   <div class=\"ics-windowed__bar\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><span>IdealCS \/ <b data-window-label>Websites<\/b><\/span><\/div>\n   <div class=\"ics-windowed__screen\">\n   <div class=\"ics-windowed__panel\" id=\"ics-window-panel-0\" role=\"tabpanel\" aria-labelledby=\"ics-window-tab-0\" tabindex=\"0\"><img fetchpriority=\"high\" src=\"https:\/\/idealcs.co.za\/wp-content\/uploads\/2026\/10\/Futuristic-IdealCS-Web-Design-Showcase.png\" width=\"1672\" height=\"941\" alt=\"Websites \u2014 illustrative IdealCS concept\" loading=\"eager\" decoding=\"async\"><\/div>\n<div class=\"ics-windowed__panel\" id=\"ics-window-panel-1\" role=\"tabpanel\" aria-labelledby=\"ics-window-tab-1\" tabindex=\"0\" hidden><img loading=\"lazy\" src=\"https:\/\/idealcs.co.za\/wp-content\/uploads\/2026\/10\/Futuristic-IT-Dashboard-and-Scanner-Apps.png\" width=\"1672\" height=\"941\" alt=\"Software \u2014 illustrative IdealCS concept\" loading=\"lazy\" decoding=\"async\"><\/div>\n<div class=\"ics-windowed__panel\" id=\"ics-window-panel-2\" role=\"tabpanel\" aria-labelledby=\"ics-window-tab-2\" tabindex=\"0\" hidden><img loading=\"lazy\" src=\"https:\/\/idealcs.co.za\/wp-content\/uploads\/2026\/10\/AI-Automation-Command-Centre\u4eba\u9ad4\u85dd\u8853.png\" width=\"1672\" height=\"941\" alt=\"AI &amp; Automation \u2014 illustrative IdealCS concept\" loading=\"lazy\" decoding=\"async\"><\/div>\n<div class=\"ics-windowed__panel\" id=\"ics-window-panel-3\" role=\"tabpanel\" aria-labelledby=\"ics-window-tab-3\" tabindex=\"0\" hidden><img loading=\"lazy\" src=\"https:\/\/idealcs.co.za\/wp-content\/uploads\/2026\/10\/Neon-AI-Infrastructure-Command-Centre.png\" width=\"1672\" height=\"941\" alt=\"AI Infrastructure \u2014 illustrative IdealCS concept\" loading=\"lazy\" decoding=\"async\"><\/div>\n<div class=\"ics-windowed__panel\" id=\"ics-window-panel-4\" role=\"tabpanel\" aria-labelledby=\"ics-window-tab-4\" tabindex=\"0\" hidden><img loading=\"lazy\" src=\"https:\/\/idealcs.co.za\/wp-content\/uploads\/2026\/10\/Neon-SEO-Analytics-Command-Centre.png\" width=\"1672\" height=\"941\" alt=\"Search &amp; SEO \u2014 illustrative IdealCS concept\" loading=\"lazy\" decoding=\"async\"><\/div>\n   <\/div>\n  <\/div>\n <\/div>\n <div class=\"ics-windowed__fields\" role=\"tablist\" aria-label=\"Digital and development services\">\n <div class=\"ics-windowed__field\" role=\"presentation\"><button type=\"button\" class=\"ics-windowed__tab\" id=\"ics-window-tab-0\" role=\"tab\" aria-selected=\"true\" aria-controls=\"ics-window-panel-0\" tabindex=\"0\"><span class=\"ics-windowed__number\" aria-hidden=\"true\">01<\/span><span class=\"ics-windowed__name\">Websites<\/span><\/button><p>High-performance websites that look credible and drive real results.<\/p><a class=\"ics-windowed__insight\" href=\"\/insights\/website-design\/\" aria-label=\"Websites insights\">Read insights <span aria-hidden=\"true\">\u2192<\/span><\/a><\/div>\n<div class=\"ics-windowed__field\" role=\"presentation\"><button type=\"button\" class=\"ics-windowed__tab\" id=\"ics-window-tab-1\" role=\"tab\" aria-selected=\"false\" aria-controls=\"ics-window-panel-1\" tabindex=\"-1\"><span class=\"ics-windowed__number\" aria-hidden=\"true\">02<\/span><span class=\"ics-windowed__name\">Software<\/span><\/button><p>Custom software built around how your business actually works.<\/p><a class=\"ics-windowed__insight\" href=\"\/insights\/custom-software\/\" aria-label=\"Software insights\">Read insights <span aria-hidden=\"true\">\u2192<\/span><\/a><\/div>\n<div class=\"ics-windowed__field\" role=\"presentation\"><button type=\"button\" class=\"ics-windowed__tab\" id=\"ics-window-tab-2\" role=\"tab\" aria-selected=\"false\" aria-controls=\"ics-window-panel-2\" tabindex=\"-1\"><span class=\"ics-windowed__number\" aria-hidden=\"true\">03<\/span><span class=\"ics-windowed__name\">AI &amp; Automation<\/span><\/button><p>Automate repetitive work and unlock new possibilities with AI.<\/p><a class=\"ics-windowed__insight\" href=\"\/insights\/ai-automation\/\" aria-label=\"AI &amp; Automation insights\">Read insights <span aria-hidden=\"true\">\u2192<\/span><\/a><\/div>\n<div class=\"ics-windowed__field\" role=\"presentation\"><button type=\"button\" class=\"ics-windowed__tab\" id=\"ics-window-tab-3\" role=\"tab\" aria-selected=\"false\" aria-controls=\"ics-window-panel-3\" tabindex=\"-1\"><span class=\"ics-windowed__number\" aria-hidden=\"true\">04<\/span><span class=\"ics-windowed__name\">AI Infrastructure<\/span><\/button><p>High-performance AI servers and secure infrastructure for serious workloads.<\/p><a class=\"ics-windowed__insight\" href=\"\/insights\/ai-infrastructure\/\" aria-label=\"AI Infrastructure insights\">Read insights <span aria-hidden=\"true\">\u2192<\/span><\/a><\/div>\n<div class=\"ics-windowed__field\" role=\"presentation\"><button type=\"button\" class=\"ics-windowed__tab\" id=\"ics-window-tab-4\" role=\"tab\" aria-selected=\"false\" aria-controls=\"ics-window-panel-4\" tabindex=\"-1\"><span class=\"ics-windowed__number\" aria-hidden=\"true\">05<\/span><span class=\"ics-windowed__name\">Search &amp; SEO<\/span><\/button><p>Get found by the right people with modern SEO and AI search visibility.<\/p><a class=\"ics-windowed__insight\" href=\"\/insights\/seo-search-visibility\/\" aria-label=\"Search &amp; SEO insights\">Read insights <span aria-hidden=\"true\">\u2192<\/span><\/a><\/div>\n <\/div>\n <div class=\"ics-windowed__mobile-info\"><p data-description>High-performance websites that look credible and drive real results.<\/p><a class=\"ics-windowed__insight\" data-insight href=\"\/insights\/website-design\/\">Read insights <span aria-hidden=\"true\">\u2192<\/span><\/a><\/div>\n <span class=\"ics-windowed__sr\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/span>\n<\/div>\n<script>\n(()=>{const script=document.currentScript;const root=script&&script.closest('.ics-windowed');if(!root||root.dataset.ready)return;root.dataset.ready='true';\nconst tabs=[...root.querySelectorAll('[role=\"tab\"]')],panels=[...root.querySelectorAll('[role=\"tabpanel\"]')],fields=[...root.querySelectorAll('.ics-windowed__field')],reduced=matchMedia('(prefers-reduced-motion:reduce)');let active=0,animation;\nfunction select(i,focus=false){i=(i+tabs.length)%tabs.length;if(animation)animation.cancel();active=i;tabs.forEach((t,k)=>{t.setAttribute('aria-selected',String(k===i));t.tabIndex=k===i?0:-1;panels[k].hidden=k!==i});root.querySelector('[data-window-label]').textContent=tabs[i].querySelector('.ics-windowed__name').textContent;root.querySelector('[data-description]').textContent=fields[i].querySelector('p').textContent;root.querySelector('[data-insight]').href=fields[i].querySelector('a').getAttribute('href');root.querySelector('[role=\"status\"]').textContent=tabs[i].textContent.trim()+' selected';if(!reduced.matches&&panels[i].animate)animation=panels[i].animate([{opacity:0,transform:'scale(.985)'},{opacity:1,transform:'scale(1)'}],{duration:300,easing:'ease-out'});if(focus)tabs[i].focus({preventScroll:true})}\ntabs.forEach((t,i)=>{t.addEventListener('click',()=>select(i));t.addEventListener('keydown',e=>{const keys={ArrowRight:i+1,ArrowLeft:i-1,Home:0,End:4};if(e.key in keys){e.preventDefault();select(keys[e.key],true)}})});\n})();\n<\/script>\n<\/section>\n\n\n<!-- Homepage integration fixes: scoped to WordPress Home (page 64). -->\n<style>\nbody.page-id-64 .elementor-element-58ddfa7 { padding:0; gap:0; background:#071C30; }\nbody.page-id-64 .elementor-element-58ddfa7 > .e-con-inner { width:100%; max-width:100%; padding:0; gap:0; }\nbody.page-id-64 .idealcs-header,\nbody.page-id-64 .ics-hero,\nbody.page-id-64 .ics-managed { width:100%; margin-left:0; margin-right:0; }\nbody.page-id-64 .elementor-element-f34c9c6 { display:none; }\nbody.page-id-64 #it-solutions { scroll-margin-top:110px; }\nbody.page-id-64 .elementor-element-38d86071 h2 { white-space:normal!important; overflow-wrap:normal; }\n@media(min-width:981px) and (max-width:1150px) {\n  body.page-id-64 .idealcs-header-inner { padding-inline:24px; gap:20px; }\n  body.page-id-64 .idealcs-logo img { max-width:175px; }\n  body.page-id-64 .idealcs-nav { gap:16px; }\n  body.page-id-64 .idealcs-nav-link { font-size:13px; }\n  body.page-id-64 .idealcs-header-cta { padding-inline:16px; }\n}\n@media(max-width:767px) {\n  body.page-id-64 .elementor-element-38d86071 h2 { font-size:clamp(27px,7.2vw,48px)!important; letter-spacing:-1px!important; line-height:1.12!important; }\n}\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3173e9b elementor-widget elementor-widget-html\" data-id=\"3173e9b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* =========================================================\n   IDEALCS \u2014 ABOUT \/ OUR APPROACH V6\n   ========================================================= *\/\n\n#about.ics-about {\n    --ics-navy: #071C30;\n    --ics-blue: #168BD2;\n    --ics-blue-bright: #20A8F5;\n    --ics-yellow: #E4B84A;\n    --ics-light: #F7F9FB;\n    --ics-body: #526A80;\n    --ics-muted: #718496;\n\n    position: relative;\n    width: 100%;\n    min-height: 790px;\n    overflow: hidden;\n\n    background: var(--ics-light);\n    color: var(--ics-navy);\n\n    font-family: Arial, Helvetica, sans-serif;\n}\n\n\n\/* =========================================================\n   FULL-HEIGHT IMAGE\n   ========================================================= *\/\n\n.ics-about__visual {\n    position: absolute;\n    z-index: 1;\n\n    top: 0;\n    bottom: 0;\n    left: 0;\n\n    width: 66%;\n    height: 100%;\n\n    background-image:\n        url('https:\/\/idealcs.co.za\/wp-content\/uploads\/2026\/10\/Focused-IT-Technician-in-a-Modern-Workspace.png');\n\n    background-size: cover;\n    background-position: 36% center;\n    background-repeat: no-repeat;\n}\n\n\n\/* Image fades naturally into the content *\/\n.ics-about__visual::after {\n    content: \"\";\n\n    position: absolute;\n    inset: 0;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(247,249,251,0) 0%,\n            rgba(247,249,251,0) 40%,\n            rgba(247,249,251,.06) 50%,\n            rgba(247,249,251,.30) 61%,\n            rgba(247,249,251,.70) 74%,\n            rgba(247,249,251,.94) 87%,\n            #F7F9FB 100%\n        );\n}\n\n\n\/* Soft lower blend *\/\n.ics-about__visual::before {\n    content: \"\";\n\n    position: absolute;\n    z-index: 2;\n\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n    height: 100px;\n\n    background:\n        linear-gradient(\n            180deg,\n            rgba(247,249,251,0),\n            rgba(247,249,251,.22)\n        );\n}\n\n\n\/* =========================================================\n   LAYOUT\n   ========================================================= *\/\n\n.ics-about__inner {\n    position: relative;\n    z-index: 5;\n\n    width: min(1380px, calc(100% - 80px));\n    min-height: 790px;\n\n    margin: 0 auto;\n\n    padding: 82px 0 90px;\n\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n}\n\n\n.ics-about__content {\n    width: min(700px, 51%);\n}\n\n\n\/* =========================================================\n   TITLE\n   ========================================================= *\/\n\n.ics-about__title {\n    margin: 0;\n\n    font-size: clamp(40px, 3.8vw, 58px);\n    line-height: .98;\n\n    font-weight: 900;\n    letter-spacing: -.045em;\n\n    color: var(--ics-navy);\n}\n\n\n.ics-about__title-main {\n    display: block;\n\n    text-transform: uppercase;\n}\n\n\n.ics-about__title-blue {\n    display: block;\n\n    margin-top: 12px;\n\n    font-size: .87em;\n    line-height: 1.08;\n\n    color: var(--ics-blue);\n}\n\n\n\/* =========================================================\n   INTRO COPY\n   ========================================================= *\/\n\n.ics-about__lead {\n    max-width: 650px;\n\n    margin: 34px 0 0;\n\n    font-size: 18px;\n    line-height: 1.55;\n\n    font-weight: 700;\n\n    color: var(--ics-navy);\n}\n\n\n.ics-about__lead-accent {\n    color: #A87900;\n}\n\n\n.ics-about__body {\n    max-width: 625px;\n\n    margin: 19px 0 0;\n\n    font-size: 17px;\n    line-height: 1.75;\n\n    color: var(--ics-body);\n}\n\n\n\/* =========================================================\n   DIVIDER\n   ========================================================= *\/\n\n.ics-about__divider {\n    position: relative;\n\n    width: 100%;\n    height: 1px;\n\n    margin: 48px 0 35px;\n\n    background: rgba(7,28,48,.12);\n}\n\n\n.ics-about__divider::before {\n    content: \"\";\n\n    position: absolute;\n\n    top: -1px;\n    left: 0;\n\n    width: 35%;\n    height: 2px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--ics-blue),\n            var(--ics-blue-bright) 60%,\n            var(--ics-yellow)\n        );\n}\n\n\n\/* =========================================================\n   FOUR-PART APPROACH\n   ========================================================= *\/\n\n.ics-about__steps {\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n\n    gap: 34px;\n}\n\n\n.ics-about__step {\n    position: relative;\n\n    min-width: 0;\n}\n\n\n\/* =========================================================\n   ICONS\n   ========================================================= *\/\n\n.ics-about__icon {\n    position: relative;\n\n    width: 38px;\n    height: 43px;\n\n    display: flex;\n    align-items: flex-start;\n    justify-content: flex-start;\n\n    margin-bottom: 18px;\n\n    color: var(--ics-blue);\n}\n\n\n.ics-about__icon svg {\n    width: 28px;\n    height: 28px;\n\n    fill: none;\n    stroke: currentColor;\n\n    stroke-width: 1.65;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\n\/* Yellow detail below each icon *\/\n.ics-about__icon::after {\n    content: \"\";\n\n    position: absolute;\n\n    left: 0;\n    bottom: 0;\n\n    width: 24px;\n    height: 2px;\n\n    background: var(--ics-yellow);\n}\n\n\n\/* =========================================================\n   STEP COPY\n   ========================================================= *\/\n\n.ics-about__step h3 {\n    margin: 0 0 10px;\n\n    font-size: 19px;\n    line-height: 1.2;\n\n    font-weight: 800;\n\n    color: var(--ics-navy);\n}\n\n\n.ics-about__step p {\n    margin: 0;\n\n    font-size: 13px;\n    line-height: 1.62;\n\n    color: var(--ics-muted);\n}\n\n\n\/* =========================================================\n   REVEAL ANIMATION\n   Content is ONLY hidden once JS confirms it is running.\n   ========================================================= *\/\n\n.ics-about.ics-about--js .ics-about__intro,\n.ics-about.ics-about--js .ics-about__step {\n    opacity: 0;\n\n    transform: translateY(20px);\n}\n\n\n.ics-about.ics-about--visible .ics-about__intro {\n    animation:\n        icsAboutReveal .7s ease forwards;\n}\n\n\n.ics-about.ics-about--visible\n.ics-about__step:nth-child(1) {\n    animation:\n        icsAboutReveal .55s .18s ease forwards;\n}\n\n\n.ics-about.ics-about--visible\n.ics-about__step:nth-child(2) {\n    animation:\n        icsAboutReveal .55s .28s ease forwards;\n}\n\n\n.ics-about.ics-about--visible\n.ics-about__step:nth-child(3) {\n    animation:\n        icsAboutReveal .55s .38s ease forwards;\n}\n\n\n.ics-about.ics-about--visible\n.ics-about__step:nth-child(4) {\n    animation:\n        icsAboutReveal .55s .48s ease forwards;\n}\n\n\n@keyframes icsAboutReveal {\n\n    from {\n        opacity: 0;\n        transform: translateY(20px);\n    }\n\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media (max-width: 1050px) {\n\n    #about.ics-about {\n        min-height: 0;\n    }\n\n\n    .ics-about__visual {\n        position: relative;\n\n        width: 100%;\n        height: 470px;\n\n        background-position: 35% center;\n    }\n\n\n    .ics-about__visual::after {\n        background:\n            linear-gradient(\n                180deg,\n                rgba(247,249,251,0) 38%,\n                rgba(247,249,251,.08) 57%,\n                rgba(247,249,251,.58) 79%,\n                #F7F9FB 100%\n            );\n    }\n\n\n    .ics-about__visual::before {\n        display: none;\n    }\n\n\n    .ics-about__inner {\n        width: min(780px, calc(100% - 48px));\n        min-height: 0;\n\n        display: block;\n\n        margin-top: -25px;\n\n        padding: 0 0 80px;\n    }\n\n\n    .ics-about__content {\n        width: 100%;\n    }\n\n\n    .ics-about__steps {\n        grid-template-columns:\n            repeat(2, minmax(0, 1fr));\n\n        gap: 42px 50px;\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 600px) {\n\n    .ics-about__visual {\n        height: 355px;\n\n        background-position: 32% center;\n    }\n\n\n    .ics-about__inner {\n        width: min(100% - 34px, 520px);\n\n        margin-top: -10px;\n\n        padding-bottom: 65px;\n    }\n\n\n    .ics-about__title {\n        font-size:\n            clamp(35px, 10.5vw, 47px);\n    }\n\n\n    .ics-about__title-blue {\n        margin-top: 10px;\n\n        font-size: .83em;\n    }\n\n\n    .ics-about__lead {\n        margin-top: 27px;\n\n        font-size: 16px;\n    }\n\n\n    .ics-about__body {\n        font-size: 15px;\n        line-height: 1.7;\n    }\n\n\n    .ics-about__divider {\n        margin: 39px 0 34px;\n    }\n\n\n    .ics-about__steps {\n        grid-template-columns: 1fr;\n\n        gap: 34px;\n    }\n\n\n    .ics-about__step {\n        display: grid;\n\n        grid-template-columns: 45px 1fr;\n        column-gap: 15px;\n    }\n\n\n    .ics-about__icon {\n        grid-row: 1 \/ span 2;\n\n        width: 38px;\n        height: 42px;\n\n        margin: 0;\n    }\n\n\n    .ics-about__icon svg {\n        width: 26px;\n        height: 26px;\n    }\n\n\n    .ics-about__step h3 {\n        align-self: end;\n\n        margin-bottom: 7px;\n    }\n\n\n    .ics-about__step p {\n        grid-column: 2;\n    }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n   ========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .ics-about.ics-about--js\n    .ics-about__intro,\n\n    .ics-about.ics-about--js\n    .ics-about__step {\n\n        opacity: 1;\n        transform: none;\n\n        animation: none;\n    }\n\n}\n<\/style>\n\n\n<section id=\"about\" class=\"ics-about\">\n\n\n    <!-- =====================================================\n         FULL-HEIGHT IMAGE\n         ===================================================== -->\n\n    <div\n        class=\"ics-about__visual\"\n        role=\"img\"\n        aria-label=\"IT technician working in a modern technology environment\"\n    ><\/div>\n\n\n    <!-- =====================================================\n         CONTENT\n         ===================================================== -->\n\n    <div class=\"ics-about__inner\">\n\n        <div class=\"ics-about__content\">\n\n\n            <!-- INTRO -->\n\n            <div class=\"ics-about__intro\">\n\n                <h2 class=\"ics-about__title\">\n\n                    <span class=\"ics-about__title-main\">\n                        More Than Support.\n                    <\/span>\n\n                    <span class=\"ics-about__title-blue\">\n                        The IT team that<br>\n                        moves with you.\n                    <\/span>\n\n                <\/h2>\n\n\n                <p class=\"ics-about__lead\">\n\n                    <span class=\"ics-about__lead-accent\">\n                        Technology changes. Businesses change.\n                    <\/span>\n\n                    We stay with you through both.\n\n                <\/p>\n\n\n                <p class=\"ics-about__body\">\n                    IdealCS works alongside your business to\n                    understand what you actually need \u2014 then helps\n                    build, manage and improve the technology behind it.\n                <\/p>\n\n            <\/div>\n\n\n            <div class=\"ics-about__divider\"><\/div>\n\n\n            <!-- =================================================\n                 APPROACH\n                 ================================================= -->\n\n            <div class=\"ics-about__steps\">\n\n\n                <!-- WE LISTEN -->\n\n                <article class=\"ics-about__step\">\n\n                    <div\n                        class=\"ics-about__icon\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <!-- Conversation \/ listening -->\n                        <svg viewBox=\"0 0 24 24\">\n\n                            <path\n                                d=\"M20.5 11.5a8 8 0 0 1-8 8\n                                8.1 8.1 0 0 1-3.7-.9L4 20l1.5-4.5\n                                A8 8 0 1 1 20.5 11.5z\"\n                            ><\/path>\n\n                            <path d=\"M8.5 9h7\"><\/path>\n\n                            <path d=\"M8.5 12h5\"><\/path>\n\n                        <\/svg>\n\n                    <\/div>\n\n\n                    <h3>\n                        We Listen.\n                    <\/h3>\n\n\n                    <p>\n                        We learn how your business works,\n                        what your team needs and where\n                        technology gets in the way.\n                    <\/p>\n\n                <\/article>\n\n\n                <!-- WE PLAN -->\n\n                <article class=\"ics-about__step\">\n\n                    <div\n                        class=\"ics-about__icon\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <!-- Clipboard \/ plan -->\n                        <svg viewBox=\"0 0 24 24\">\n\n                            <rect\n                                x=\"5\"\n                                y=\"4\"\n                                width=\"14\"\n                                height=\"17\"\n                                rx=\"2\"\n                            ><\/rect>\n\n                            <path\n                                d=\"M9 5V3h6v2\"\n                            ><\/path>\n\n                            <path\n                                d=\"m8.5 12 2 2 5-5\"\n                            ><\/path>\n\n                            <path\n                                d=\"M8.5 17h7\"\n                            ><\/path>\n\n                        <\/svg>\n\n                    <\/div>\n\n\n                    <h3>\n                        We Plan.\n                    <\/h3>\n\n\n                    <p>\n                        We identify what should be fixed,\n                        improved or built and create a\n                        practical way forward.\n                    <\/p>\n\n                <\/article>\n\n\n                <!-- WE IMPLEMENT -->\n\n                <article class=\"ics-about__step\">\n\n                    <div\n                        class=\"ics-about__icon\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <!-- Deployment \/ settings -->\n                        <svg viewBox=\"0 0 24 24\">\n\n                            <circle\n                                cx=\"12\"\n                                cy=\"12\"\n                                r=\"3\"\n                            ><\/circle>\n\n                            <path\n                                d=\"M19 12a7 7 0 0 0-.1-1.2\n                                l2-1.5-2-3.4-2.4 1\n                                a7.5 7.5 0 0 0-2-1.2\n                                L14.2 3h-4.4l-.3 2.7\n                                a7.5 7.5 0 0 0-2 1.2\n                                l-2.4-1-2 3.4 2 1.5\n                                A7 7 0 0 0 5 12\n                                c0 .4 0 .8.1 1.2\n                                l-2 1.5 2 3.4 2.4-1\n                                a7.5 7.5 0 0 0 2 1.2\n                                l.3 2.7h4.4l.3-2.7\n                                a7.5 7.5 0 0 0 2-1.2\n                                l2.4 1 2-3.4-2-1.5\n                                c.1-.4.1-.8.1-1.2z\"\n                            ><\/path>\n\n                        <\/svg>\n\n                    <\/div>\n\n\n                    <h3>\n                        We Implement.\n                    <\/h3>\n\n\n                    <p>\n                        We put the right IT, infrastructure\n                        and digital solutions in place\n                        around your business.\n                    <\/p>\n\n                <\/article>\n\n\n                <!-- WE STAY -->\n\n                <article class=\"ics-about__step\">\n\n                    <div\n                        class=\"ics-about__icon\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <!-- Shield \/ ongoing support -->\n                        <svg viewBox=\"0 0 24 24\">\n\n                            <path\n                                d=\"M12 3 20 6v5\n                                c0 5.2-3.4 8.5-8 10\n                                -4.6-1.5-8-4.8-8-10V6l8-3z\"\n                            ><\/path>\n\n                            <path\n                                d=\"m8.5 12 2.2 2.2 4.8-5\"\n                            ><\/path>\n\n                        <\/svg>\n\n                    <\/div>\n\n\n                    <h3>\n                        We Stay.\n                    <\/h3>\n\n\n                    <p>\n                        We support and improve your\n                        technology as your business\n                        continues to change.\n                    <\/p>\n\n                <\/article>\n\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<script>\n(function () {\n\n    const section =\n        document.querySelector('#about.ics-about');\n\n    if (!section) {\n        return;\n    }\n\n\n    \/*\n     * We only apply the hidden animation state once\n     * JavaScript has successfully loaded.\n     *\n     * This means the content can never disappear if\n     * Elementor or another script fails.\n     *\/\n    section.classList.add('ics-about--js');\n\n\n    if (!('IntersectionObserver' in window)) {\n\n        section.classList.add(\n            'ics-about--visible'\n        );\n\n        return;\n    }\n\n\n    const observer =\n        new IntersectionObserver(\n\n            function (entries) {\n\n                entries.forEach(\n                    function (entry) {\n\n                        if (\n                            entry.isIntersecting\n                        ) {\n\n                            section.classList.add(\n                                'ics-about--visible'\n                            );\n\n                            observer.unobserve(\n                                section\n                            );\n\n                        }\n\n                    }\n                );\n\n            },\n\n            {\n                threshold: 0.12\n            }\n\n        );\n\n\n    observer.observe(section);\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>YOUR IDEAL IT. MANAGED. From the devices your team uses to the systems behind your business \u2014 we bring your technology together and keep it managed. LET&#8217;S CHAT \u2192 EXPLORE OUR SERVICES \u2193 IT Solutions. Technology that works together. From the devices your team works on to the cloud, connectivity, infrastructure and backups behind your business \u2014 IdealCS brings the pieces together into one technology environment, then keeps it managed, monitored and supported. Users &amp; Devices Desktops \u2022 Laptops \u2022 Mobile \u2022 Endpoints Learn More \u2192 Cloud &amp; Services Microsoft 365 \u2022 Google Workspace \u2022 Cloud Learn More \u2192 Servers &amp; Infrastructure Physical \u2022 Virtual \u2022 Cloud Learn More \u2192 Managed &amp; Monitored Internet &amp; Connectivity Fibre \u2022 LTE \u2022 Failover \u2022 VPN Learn More \u2192 Network \u2022 Wi-Fi \u2022 CCTV Switching \u2022 Wireless \u2022 CCTV \u2022 Security Learn More \u2192 Backup &amp; Recovery Acronis \u2022 NAS \u2022 Servers \u2022 Cloud Learn More \u2192 Explore any solution above to understand the technology behind it, or talk to us about your complete IT environment. Let&#8217;s Talk About Your IT \u2192 Digital &amp; development. From an idea to something real. Websites, software, automation and AI, designed around how your business works \u2014 from what your customers see to what happens behind the scenes. Explore our insights \u2192 IdealCS \/ Websites 01Websites High-performance websites that look credible and drive real results. Read insights \u2192 02Software Custom software built around how your business actually works. Read insights \u2192 03AI &amp; Automation Automate repetitive work and unlock new possibilities with AI. Read insights \u2192 04AI Infrastructure High-performance AI servers and secure infrastructure for serious workloads. Read insights \u2192 05Search &amp; SEO Get found by the right people with modern SEO and AI search visibility. Read insights \u2192 High-performance websites that look credible and drive real results. Read insights \u2192 More Than Support. The IT team that moves with you. Technology changes. Businesses change. We stay with you through both. IdealCS works alongside your business to understand what you actually need \u2014 then helps build, manage and improve the technology behind it. We Listen. We learn how your business works, what your team needs and where technology gets in the way. We Plan. We identify what should be fixed, improved or built and create a practical way forward. We Implement. We put the right IT, infrastructure and digital solutions in place around your business. We Stay. We support and improve your technology as your business continues to change.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-64","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/idealcs.co.za\/wp-json\/wp\/v2\/pages\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/idealcs.co.za\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/idealcs.co.za\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/idealcs.co.za\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/idealcs.co.za\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":30,"href":"https:\/\/idealcs.co.za\/wp-json\/wp\/v2\/pages\/64\/revisions"}],"predecessor-version":[{"id":128,"href":"https:\/\/idealcs.co.za\/wp-json\/wp\/v2\/pages\/64\/revisions\/128"}],"wp:attachment":[{"href":"https:\/\/idealcs.co.za\/wp-json\/wp\/v2\/media?parent=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}