{"id":26607,"date":"2026-05-26T16:32:40","date_gmt":"2026-05-26T12:32:40","guid":{"rendered":"https:\/\/starleddisplay.com\/?page_id=26607"},"modified":"2026-05-27T09:41:09","modified_gmt":"2026-05-27T05:41:09","slug":"government-led-screen","status":"publish","type":"page","link":"https:\/\/starleddisplay.com\/ar\/government-led-screen\/","title":{"rendered":"Case Studies &#8211; Government and Public Sector"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"26607\" class=\"elementor elementor-26607\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6e86234 e-con-full e-flex e-con e-parent\" data-id=\"6e86234\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9c0a28e elementor-widget elementor-widget-html\" data-id=\"9c0a28e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n    <meta charset=\"utf-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\r\n    <title>Government and Public Sector Case Studies \u2014 StarLED Dubai<\/title>\r\n    <meta name=\"description\"\r\n        content=\"Real government and public sector LED installations from StarLED across the  Dubai \u2014 outdoor facades, indoor walls, fascia panels, and column wraps. See how each project performed after switch-on.\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link\r\n        href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap\"\r\n        rel=\"stylesheet\">\r\n\r\n    <style>\r\n        :root {\r\n            --black: #000;\r\n            --ink: #070709;\r\n            --ink-2: #0a0b0e;\r\n            --ink-3: #101117;\r\n            --blue: #6EC1EA;\r\n            --blue-deep: #2A8FB9;\r\n            --blue-glow: rgba(110, 193, 234, .35);\r\n            --blue-soft: rgba(110, 193, 234, .14);\r\n            --red: #DC0000;\r\n            --red-glow: rgba(220, 0, 0, .40);\r\n            --red-soft: rgba(220, 0, 0, .10);\r\n            --white: #fff;\r\n            --mute: rgba(255, 255, 255, .62);\r\n            --mute-2: rgba(255, 255, 255, .42);\r\n            --mute-3: rgba(255, 255, 255, .26);\r\n            --line: rgba(110, 193, 234, .16);\r\n            --line-2: rgba(255, 255, 255, .08);\r\n            --line-3: rgba(255, 255, 255, .04);\r\n            --pad-section: 120px;\r\n            --mono: 'JetBrains Mono', ui-monospace, monospace;\r\n        }\r\n\r\n        * {\r\n            box-sizing: border-box\r\n        }\r\n\r\n        html,\r\n        body {\r\n            margin: 0;\r\n            padding: 0;\r\n            background: var(--black);\r\n            color: var(--white);\r\n            font-family: 'Montserrat', system-ui, sans-serif;\r\n            -webkit-font-smoothing: antialiased\r\n        }\r\n\r\n        body {\r\n            overflow-x: hidden\r\n        }\r\n\r\n        a {\r\n            color: inherit;\r\n            text-decoration: none\r\n        }\r\n\r\n        img,\r\n        svg {\r\n            display: block;\r\n            max-width: 100%\r\n        }\r\n\r\n        button {\r\n            font-family: inherit;\r\n            cursor: pointer;\r\n            border: 0;\r\n            background: none;\r\n            color: inherit;\r\n            padding: 0\r\n        }\r\n\r\n        h1,\r\n        h2,\r\n        h3,\r\n        h4 {\r\n            margin: 0;\r\n            font-weight: 700;\r\n            letter-spacing: -.025em;\r\n            line-height: 1.05;\r\n            text-wrap: balance\r\n        }\r\n\r\n        p {\r\n            margin: 0;\r\n            line-height: 1.65;\r\n            color: var(--mute);\r\n            text-wrap: pretty\r\n        }\r\n\r\n        .wrap {\r\n            max-width: 1320px;\r\n            margin: 0 auto;\r\n            padding: 0 32px\r\n        }\r\n\r\n        \/* \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 shared bits \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 *\/\r\n        .eyebrow {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            font-size: 11px;\r\n            letter-spacing: .24em;\r\n            text-transform: uppercase;\r\n            font-weight: 700;\r\n            color: var(--blue)\r\n        }\r\n\r\n        .eyebrow::before {\r\n            content: \"\";\r\n            width: 28px;\r\n            height: 1px;\r\n            background: var(--blue)\r\n        }\r\n\r\n        .eyebrow.red {\r\n            color: #ff8585\r\n        }\r\n\r\n        .eyebrow.red::before {\r\n            background: var(--red)\r\n        }\r\n\r\n        .mono {\r\n            font-family: var(--mono);\r\n            letter-spacing: .04em\r\n        }\r\n\r\n        .btn {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n            padding: 13px 22px;\r\n            border-radius: 999px;\r\n            font-weight: 600;\r\n            font-size: 13px;\r\n            letter-spacing: .02em;\r\n            transition: transform .15s, background .15s, box-shadow .25s, border-color .15s, color .15s;\r\n            cursor: pointer\r\n        }\r\n\r\n        .btn-primary {\r\n            background: var(--blue);\r\n            color: #031018;\r\n            box-shadow: 0 10px 30px -10px var(--blue-glow), inset 0 0 0 1px rgba(255, 255, 255, .08)\r\n        }\r\n\r\n        .btn-primary:hover {\r\n            transform: translateY(-1px);\r\n            box-shadow: 0 14px 38px -8px var(--blue-glow)\r\n        }\r\n\r\n        .btn-ghost {\r\n            border: 1px solid var(--line);\r\n            color: #fff\r\n        }\r\n\r\n        .btn-ghost:hover {\r\n            border-color: var(--blue);\r\n            color: var(--blue)\r\n        }\r\n\r\n        .btn-red {\r\n            background: var(--red);\r\n            color: #fff;\r\n            box-shadow: 0 10px 30px -10px var(--red-glow)\r\n        }\r\n\r\n        .btn-red:hover {\r\n            transform: translateY(-1px);\r\n            box-shadow: 0 14px 38px -8px var(--red-glow)\r\n        }\r\n\r\n        .arr {\r\n            display: inline-block;\r\n            width: 14px;\r\n            height: 1.5px;\r\n            background: currentColor;\r\n            position: relative\r\n        }\r\n\r\n        .arr::after {\r\n            content: \"\";\r\n            position: absolute;\r\n            right: 0;\r\n            top: -3px;\r\n            width: 7px;\r\n            height: 7px;\r\n            border-right: 1.5px solid currentColor;\r\n            border-top: 1.5px solid currentColor;\r\n            transform: rotate(45deg)\r\n        }\r\n\r\n        \/* \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 NAV \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 *\/\r\n        .nav {\r\n            position: sticky;\r\n            top: 0;\r\n            z-index: 50;\r\n            background: rgba(0, 0, 0, .78);\r\n            backdrop-filter: blur(14px);\r\n            border-bottom: 1px solid var(--line-2)\r\n        }\r\n\r\n        .nav-inner {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            height: 72px\r\n        }\r\n\r\n        .logo {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n            font-weight: 800;\r\n            font-size: 18px;\r\n            letter-spacing: .04em\r\n        }\r\n\r\n        .logo-mark {\r\n            width: 30px;\r\n            height: 30px;\r\n            border-radius: 8px;\r\n            background:\r\n                radial-gradient(circle at 30% 30%, #fff 0 1.2px, transparent 1.5px) 0 0\/6px 6px,\r\n                linear-gradient(135deg, var(--blue), var(--blue-deep));\r\n            box-shadow: 0 0 24px var(--blue-glow), inset 0 0 0 1px rgba(255, 255, 255, .2)\r\n        }\r\n\r\n        .logo span b {\r\n            color: var(--blue)\r\n        }\r\n\r\n        .nav-links {\r\n            display: flex;\r\n            gap: 32px;\r\n            font-size: 13.5px;\r\n            font-weight: 500;\r\n            color: var(--mute)\r\n        }\r\n\r\n        .nav-links a:hover,\r\n        .nav-links a.active {\r\n            color: var(--white)\r\n        }\r\n\r\n        .nav-links a.active {\r\n            color: var(--blue)\r\n        }\r\n\r\n        .nav-cta {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 14px\r\n        }\r\n\r\n        \/* \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 BREADCRUMB \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 *\/\r\n        .crumb {\r\n            padding: 22px 0 0;\r\n            font-family: var(--mono);\r\n            font-size: 11px;\r\n            letter-spacing: .2em;\r\n            text-transform: uppercase;\r\n            color: var(--mute-2)\r\n        }\r\n\r\n        .crumb a:hover {\r\n            color: var(--blue)\r\n        }\r\n\r\n        .crumb .sep {\r\n            margin: 0 10px;\r\n            color: var(--mute-3)\r\n        }\r\n\r\n        .crumb b {\r\n            color: #fff;\r\n            font-weight: 600\r\n        }\r\n\r\n        \/* \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 HERO \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 *\/\r\n        .hero {\r\n            position: relative;\r\n            padding: 60px 0 80px;\r\n            overflow: hidden;\r\n            background:\r\n                radial-gradient(ellipse 80% 60% at 50% -10%, var(--blue-soft), transparent 60%),\r\n                radial-gradient(ellipse 55% 35% at 85% 110%, var(--red-soft), transparent 60%),\r\n                var(--black)\r\n        }\r\n\r\n        .hero::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            inset: 0;\r\n            background-image: radial-gradient(circle, rgba(110, 193, 234, .18) 0.7px, transparent 1px);\r\n            background-size: 16px 16px;\r\n            mask-image: radial-gradient(ellipse 70% 65% at 50% 35%, #000 25%, transparent 75%);\r\n            pointer-events: none\r\n        }\r\n\r\n        .hero-grid {\r\n            position: relative;\r\n            display: grid;\r\n            grid-template-columns: 1.05fr .95fr;\r\n            gap: 64px;\r\n            align-items: end;\r\n            z-index: 2\r\n        }\r\n\r\n        .hero-cat {\r\n            font-family: var(--mono);\r\n            font-size: 13px;\r\n            letter-spacing: .3em;\r\n            text-transform: uppercase;\r\n            color: var(--blue);\r\n            font-weight: 700;\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 14px;\r\n            margin-bottom: 22px\r\n        }\r\n\r\n        .hero-cat .num {\r\n            padding: 6px 10px;\r\n            border: 1px solid var(--blue);\r\n            border-radius: 6px;\r\n            color: #fff;\r\n            background: rgba(110, 193, 234, .08)\r\n        }\r\n\r\n        .hero h1 {\r\n            font-size: clamp(48px, 7vw, 108px);\r\n            font-weight: 800;\r\n            letter-spacing: -.045em;\r\n            line-height: .95\r\n        }\r\n\r\n        .hero h1 .accent {\r\n            color: var(--blue)\r\n        }\r\n\r\n        .hero h1 .underline {\r\n            position: relative;\r\n            display: inline-block\r\n        }\r\n\r\n        .hero h1 .underline::after {\r\n            content: \"\";\r\n            position: absolute;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: .05em;\r\n            height: .1em;\r\n            background: var(--red);\r\n            z-index: -1;\r\n            border-radius: 2px\r\n        }\r\n\r\n        .hero-intro {\r\n            font-size: 17px;\r\n            line-height: 1.65;\r\n            color: rgba(255, 255, 255, .78);\r\n            max-width: 520px;\r\n            margin-top: 28px\r\n        }\r\n\r\n        .hero-cta-row {\r\n            margin-top: 32px;\r\n            display: flex;\r\n            gap: 12px;\r\n            flex-wrap: wrap\r\n        }\r\n\r\n        \/* hero right \u2014 vertical strip of case-study thumbs *\/\r\n        .hero-thumbs {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 10px;\r\n            align-self: stretch;\r\n            justify-content: end\r\n        }\r\n\r\n        .hero-thumb {\r\n            position: relative;\r\n            border: 1px solid var(--line-2);\r\n            border-radius: 14px;\r\n            overflow: hidden;\r\n            height: 84px;\r\n            background: #04060a;\r\n            transition: border-color .3s, transform .3s;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 18px;\r\n            padding: 0 22px 0 0\r\n        }\r\n\r\n        .hero-thumb:hover {\r\n            border-color: var(--blue);\r\n            transform: translateX(-4px)\r\n        }\r\n\r\n        .hero-thumb .ht-vis {\r\n            width: 140px;\r\n            height: 100%;\r\n            flex-shrink: 0;\r\n            position: relative;\r\n            overflow: hidden\r\n        }\r\n\r\n        .hero-thumb .ht-vis::after {\r\n            content: \"\";\r\n            position: absolute;\r\n            inset: 0;\r\n            background: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, .85))\r\n        }\r\n\r\n        .hero-thumb .ht-vis::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            inset: 0;\r\n            background-image: radial-gradient(circle, rgba(255, 255, 255, .4) 0.4px, transparent 1px);\r\n            background-size: 3px 3px;\r\n            mix-blend-mode: screen;\r\n            opacity: .4\r\n        }\r\n\r\n        .hero-thumb .ht-body {\r\n            flex: 1;\r\n            min-width: 0\r\n        }\r\n\r\n        .hero-thumb .ht-num {\r\n            font-family: var(--mono);\r\n            font-size: 10px;\r\n            letter-spacing: .22em;\r\n            color: var(--blue);\r\n            font-weight: 700\r\n        }\r\n\r\n        .hero-thumb .ht-title {\r\n            margin-top: 4px;\r\n            font-size: 14.5px;\r\n            font-weight: 600;\r\n            letter-spacing: -.005em;\r\n            color: #fff;\r\n            white-space: nowrap;\r\n            overflow: hidden;\r\n            text-overflow: ellipsis\r\n        }\r\n\r\n        .hero-thumb .ht-meta {\r\n            margin-top: 3px;\r\n            font-family: var(--mono);\r\n            font-size: 10px;\r\n            letter-spacing: .16em;\r\n            text-transform: uppercase;\r\n            color: var(--mute-2);\r\n            white-space: nowrap;\r\n            overflow: hidden;\r\n            text-overflow: ellipsis\r\n        }\r\n\r\n        .hero-thumb .ht-arrow {\r\n            width: 32px;\r\n            height: 32px;\r\n            border-radius: 50%;\r\n            border: 1px solid var(--line-2);\r\n            display: grid;\r\n            place-items: center;\r\n            flex-shrink: 0;\r\n            color: var(--mute);\r\n            transition: all .25s\r\n        }\r\n\r\n        .hero-thumb:hover .ht-arrow {\r\n            background: var(--blue);\r\n            border-color: var(--blue);\r\n            color: #031018\r\n        }\r\n\r\n        .hero-thumb .ht-arrow svg {\r\n            width: 14px;\r\n            height: 14px\r\n        }\r\n\r\n        \/* hero-thumb visuals (5 palettes cycled) *\/\r\n        .ht-v-1 {\r\n            background: radial-gradient(ellipse 70% 60% at 30% 50%, rgba(255, 160, 40, .5), transparent 60%), radial-gradient(circle at 70% 70%, rgba(220, 0, 0, .35), transparent 55%), linear-gradient(135deg, #1a0a05, #02060a)\r\n        }\r\n\r\n        .ht-v-2 {\r\n            background: radial-gradient(circle at 50% 50%, rgba(110, 193, 234, .55), transparent 60%), radial-gradient(ellipse 50% 40% at 80% 80%, rgba(80, 40, 200, .4), transparent 60%), linear-gradient(135deg, #06121c, #02060a)\r\n        }\r\n\r\n        .ht-v-3 {\r\n            background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255, 80, 120, .45), transparent 60%), radial-gradient(circle at 30% 30%, rgba(255, 180, 60, .4), transparent 55%), linear-gradient(135deg, #1a0510, #0a0205)\r\n        }\r\n\r\n        .ht-v-4 {\r\n            background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255, 220, 120, .45), transparent 60%), radial-gradient(circle at 80% 80%, rgba(180, 100, 40, .4), transparent 55%), linear-gradient(135deg, #0e0a05, #02010a)\r\n        }\r\n\r\n        .ht-v-5 {\r\n            background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(240, 140, 200, .4), transparent 60%), radial-gradient(circle at 30% 70%, rgba(80, 80, 180, .45), transparent 55%), linear-gradient(135deg, #10081a, #02020a)\r\n        }\r\n\r\n        \/* hero ribbon *\/\r\n        .hero-ribbon {\r\n            margin-top: 64px;\r\n            display: grid;\r\n            grid-template-columns: repeat(4, 1fr);\r\n            border-top: 1px solid var(--line-2);\r\n            border-bottom: 1px solid var(--line-2);\r\n            background: rgba(255, 255, 255, .015);\r\n            position: relative;\r\n            z-index: 2\r\n        }\r\n\r\n        .hero-ribbon>div {\r\n            padding: 24px 22px;\r\n            border-right: 1px solid var(--line-2);\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 6px\r\n        }\r\n\r\n        .hero-ribbon>div:last-child {\r\n            border-right: 0\r\n        }\r\n\r\n        .hero-ribbon .k {\r\n            font-family: var(--mono);\r\n            font-size: 10.5px;\r\n            letter-spacing: .22em;\r\n            text-transform: uppercase;\r\n            color: var(--mute-2);\r\n            font-weight: 600\r\n        }\r\n\r\n        .hero-ribbon .v {\r\n            font-size: 28px;\r\n            font-weight: 800;\r\n            letter-spacing: -.02em;\r\n            color: #fff;\r\n            display: flex;\r\n            align-items: baseline;\r\n            gap: 6px\r\n        }\r\n\r\n        .hero-ribbon .v .u {\r\n            font-size: 13px;\r\n            font-weight: 600;\r\n            color: var(--blue);\r\n            font-family: var(--mono);\r\n            letter-spacing: 0\r\n        }\r\n\r\n        .hero-ribbon .sub {\r\n            font-size: 12px;\r\n            color: var(--mute);\r\n            font-weight: 500\r\n        }\r\n\r\n        @media (max-width:980px) {\r\n            .hero-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 48px\r\n            }\r\n\r\n            .hero-thumbs {\r\n                flex-direction: row;\r\n                overflow-x: auto;\r\n                scroll-snap-type: x mandatory;\r\n                padding-bottom: 6px;\r\n                scrollbar-width: none\r\n            }\r\n\r\n            .hero-thumb {\r\n                min-width: 280px;\r\n                scroll-snap-align: start\r\n            }\r\n\r\n            .hero-ribbon {\r\n                grid-template-columns: repeat(2, 1fr)\r\n            }\r\n\r\n            .hero-ribbon>div:nth-child(2n) {\r\n                border-right: 0\r\n            }\r\n\r\n            .hero-ribbon>div:nth-child(-n+2) {\r\n                border-bottom: 1px solid var(--line-2)\r\n            }\r\n        }\r\n\r\n        \/* ============================================================\r\n     CASE STUDIES \u2014 repeatable block (.cs)\r\n     Duplicate the <article class=\"cs\"> block for each case study.\r\n     Add class .cs--rev on every 2nd item for the alternating layout.\r\n     ============================================================ *\/\r\n        .cases {\r\n            padding: 120px 0 60px;\r\n            background: var(--ink-2);\r\n            position: relative\r\n        }\r\n\r\n        .cases::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            left: 0;\r\n            right: 0;\r\n            top: 0;\r\n            height: 1px;\r\n            background: linear-gradient(90deg, transparent, var(--line), transparent)\r\n        }\r\n\r\n        .cases-head {\r\n            display: grid;\r\n            grid-template-columns: 1fr 380px;\r\n            gap: 60px;\r\n            align-items: end;\r\n            margin-bottom: 72px\r\n        }\r\n\r\n        .cases-head h2 {\r\n            font-size: clamp(34px, 4vw, 52px);\r\n            letter-spacing: -.03em;\r\n            max-width: 780px\r\n        }\r\n\r\n        .cases-head h2 .accent {\r\n            color: var(--blue)\r\n        }\r\n\r\n        .cases-head p {\r\n            font-size: 15.5px;\r\n            line-height: 1.65\r\n        }\r\n\r\n        .cs-list {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 120px\r\n        }\r\n\r\n        \/* a single case study *\/\r\n        .cs {\r\n            display: grid;\r\n            grid-template-columns: 1.15fr .85fr;\r\n            gap: 64px;\r\n            align-items: center;\r\n            position: relative\r\n        }\r\n\r\n        .cs--rev {\r\n            grid-template-columns: .85fr 1.15fr\r\n        }\r\n\r\n        .cs--rev .cs-vis {\r\n            order: 2\r\n        }\r\n\r\n        .cs--rev .cs-body {\r\n            order: 1\r\n        }\r\n\r\n        \/* visual side *\/\r\n        .cs-vis {\r\n            position: relative;\r\n            border-radius: 22px;\r\n            overflow: hidden;\r\n            border: 1px solid var(--line-2);\r\n            background: #04060a;\r\n            aspect-ratio: 5\/4;\r\n            isolation: isolate;\r\n            transition: border-color .35s, box-shadow .5s, transform .5s\r\n        }\r\n\r\n        .cs:hover .cs-vis {\r\n            border-color: var(--blue);\r\n            box-shadow: 0 40px 100px -30px var(--blue-glow);\r\n            transform: translateY(-4px)\r\n        }\r\n\r\n        .cs-screen {\r\n            position: absolute;\r\n            inset: 0\r\n        }\r\n\r\n        .cs-screen::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            inset: 0;\r\n            background-image: radial-gradient(circle, rgba(255, 255, 255, .5) 0.55px, transparent 1px);\r\n            background-size: 4px 4px;\r\n            mix-blend-mode: screen;\r\n            opacity: .4;\r\n            pointer-events: none;\r\n            z-index: 1\r\n        }\r\n\r\n        .cs-screen::after {\r\n            content: \"\";\r\n            position: absolute;\r\n            inset: 0;\r\n            background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .85) 100%);\r\n            pointer-events: none;\r\n            z-index: 2\r\n        }\r\n\r\n        \/* \"drop your image here\" hint \u2014 replace .cs-screen contents with <img> when ready *\/\r\n        .cs-placeholder {\r\n            position: absolute;\r\n            inset: 0;\r\n            z-index: 3;\r\n            width: 100%;\r\n            height: 100%;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .cs-placeholder img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: contain;\r\n            display: block;\r\n        }\r\n\r\n        .cs-placeholder .tag {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            font-family: var(--mono);\r\n            font-size: 10px;\r\n            letter-spacing: .22em;\r\n            text-transform: uppercase;\r\n            color: #fff;\r\n            background: rgba(0, 0, 0, .55);\r\n            padding: 6px 12px;\r\n            border-radius: 999px;\r\n            border: 1px solid rgba(255, 255, 255, .2);\r\n            backdrop-filter: blur(6px);\r\n            margin-bottom: 14px\r\n        }\r\n\r\n        .cs-placeholder .tag::before {\r\n            content: \"\";\r\n            width: 6px;\r\n            height: 6px;\r\n            border-radius: 50%;\r\n            background: var(--blue);\r\n            box-shadow: 0 0 10px var(--blue-glow)\r\n        }\r\n\r\n        .cs-placeholder p {\r\n            font-family: var(--mono);\r\n            font-size: 11px;\r\n            letter-spacing: .06em;\r\n            color: rgba(255, 255, 255, .85);\r\n            line-height: 1.55;\r\n            text-transform: none;\r\n            text-wrap: balance\r\n        }\r\n\r\n        \/* corner marks + label + spec chip on visual *\/\r\n        .cs-vis .corner {\r\n            position: absolute;\r\n            width: 22px;\r\n            height: 22px;\r\n            border: 1.5px solid rgba(255, 255, 255, .45);\r\n            z-index: 4\r\n        }\r\n\r\n        .cs-vis .corner.tl {\r\n            top: 16px;\r\n            left: 16px;\r\n            border-right: 0;\r\n            border-bottom: 0\r\n        }\r\n\r\n        .cs-vis .corner.tr {\r\n            top: 16px;\r\n            right: 16px;\r\n            border-left: 0;\r\n            border-bottom: 0\r\n        }\r\n\r\n        .cs-vis .corner.bl {\r\n            bottom: 16px;\r\n            left: 16px;\r\n            border-right: 0;\r\n            border-top: 0\r\n        }\r\n\r\n        .cs-vis .corner.br {\r\n            bottom: 16px;\r\n            right: 16px;\r\n            border-left: 0;\r\n            border-top: 0\r\n        }\r\n\r\n        .cs-vis .label {\r\n            position: absolute;\r\n            top: 18px;\r\n            left: 18px;\r\n            font-family: var(--mono);\r\n            font-size: 10px;\r\n            letter-spacing: .22em;\r\n            color: var(--blue);\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n            background: rgba(0, 0, 0, .6);\r\n            padding: 7px 12px;\r\n            border-radius: 6px;\r\n            border: 1px solid var(--line);\r\n            backdrop-filter: blur(6px);\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            z-index: 5\r\n        }\r\n\r\n        .cs-vis .label::before {\r\n            content: \"\";\r\n            width: 6px;\r\n            height: 6px;\r\n            border-radius: 50%;\r\n            background: var(--blue);\r\n            box-shadow: 0 0 10px var(--blue-glow);\r\n            animation: pulse 2s ease-in-out infinite\r\n        }\r\n\r\n        @keyframes pulse {\r\n            50% {\r\n                opacity: .4\r\n            }\r\n        }\r\n\r\n        .cs-vis .spec-chip {\r\n            position: absolute;\r\n            bottom: 18px;\r\n            right: 18px;\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            background: rgba(0, 0, 0, .6);\r\n            border: 1px solid var(--line);\r\n            padding: 8px 12px;\r\n            border-radius: 8px;\r\n            font-family: var(--mono);\r\n            font-size: 11px;\r\n            color: #fff;\r\n            font-weight: 600;\r\n            backdrop-filter: blur(8px);\r\n            z-index: 5\r\n        }\r\n\r\n        .cs-vis .spec-chip b {\r\n            color: var(--blue);\r\n            letter-spacing: .06em\r\n        }\r\n\r\n        \/* body side *\/\r\n        .cs-body {\r\n            position: relative;\r\n            padding: 0 8px\r\n        }\r\n\r\n        .cs-num {\r\n            font-family: var(--mono);\r\n            font-size: clamp(80px, 8vw, 140px);\r\n            font-weight: 700;\r\n            letter-spacing: -.04em;\r\n            line-height: .9;\r\n            color: transparent;\r\n            -webkit-text-stroke: 1px rgba(110, 193, 234, .35);\r\n            margin-bottom: 8px;\r\n            display: block\r\n        }\r\n\r\n        .cs-meta-row {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            gap: 8px;\r\n            margin-bottom: 16px\r\n        }\r\n\r\n        .cs-meta-chip {\r\n            font-family: var(--mono);\r\n            font-size: 10.5px;\r\n            letter-spacing: .18em;\r\n            text-transform: uppercase;\r\n            color: var(--blue);\r\n            font-weight: 600;\r\n            padding: 6px 11px;\r\n            border: 1px solid var(--line);\r\n            border-radius: 999px;\r\n            background: rgba(110, 193, 234, .06);\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 7px\r\n        }\r\n\r\n        .cs-meta-chip::before {\r\n            content: \"\";\r\n            width: 5px;\r\n            height: 5px;\r\n            border-radius: 50%;\r\n            background: var(--blue);\r\n            box-shadow: 0 0 8px var(--blue-glow)\r\n        }\r\n\r\n        .cs-meta-chip.red {\r\n            color: #ff9090;\r\n            border-color: rgba(220, 0, 0, .35);\r\n            background: rgba(220, 0, 0, .08)\r\n        }\r\n\r\n        .cs-meta-chip.red::before {\r\n            background: var(--red);\r\n            box-shadow: 0 0 8px var(--red-glow)\r\n        }\r\n\r\n        .cs-meta-chip.plain {\r\n            color: var(--mute);\r\n            border-color: var(--line-2);\r\n            background: transparent\r\n        }\r\n\r\n        .cs-meta-chip.plain::before {\r\n            background: var(--mute-2);\r\n            box-shadow: none\r\n        }\r\n\r\n        .cs-title {\r\n            font-size: clamp(28px, 3.2vw, 42px);\r\n            font-weight: 700;\r\n            letter-spacing: -.025em;\r\n            line-height: 1.1;\r\n            color: #fff\r\n        }\r\n\r\n        .cs-title .accent {\r\n            color: var(--blue)\r\n        }\r\n\r\n        .cs-impact-label {\r\n            margin-top: 24px;\r\n            font-family: var(--mono);\r\n            font-size: 11px;\r\n            letter-spacing: .22em;\r\n            text-transform: uppercase;\r\n            color: var(--blue);\r\n            font-weight: 700;\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 10px\r\n        }\r\n\r\n        .cs-impact-label::before {\r\n            content: \"\";\r\n            width: 24px;\r\n            height: 1px;\r\n            background: var(--blue)\r\n        }\r\n\r\n        .cs-impact {\r\n            margin-top: 12px;\r\n            font-size: 16.5px;\r\n            line-height: 1.7;\r\n            color: rgba(255, 255, 255, .82);\r\n            max-width: 560px\r\n        }\r\n\r\n        .cs-impact a {\r\n            color: var(--blue);\r\n            font-weight: 600;\r\n            border-bottom: 1px solid rgba(110, 193, 234, .35);\r\n            transition: border-color .2s\r\n        }\r\n\r\n        .cs-impact a:hover {\r\n            border-color: var(--blue)\r\n        }\r\n\r\n        \/* spec strip beneath impact *\/\r\n        .cs-specs {\r\n            margin-top: 28px;\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 0;\r\n            border-top: 1px solid var(--line-2);\r\n            border-bottom: 1px solid var(--line-2);\r\n            max-width: 560px\r\n        }\r\n\r\n        .cs-specs>div {\r\n            padding: 16px 18px 16px 0;\r\n            border-right: 1px solid var(--line-2)\r\n        }\r\n\r\n        .cs-specs>div:last-child {\r\n            border-right: 0;\r\n            padding-right: 0\r\n        }\r\n\r\n        .cs-specs .k {\r\n            font-family: var(--mono);\r\n            font-size: 10px;\r\n            letter-spacing: .2em;\r\n            color: var(--mute-2);\r\n            text-transform: uppercase;\r\n            font-weight: 600\r\n        }\r\n\r\n        .cs-specs .v {\r\n            margin-top: 6px;\r\n            font-size: 18px;\r\n            font-weight: 800;\r\n            color: #fff;\r\n            letter-spacing: -.01em;\r\n            font-family: var(--mono);\r\n            display: flex;\r\n            align-items: baseline;\r\n            gap: 5px\r\n        }\r\n\r\n        .cs-specs .v .u {\r\n            color: var(--blue);\r\n            font-size: 11px;\r\n            font-weight: 600;\r\n            letter-spacing: 0\r\n        }\r\n\r\n        \/* tight one-up variant for the single-case study category *\/\r\n        .cs--solo {\r\n            grid-template-columns: 1fr;\r\n            gap: 48px;\r\n            max-width: 1000px;\r\n            margin: 0 auto\r\n        }\r\n\r\n        .cs--solo .cs-vis {\r\n            aspect-ratio: 16\/9\r\n        }\r\n\r\n        .cs--solo .cs-body {\r\n            order: 1;\r\n            text-align: center;\r\n            padding: 0\r\n        }\r\n\r\n        .cs--solo .cs-num {\r\n            margin-left: auto;\r\n            margin-right: auto\r\n        }\r\n\r\n        .cs--solo .cs-meta-row {\r\n            justify-content: center\r\n        }\r\n\r\n        .cs--solo .cs-impact {\r\n            margin-left: auto;\r\n            margin-right: auto\r\n        }\r\n\r\n        .cs--solo .cs-impact-label {\r\n            justify-content: center\r\n        }\r\n\r\n        .cs--solo .cs-specs {\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n            grid-template-columns: repeat(3, 1fr)\r\n        }\r\n\r\n        \/* visual palettes \u2014 drop class on .cs-screen *\/\r\n        .palette-1 {\r\n            background: radial-gradient(ellipse 70% 50% at 50% 60%, rgba(255, 180, 40, .55), transparent 60%), radial-gradient(circle at 30% 30%, rgba(110, 193, 234, .35), transparent 50%), radial-gradient(circle at 80% 80%, rgba(220, 0, 0, .30), transparent 55%), linear-gradient(180deg, #0a0a14, #02040a)\r\n        }\r\n\r\n        .palette-2 {\r\n            background: radial-gradient(ellipse 65% 55% at 50% 45%, rgba(110, 193, 234, .6), transparent 60%), radial-gradient(circle at 75% 75%, rgba(40, 80, 180, .45), transparent 55%), linear-gradient(135deg, #06121c, #02060a)\r\n        }\r\n\r\n        .palette-3 {\r\n            background: radial-gradient(ellipse 80% 55% at 50% 45%, rgba(255, 140, 40, .6), transparent 55%), radial-gradient(ellipse 45% 35% at 50% 80%, rgba(220, 0, 40, .45), transparent 60%), linear-gradient(135deg, #1a0500, #0a0200)\r\n        }\r\n\r\n        .palette-4 {\r\n            background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255, 220, 140, .4), transparent 60%), radial-gradient(circle at 30% 30%, rgba(255, 170, 60, .35), transparent 50%), linear-gradient(135deg, #1a0e02, #0a0500)\r\n        }\r\n\r\n        .palette-5 {\r\n            background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(240, 140, 200, .45), transparent 60%), radial-gradient(circle at 80% 30%, rgba(80, 40, 180, .4), transparent 55%), linear-gradient(135deg, #100818, #02020a)\r\n        }\r\n\r\n        .palette-6 {\r\n            background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255, 200, 60, .5), transparent 55%), radial-gradient(circle at 30% 70%, rgba(220, 0, 40, .3), transparent 55%), linear-gradient(135deg, #1a1000, #0a0500)\r\n        }\r\n\r\n        .palette-7 {\r\n            background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255, 210, 120, .45), transparent 60%), radial-gradient(circle at 50% 80%, rgba(180, 60, 0, .45), transparent 60%), linear-gradient(135deg, #1a0a04, #0a0402)\r\n        }\r\n\r\n        .palette-8 {\r\n            background: radial-gradient(ellipse 50% 60% at 30% 50%, rgba(110, 193, 234, .55), transparent 60%), radial-gradient(ellipse 50% 60% at 70% 50%, rgba(255, 200, 80, .45), transparent 60%), linear-gradient(135deg, #0a0a16, #02040a)\r\n        }\r\n\r\n        @media (max-width:980px) {\r\n\r\n            .cs,\r\n            .cs--rev {\r\n                grid-template-columns: 1fr;\r\n                gap: 32px\r\n            }\r\n\r\n            .cs--rev .cs-vis {\r\n                order: 1\r\n            }\r\n\r\n            .cs--rev .cs-body {\r\n                order: 2\r\n            }\r\n\r\n            .cs-list {\r\n                gap: 80px\r\n            }\r\n\r\n            .cases-head {\r\n                grid-template-columns: 1fr;\r\n                gap: 24px\r\n            }\r\n        }\r\n\r\n        \/* ============================================================\r\n     MID-PAGE CTA\r\n     ============================================================ *\/\r\n        .cta-mid {\r\n            padding: 80px 0;\r\n            background: var(--ink-2)\r\n        }\r\n\r\n        .cta-card {\r\n            position: relative;\r\n            border: 1px solid var(--line);\r\n            border-radius: 24px;\r\n            padding: 56px;\r\n            background: linear-gradient(180deg, rgba(110, 193, 234, .06), rgba(220, 0, 0, .04)), var(--ink);\r\n            overflow: hidden;\r\n            display: grid;\r\n            grid-template-columns: 1fr auto;\r\n            gap: 48px;\r\n            align-items: center\r\n        }\r\n\r\n        .cta-card::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            right: -150px;\r\n            top: -150px;\r\n            width: 400px;\r\n            height: 400px;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, var(--blue-glow), transparent 70%);\r\n            filter: blur(40px);\r\n            pointer-events: none\r\n        }\r\n\r\n        .cta-card::after {\r\n            content: \"\";\r\n            position: absolute;\r\n            left: -100px;\r\n            bottom: -100px;\r\n            width: 300px;\r\n            height: 300px;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, var(--red-glow), transparent 70%);\r\n            filter: blur(40px);\r\n            pointer-events: none;\r\n            opacity: .5\r\n        }\r\n\r\n        .cta-card .l {\r\n            position: relative;\r\n            z-index: 2\r\n        }\r\n\r\n        .cta-card h3 {\r\n            margin-top: 14px;\r\n            font-size: clamp(28px, 3.4vw, 42px);\r\n            letter-spacing: -.025em;\r\n            line-height: 1.1;\r\n            max-width: 600px\r\n        }\r\n\r\n        .cta-card h3 .accent {\r\n            color: var(--blue)\r\n        }\r\n\r\n        .cta-card p {\r\n            margin-top: 14px;\r\n            font-size: 15.5px;\r\n            line-height: 1.6;\r\n            max-width: 540px\r\n        }\r\n\r\n        .cta-card .r {\r\n            position: relative;\r\n            z-index: 2;\r\n            display: flex;\r\n            gap: 12px;\r\n            flex-wrap: wrap\r\n        }\r\n\r\n        @media (max-width:880px) {\r\n            .cta-card {\r\n                grid-template-columns: 1fr;\r\n                padding: 36px;\r\n                gap: 28px\r\n            }\r\n        }\r\n\r\n        \/* ============================================================\r\n     FAQ\r\n     ============================================================ *\/\r\n        .faq {\r\n            padding: 120px 0;\r\n            background: linear-gradient(180deg, var(--ink-2), var(--black))\r\n        }\r\n\r\n        .faq-grid {\r\n            display: grid;\r\n            grid-template-columns: 380px 1fr;\r\n            gap: 72px;\r\n            align-items: start\r\n        }\r\n\r\n        .faq-side h2 {\r\n            font-size: clamp(34px, 3.8vw, 52px);\r\n            letter-spacing: -.03em;\r\n            margin-top: 14px\r\n        }\r\n\r\n        .faq-side h2 .accent {\r\n            color: var(--blue)\r\n        }\r\n\r\n        .faq-side p {\r\n            font-size: 15.5px;\r\n            line-height: 1.65;\r\n            margin-top: 18px\r\n        }\r\n\r\n        .faq-side .faq-help {\r\n            margin-top: 28px;\r\n            padding: 18px;\r\n            border: 1px dashed var(--line-2);\r\n            border-radius: 14px;\r\n            background: rgba(255, 255, 255, .015);\r\n            font-family: var(--mono);\r\n            font-size: 11px;\r\n            letter-spacing: .06em;\r\n            color: var(--mute);\r\n            line-height: 1.6\r\n        }\r\n\r\n        .faq-side .faq-help b {\r\n            color: var(--blue);\r\n            display: block;\r\n            font-weight: 700;\r\n            letter-spacing: .18em;\r\n            text-transform: uppercase;\r\n            margin-bottom: 6px;\r\n            font-size: 10px\r\n        }\r\n\r\n        .faq-list {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 0;\r\n            border-top: 1px solid var(--line-2)\r\n        }\r\n\r\n        .faq-item {\r\n            border-bottom: 1px solid var(--line-2)\r\n        }\r\n\r\n        .faq-q {\r\n            width: 100%;\r\n            text-align: left;\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            gap: 24px;\r\n            padding: 24px 0;\r\n            font-size: 17px;\r\n            font-weight: 600;\r\n            letter-spacing: -.005em;\r\n            line-height: 1.35;\r\n            color: #fff;\r\n            transition: color .2s\r\n        }\r\n\r\n        .faq-q:hover {\r\n            color: var(--blue)\r\n        }\r\n\r\n        .faq-item.open .faq-q {\r\n            color: var(--blue)\r\n        }\r\n\r\n        .faq-toggle {\r\n            width: 34px;\r\n            height: 34px;\r\n            border-radius: 50%;\r\n            border: 1px solid var(--line);\r\n            display: grid;\r\n            place-items: center;\r\n            flex-shrink: 0;\r\n            position: relative;\r\n            transition: all .3s;\r\n            color: var(--blue)\r\n        }\r\n\r\n        .faq-toggle::before,\r\n        .faq-toggle::after {\r\n            content: \"\";\r\n            position: absolute;\r\n            background: currentColor;\r\n            border-radius: 1px\r\n        }\r\n\r\n        .faq-toggle::before {\r\n            width: 12px;\r\n            height: 1.5px\r\n        }\r\n\r\n        .faq-toggle::after {\r\n            width: 1.5px;\r\n            height: 12px;\r\n            transition: transform .3s\r\n        }\r\n\r\n        .faq-item.open .faq-toggle {\r\n            background: var(--blue);\r\n            border-color: var(--blue);\r\n            color: #031018\r\n        }\r\n\r\n        .faq-item.open .faq-toggle::after {\r\n            transform: rotate(90deg)\r\n        }\r\n\r\n        .faq-a {\r\n            max-height: 0;\r\n            overflow: hidden;\r\n            transition: max-height .45s ease, padding .35s ease\r\n        }\r\n\r\n        .faq-item.open .faq-a {\r\n            max-height: 520px;\r\n            padding-bottom: 26px\r\n        }\r\n\r\n        .faq-a p {\r\n            font-size: 15px;\r\n            line-height: 1.7;\r\n            color: rgba(255, 255, 255, .72);\r\n            max-width: 760px\r\n        }\r\n\r\n        .faq-a p+p {\r\n            margin-top: 12px\r\n        }\r\n\r\n        .faq-placeholder {\r\n            font-family: var(--mono);\r\n            font-size: 11.5px;\r\n            letter-spacing: .04em;\r\n            color: var(--mute-2);\r\n            font-style: italic\r\n        }\r\n\r\n        @media (max-width:980px) {\r\n            .faq-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 32px\r\n            }\r\n\r\n            .faq-q {\r\n                font-size: 15.5px\r\n            }\r\n        }\r\n\r\n        \/* ============================================================\r\n     FOOTER STRIP\r\n     ============================================================ *\/\r\n        .foot {\r\n            padding: 48px 0;\r\n            border-top: 1px solid var(--line-2);\r\n            background: var(--black)\r\n        }\r\n\r\n        .foot-inner {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            gap: 24px;\r\n            flex-wrap: wrap;\r\n            font-family: var(--mono);\r\n            font-size: 11px;\r\n            letter-spacing: .18em;\r\n            text-transform: uppercase;\r\n            color: var(--mute-2)\r\n        }\r\n\r\n        .foot-links {\r\n            display: flex;\r\n            gap: 24px\r\n        }\r\n\r\n        .foot-links a:hover {\r\n            color: var(--blue)\r\n        }\r\n\r\n        \/* FINAL RESPONSIVE FIX *\/\r\n        html,\r\n        body {\r\n            width: 100%;\r\n            max-width: 100%;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        .wrap {\r\n            width: 100%;\r\n            max-width: 1320px;\r\n            padding-left: 32px;\r\n            padding-right: 32px;\r\n        }\r\n\r\n        \/* Images must fill boxes properly *\/\r\n        .cs-placeholder img,\r\n        .hero-thumb img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n        }\r\n\r\n        \/* Tablet *\/\r\n        @media (max-width: 980px) {\r\n            .wrap {\r\n                padding-left: 22px;\r\n                padding-right: 22px;\r\n            }\r\n\r\n            .nav-inner {\r\n                height: auto;\r\n                padding: 14px 0;\r\n                gap: 14px;\r\n            }\r\n\r\n            .nav-links {\r\n                display: none;\r\n            }\r\n\r\n            .nav-cta .btn {\r\n                padding: 10px 14px;\r\n                font-size: 11px;\r\n            }\r\n\r\n            .hero {\r\n                padding: 38px 0 56px;\r\n            }\r\n\r\n            .hero-grid {\r\n                grid-template-columns: 1fr !important;\r\n                gap: 34px;\r\n            }\r\n\r\n            .hero h1 {\r\n                font-size: clamp(38px, 10vw, 68px);\r\n                line-height: 0.98;\r\n            }\r\n\r\n            .hero-intro {\r\n                font-size: 15px;\r\n            }\r\n\r\n            .hero-thumbs {\r\n                width: 100%;\r\n                max-width: 100%;\r\n                overflow-x: auto;\r\n            }\r\n\r\n            .hero-thumb {\r\n                min-width: 260px;\r\n            }\r\n\r\n            .hero-ribbon {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                margin-top: 42px;\r\n            }\r\n\r\n            \/* SECOND SECTION FIX *\/\r\n            .cases {\r\n                padding: 70px 0 40px;\r\n            }\r\n\r\n            .cases-head {\r\n                grid-template-columns: 1fr !important;\r\n                gap: 22px;\r\n                margin-bottom: 46px;\r\n            }\r\n\r\n            .cs,\r\n            .cs--rev {\r\n                grid-template-columns: 1fr !important;\r\n                gap: 26px;\r\n            }\r\n\r\n            .cs--rev .cs-vis {\r\n                order: 1;\r\n            }\r\n\r\n            .cs--rev .cs-body {\r\n                order: 2;\r\n            }\r\n\r\n            .cs-list {\r\n                gap: 70px;\r\n            }\r\n\r\n            .cs-vis {\r\n                width: 100%;\r\n                aspect-ratio: 16 \/ 10;\r\n            }\r\n\r\n            .cs-body {\r\n                padding: 0;\r\n            }\r\n\r\n            .cs-num {\r\n                font-size: 70px;\r\n            }\r\n\r\n            .cs-specs {\r\n                grid-template-columns: repeat(3, 1fr);\r\n                max-width: 100%;\r\n            }\r\n        }\r\n\r\n        \/* Mobile *\/\r\n        @media (max-width: 600px) {\r\n            .wrap {\r\n                padding-left: 16px;\r\n                padding-right: 16px;\r\n            }\r\n\r\n            .crumb {\r\n                font-size: 9px;\r\n                letter-spacing: .12em;\r\n            }\r\n\r\n            .hero {\r\n                padding: 30px 0 46px;\r\n            }\r\n\r\n            .hero-cat {\r\n                font-size: 10px;\r\n                letter-spacing: .18em;\r\n                gap: 8px;\r\n            }\r\n\r\n            .hero h1 {\r\n                font-size: 38px;\r\n            }\r\n\r\n            .hero-cta-row {\r\n                flex-direction: column;\r\n            }\r\n\r\n            .hero-cta-row .btn {\r\n                width: 100%;\r\n                justify-content: center;\r\n            }\r\n\r\n            .hero-thumb {\r\n                min-width: 235px;\r\n                height: 78px;\r\n                padding-right: 12px;\r\n            }\r\n\r\n            .hero-thumb .ht-vis {\r\n                width: 95px;\r\n            }\r\n\r\n            .hero-ribbon {\r\n                grid-template-columns: 1fr;\r\n            }\r\n\r\n            .hero-ribbon>div {\r\n                border-right: 0 !important;\r\n                border-bottom: 1px solid var(--line-2);\r\n                padding: 20px 16px;\r\n            }\r\n\r\n            .hero-ribbon>div:last-child {\r\n                border-bottom: 0;\r\n            }\r\n\r\n            \/* SECOND SECTION MOBILE FIX *\/\r\n            .cases {\r\n                padding: 58px 0 34px;\r\n            }\r\n\r\n            .cases-head h2 {\r\n                font-size: 30px;\r\n                line-height: 1.15;\r\n            }\r\n\r\n            .cases-head p {\r\n                font-size: 14px;\r\n            }\r\n\r\n            .cs-list {\r\n                gap: 56px;\r\n            }\r\n\r\n            .cs-vis {\r\n                border-radius: 16px;\r\n                aspect-ratio: 4 \/ 3;\r\n            }\r\n\r\n            .cs-vis .label {\r\n                top: 12px;\r\n                left: 12px;\r\n                font-size: 8px;\r\n                letter-spacing: .14em;\r\n                padding: 6px 8px;\r\n            }\r\n\r\n            .cs-vis .spec-chip {\r\n                bottom: 12px;\r\n                right: 12px;\r\n                font-size: 9px;\r\n                padding: 6px 8px;\r\n            }\r\n\r\n            .cs-title {\r\n                font-size: 25px;\r\n                line-height: 1.18;\r\n            }\r\n\r\n            .cs-impact {\r\n                font-size: 14.5px;\r\n                line-height: 1.65;\r\n            }\r\n\r\n            .cs-meta-chip {\r\n                font-size: 9px;\r\n                letter-spacing: .12em;\r\n            }\r\n\r\n            .cs-num {\r\n                font-size: 58px;\r\n            }\r\n\r\n            .cs-specs {\r\n                grid-template-columns: 1fr;\r\n            }\r\n\r\n            .cs-specs>div {\r\n                border-right: 0;\r\n                border-bottom: 1px solid var(--line-2);\r\n                padding: 14px 0;\r\n            }\r\n\r\n            .cs-specs>div:last-child {\r\n                border-bottom: 0;\r\n            }\r\n\r\n            .cta-card {\r\n                padding: 28px 20px;\r\n            }\r\n\r\n            .faq {\r\n                padding: 70px 0;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .hero-thumbs {\r\n                display: flex;\r\n                flex-direction: column;\r\n                gap: 14px;\r\n                width: 100%;\r\n                overflow: visible;\r\n            }\r\n\r\n            .hero-thumb {\r\n                width: 100%;\r\n                min-width: 0;\r\n                height: auto;\r\n                min-height: 92px;\r\n                padding: 10px 14px 10px 10px;\r\n                display: flex;\r\n                align-items: center;\r\n                gap: 12px;\r\n            }\r\n\r\n            .hero-thumb .ht-vis {\r\n                width: 92px;\r\n                height: 72px;\r\n                flex: 0 0 92px;\r\n                border-radius: 10px;\r\n                overflow: hidden;\r\n            }\r\n\r\n            .hero-thumb .ht-vis img {\r\n                width: 100%;\r\n                height: 100%;\r\n                object-fit: cover;\r\n            }\r\n\r\n            .hero-thumb .ht-body {\r\n                flex: 1;\r\n                min-width: 0;\r\n            }\r\n\r\n            .hero-thumb .ht-title,\r\n            .hero-thumb .ht-meta {\r\n                white-space: normal;\r\n                overflow: visible;\r\n                text-overflow: unset;\r\n            }\r\n\r\n            .hero-thumb .ht-title {\r\n                font-size: 13px;\r\n                line-height: 1.25;\r\n            }\r\n\r\n            .hero-thumb .ht-meta {\r\n                font-size: 9px;\r\n                line-height: 1.4;\r\n            }\r\n\r\n            .hero-thumb .ht-num {\r\n                font-size: 9px;\r\n            }\r\n\r\n            .hero-thumb .ht-arrow {\r\n                width: 28px;\r\n                height: 28px;\r\n                flex: 0 0 28px;\r\n            }\r\n        }\r\n               \/* =========================================================\r\n   HERO + BREADCRUMB SPACING FIX FOR WORDPRESS HEADER\r\n========================================================= *\/\r\n\r\n        \/* HERO SECTION *\/\r\n        .hero {\r\n            position: relative;\r\n            padding: 10px 0 80px;\r\n            overflow: hidden;\r\n            background:\r\n                radial-gradient(ellipse 80% 60% at 50% -10%, var(--blue-soft), transparent 60%),\r\n                radial-gradient(ellipse 55% 35% at 85% 110%, var(--red-soft), transparent 60%),\r\n                var(--black);\r\n        }\r\n\r\n        \/* BREADCRUMB INSIDE HERO *\/\r\n        .crumb {\r\n            padding: 100px 0 18px;\r\n            position: relative;\r\n            z-index: 3;\r\n            font-family: var(--mono);\r\n            font-size: 11px;\r\n            letter-spacing: .2em;\r\n            text-transform: uppercase;\r\n            color: var(--mute-2);\r\n        }\r\n\r\n        .crumb a:hover {\r\n            color: var(--blue);\r\n        }\r\n\r\n        .crumb .sep {\r\n            margin: 0 10px;\r\n            color: var(--mute-3);\r\n        }\r\n\r\n        .crumb b {\r\n            color: #fff;\r\n            font-weight: 600;\r\n        }\r\n\r\n        \/* HERO GRID *\/\r\n        .hero-grid {\r\n            position: relative;\r\n            display: grid;\r\n            grid-template-columns: 1.05fr .95fr;\r\n            gap: 64px;\r\n            align-items: end;\r\n            z-index: 2;\r\n        }\r\n\r\n        \/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n        @media (max-width:980px) {\r\n\r\n            .hero {\r\n                padding: 0px 0 56px;\r\n            }\r\n\r\n            .crumb {\r\n                padding: 80px 0 16px;\r\n                font-size: 10px;\r\n            }\r\n\r\n            .hero-grid {\r\n                grid-template-columns: 1fr !important;\r\n                gap: 34px;\r\n            }\r\n        }\r\n\r\n        \/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n        @media (max-width:600px) {\r\n\r\n            .hero {\r\n                padding: 0 0 46px;\r\n            }\r\n\r\n            .crumb {\r\n                padding: 50px 0 14px;\r\n                font-size: 9px;\r\n                letter-spacing: .12em;\r\n            }\r\n\r\n            .hero-grid {\r\n                gap: 28px;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n\r\n    <!-- ================================================================\r\n     BREADCRUMB\r\n     ================================================================ -->\r\n    \r\n\r\n    <!-- ================================================================\r\n     HERO \u2014 Category cover\r\n     ================================================================ -->\r\n    <section class=\"hero\" data-screen-label=\"01 Hero\">\r\n        <div class=\"wrap crumb\">\r\n        <a href=\"\/\">Home<\/a>\r\n        <span class=\"sep\">\/<\/span>\r\n        <b>Government and Public Sector<\/b>\r\n    <\/div>\r\n        <div class=\"wrap hero-grid\">\r\n\r\n            <div class=\"hero-l\">\r\n                <!-- EDIT: category number + name -->\r\n                <div class=\"hero-cat\"><span class=\"num\">07 \/ 12<\/span><span>Case Studiesr<\/span><\/div>\r\n                <h1>LED Screen for Government and Public Sector<\/h1>\r\n                <!-- EDIT: category intro from copy doc -->\r\n                <p class=\"hero-intro\"> StarLED delivers public-sector-compliant LED installations for\r\n                    government buildings, from high-traffic corridor wayfinding to architecture-integrated federal\r\n                    facade builds.<\/p>\r\n                <div class=\"hero-cta-row\">\r\n                    <a href=\"#case-studies\" class=\"btn btn-primary\">See the 2 case studies <span class=\"arr\"><\/span><\/a>\r\n                    <a href=\"https:\/\/starleddisplay.com\/contact-us\/\" class=\"btn btn-ghost\">Brief us on your store <span\r\n                            class=\"arr\"><\/span><\/a>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Right side: scrollable index of all case studies in this category.\r\n         EDIT: add or remove .hero-thumb blocks to match case study count below.\r\n         The href anchors must match the section ids further down. -->\r\n            <div class=\"hero-thumbs\">\r\n                <a class=\"hero-thumb\" href=\"#cs-01\"><span class=\"ht-vis 1\">\r\n                        <img decoding=\"async\" src=\"https:\/\/starleddisplay.com\/wp-content\/uploads\/2026\/05\/1234-1.png\"\r\n                            alt=\"Thumbnail for case study 1\" loading=\"lazy\">\r\n                    <\/span><span class=\"ht-body\"><span class=\"ht-num\">01 Portrait <\/span><span class=\"ht-title\">Dubai\r\n                            Courts<\/span><span class=\"ht-meta\"> COB P2.5-P3\r\n                            \u00b7 DUBAI<\/span><\/span><span class=\"ht-arrow\"><svg viewBox=\"0 0 24 24\" fill=\"none\"\r\n                            stroke=\"currentColor\" stroke-width=\"2\">\r\n                            <path d=\"M5 12h14M13 6l6 6-6 6\" \/>\r\n                        <\/svg><\/span><\/a>\r\n                <a class=\"hero-thumb\" href=\"#cs-02\"><span class=\"ht-vis \">\r\n                        <img decoding=\"async\" src=\"https:\/\/starleddisplay.com\/wp-content\/uploads\/2026\/05\/Picture24.png\" alt=\"\">\r\n                    <\/span><span class=\"ht-body\"><span class=\"ht-num\">02 \u00b7 Building Facade<\/span><span class=\"ht-title\">\r\n                            Ministry\r\n                            of Labor Muhaisanah<\/span><span class=\"ht-meta\"> AOX P8-P10 \u00b7\r\n                            Dubai<\/span><\/span><span class=\"ht-arrow\"><svg viewBox=\"0 0 24 24\" fill=\"none\"\r\n                            stroke=\"currentColor\" stroke-width=\"2\">\r\n                            <path d=\"M5 12h14M13 6l6 6-6 6\" \/>\r\n                        <\/svg><\/span><\/a>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n        <!-- EDIT: category-level stats -->\r\n        <div class=\"wrap\">\r\n            <div class=\"hero-ribbon\">\r\n                <div><span class=\"k\">Case studies<\/span><span class=\"v\">02<\/span><span class=\"sub\">In the government and\r\n                        public sector\r\n                        services\r\n                        category<\/span>\r\n                <\/div>\r\n                <div><span class=\"k\">Pixel pitches<\/span><span class=\"v\">P2.5-P3 & P8-P10 <\/span><span\r\n                        class=\"sub\">Indoor & Outdoor\r\n                    <\/span><\/div>\r\n                <div><span class=\"k\">Peak brightness<\/span><span class=\"v\">7,500<span class=\"u\">nits<\/span><\/span><span\r\n                        class=\"sub\">Outdoor LED<\/span><\/div>\r\n                <div><span class=\"k\">Refresh floor<\/span><span class=\"v\">3,840<span class=\"u\">Hz<\/span><\/span><span\r\n                        class=\"sub\">Camera-clean indoor<\/span><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- ================================================================\r\n     CASE STUDIES  \u2014  REPEATABLE BLOCK\r\n     ----------------------------------------------------------------\r\n     To ADD a case study: copy any <article class=\"cs\">...<\/article>\r\n     block and paste it below the last one. Increment the id, the\r\n     .cs-num, and add .cs--rev on every 2nd block for alternating\r\n     layout. To REMOVE a case study: delete its <article> entirely.\r\n\r\n     If the category has only 1 case study, swap class=\"cs\" for\r\n     class=\"cs cs--solo\" \u2014 see the comment near the bottom.\r\n     ================================================================ -->\r\n    <section class=\"cases\" id=\"case-studies\" data-screen-label=\"02 Case Studies\">\r\n        <div class=\"wrap\">\r\n\r\n            <div class=\"cases-head\">\r\n                <div>\r\n                    <span class=\"eyebrow\">The work<\/span>\r\n                    <h2 style=\"margin-top:14px\">Two government and public sector installs, two different\r\n                        problems<br><span class=\"accent\">solved\r\n                            on-site.<\/span><\/h2>\r\n                <\/div>\r\n                <p>Every case below is a real StarLED project across the Dubai. Same delivery team, same Novastar\r\n                    control\r\n                    standard, calibrated for the conditions outside the building, not the catalogue.<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"cs-list\">\r\n\r\n                <!-- ===== CASE STUDY 01 ===== -->\r\n                <article class=\"cs\" id=\"cs-01\">\r\n                    <div class=\"cs-vis\">\r\n                        <div class=\"cs-screen palette-1\"><\/div>\r\n                        <span class=\"corner tl\"><\/span><span class=\"corner tr\"><\/span><span\r\n                            class=\"corner bl\"><\/span><span class=\"corner br\"><\/span>\r\n                        <span class=\"label\">01 \u00b7 Indoor \u00b7 LIVE<\/span>\r\n                        <span class=\"spec-chip\"><b>P2.5-P3<\/b>\u00b7 COB <b><\/b><\/span>\r\n                        <div class=\"cs-placeholder\">\r\n                            <img decoding=\"async\" src=\"https:\/\/starleddisplay.com\/wp-content\/uploads\/2026\/05\/1234-1.png\" alt=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"cs-body\">\r\n                        <span class=\"cs-num\">01<\/span>\r\n                        <div class=\"cs-meta-row\">\r\n                            <span class=\"cs-meta-chip\"> Corridor and Interactive Portrait LED<\/span>\r\n                            <span class=\"cs-meta-chip plain\">DUBAI<\/span>\r\n                            <span class=\"cs-meta-chip red\">COB Series \u00b7 P2.5-P3<\/span>\r\n                        <\/div>\r\n                        <h3 class=\"cs-title\">Dubai Courts \u2014 Corridor and Interactive Portrait <span class=\"accent\">\r\n                                LED<\/span>\r\n                            ,DUBAI<\/h3>\r\n                        <span class=\"cs-impact-label\">The impact<\/span>\r\n                        <p class=\"cs-impact\"> A high-volume public building with anxious visitors needed bilingual\r\n                            wayfinding\r\n                            and a staff recognition programme without the EMI or glare issues that disqualify standard\r\n                            commercial LED from government procurement, so StarLED installed <a\r\n                                href=\"https:\/\/starleddisplay.com\/indoor-displays\/cob-led-displays\/\">\r\n                                P2.5 to P3 COB Series\r\n                                panels\r\n                            <\/a> with anti-glare, scratch-resistant surfaces across key circulation lines and reception\r\n                            points, all managed from one Novastar dashboard. Visitor-directed questions to staff dropped\r\n                            immediately, and staff morale lifted visibly as the recognition programme began running on\r\n                            screen.<\/p>\r\n                        <div class=\"cs-specs\">\r\n                            <div><span class=\"k\">Anti<\/span><span class=\"v\">Glare<span class=\"u\"><\/span><\/span><\/div>\r\n                            <div><span class=\"k\">Scratch-Resistant<\/span><span class=\"v\">LED<\/span><\/div>\r\n                            <div><span class=\"k\">CMS<\/span><span class=\"v\">Novastar<\/span><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/article>\r\n\r\n                <!-- ===== CASE STUDY 02 ===== -->\r\n                <article class=\"cs cs--rev\" id=\"cs-02\">\r\n                    <div class=\"cs-vis\">\r\n                        <div class=\"cs-screen palette-2\"><\/div>\r\n                        <span class=\"corner tl\"><\/span><span class=\"corner tr\"><\/span><span\r\n                            class=\"corner bl\"><\/span><span class=\"corner br\"><\/span>\r\n                        <span class=\"label\">02 \u00b7 OUTDOOR \u00b7 Outdoor Building Facade<\/span>\r\n                        <span class=\"spec-chip\"><b>P8-P10<\/b> XAO \u00b7 <b>Mounted Flush<\/b><\/span>\r\n                        <div class=\"cs-placeholder\">\r\n                            <img decoding=\"async\" src=\"https:\/\/starleddisplay.com\/wp-content\/uploads\/2026\/05\/Picture24.png\" alt=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"cs-body\">\r\n                        <span class=\"cs-num\">02<\/span>\r\n                        <div class=\"cs-meta-row\">\r\n                            <span class=\"cs-meta-chip\"> Outdoor Building Facade<\/span>\r\n                            <span class=\"cs-meta-chip plain\">Dubai<\/span>\r\n                            <span class=\"cs-meta-chip red\">XAO Series \u00b7 P8-P10<\/span>\r\n                        <\/div>\r\n                        <h3 class=\"cs-title\"> Ministry of Labor Muhaisanah \u2014 Building Facade <span\r\n                                class=\"accent\"><\/span> LED,\r\n                            Dubai<\/h3>\r\n                        <span class=\"cs-impact-label\">The impact<\/span>\r\n                        <p class=\"cs-impact\"> A federal government building with distinctive ornamental concrete work\r\n                            needed a\r\n                            facade screen that integrated with the existing architecture for National Day and public\r\n                            communications campaigns, not one that sat on top of it, so StarLED engineered\r\n                            <a href=\"https:\/\/starleddisplay.com\/outdoor-displays\/xao-series-black-rhino\/\">\r\n\r\n                                P8 to P10 XAO\r\n                                Series cabinets<\/a> at 7,500-plus nits mounted flush with the concrete reveal line using\r\n                            a concealed\r\n                            mounting system routed within the existing building envelope. The building now broadcasts\r\n                            federal campaigns daily and reads as a modern public institution from street level.\r\n                        <\/p>\r\n                        <div class=\"cs-specs\">\r\n                            <div><span class=\"k\">Pixel pitch<\/span><span class=\"v\">P8-P10<\/span><\/div>\r\n                            <div><span class=\"k\">Brightness<\/span><span class=\"v\">7,500 nits<\/span><\/div>\r\n                            <div><span class=\"k\">Building<\/span><span class=\"v\">Facade<\/span><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/article>\r\n\r\n\r\n\r\n                <!--\r\n        ============================================================\r\n        HOW TO ADD ANOTHER CASE STUDY\r\n        ============================================================\r\n        1. Copy any <article class=\"cs\">...<\/article> above.\r\n        2. Paste it below this comment.\r\n        3. Increment the id (e.g. cs-09) and .cs-num (e.g. 09).\r\n        4. Toggle the .cs--rev class for alternating layout.\r\n        5. Pick a .palette-N class on .cs-screen (1-8 cycle).\r\n\r\n        HOW TO REMOVE A CASE STUDY\r\n        Delete the whole <article>...<\/article> block. Then re-check\r\n        the remaining ones still alternate (.cs \/ .cs--rev).\r\n\r\n        IF THE CATEGORY HAS ONLY ONE CASE STUDY\r\n        Change class=\"cs\" to class=\"cs cs--solo\". That switches the\r\n        layout to a single centered card instead of side-by-side.\r\n        Also drop .cs--rev. The hero stats and hero strip should\r\n        reflect \"01\" case study.\r\n\r\n        HOW TO REPLACE THE PLACEHOLDER VISUAL WITH A REAL PHOTO\r\n        Inside the .cs-vis block, swap:\r\n          <div class=\"cs-screen palette-N\"><\/div>\r\n          <div class=\"cs-placeholder\">...<\/div>\r\n        for:\r\n          <img decoding=\"async\" class=\"cs-screen\" src=\"path\/to\/photo.jpg\" alt=\"...\">\r\n        Keep the .corner \/ .label \/ .spec-chip spans intact \u2014 they\r\n        overlay the image.\r\n        ============================================================\r\n      -->\r\n\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- ================================================================\r\n     MID-PAGE CTA\r\n     ================================================================ -->\r\n    <section class=\"cta-mid\" data-screen-label=\"03 CTA\">\r\n        <div class=\"wrap\">\r\n            <div class=\"cta-card\">\r\n                <div class=\"l\">\r\n                    <span class=\"eyebrow red\">Your store next<\/span>\r\n                    <h3>Same team, same calibration discipline \u2014 for <span class=\"accent\">your storefront<\/span>.<\/h3>\r\n                    <p>Send us a photo of the location and the viewing distance. We'll come back with a fixed written\r\n                        quote, the\r\n                        recommended pixel pitch, and the brightness spec for your road, mall, or interior \u2014 no\r\n                        estimates, no\r\n                        guesswork.<\/p>\r\n                <\/div>\r\n                <div class=\"r\">\r\n                    <a href=\"https:\/\/starleddisplay.com\/contact-us\/\" class=\"btn btn-primary\">Get a fixed quote <span\r\n                            class=\"arr\"><\/span><\/a>\r\n                    <a href=\"https:\/\/starleddisplay.com\/projects\/\" class=\"btn btn-ghost\">More categories <span class=\"arr\"><\/span><\/a>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- ================================================================\r\n     FAQ \u2014 placeholder Q&A per category (edit later)\r\n     ================================================================ -->\r\n    <section class=\"faq\" id=\"faq\" data-screen-label=\"04 FAQ\">\r\n        <div class=\"wrap faq-grid\">\r\n            <div class=\"faq-side\">\r\n                <span class=\"eyebrow\">FAQ \u00b7Government and Public Sector<\/span>\r\n                <h2>LED Solutions for Government and Public Sector, <span class=\"accent\">answered<\/span>.<\/h2>\r\n                <p>Five questions we hear from Government and Public Sector clients across the Dubai \u2014 outdoor\r\n                    brightness, indoor\r\n                    brightness, pixel pitch, how long it takes to build a stage,\r\n                    and what an install actually costs.<\/p>\r\n                <div class=\"faq-help\">\r\n\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"faq-list\" id=\"faqList\">\r\n\r\n                <div class=\"faq-item open\">\r\n                    <button class=\"faq-q\" aria-expanded=\"true\">\r\n                        Why is COB LED specified for government building corridors and public spaces? <span\r\n                            class=\"faq-toggle\" aria-hidden=\"true\"><\/span>\r\n                    <\/button>\r\n                    <div class=\"faq-a\">\r\n                        <p>COB LEDs produce a scratch-resistant, anti-glare integrated surface that meets the durability\r\n                            requirements of high-footfall public buildings. In government corridors operating across\r\n                            long daily hours, COB panels resist dust ingress without regular cleaning, produce soft even\r\n                            light that does not cause visual fatigue for staff, and comply with the low-EMI and\r\n                            anti-glare requirements that UAE public-sector procurement specifies for interior LED.\r\n                        <\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"faq-item\">\r\n                    <button class=\"faq-q\" aria-expanded=\"false\">\r\n                        What compliance requirements apply to LED installed in UAE public-sector buildings? <span\r\n                            class=\"faq-toggle\" aria-hidden=\"true\"><\/span>\r\n                    <\/button>\r\n                    <div class=\"faq-a\">\r\n                        <p>UAE public-sector LED installations require low-EMI certification, anti-glare surface\r\n                            treatment, scratch-resistant panel faces, fire-rated cable runs, and structural sign-off by\r\n                            building facilities management. StarLED coordinates the full approvals process with the\r\n                            government procurement team before installation begins, and all documentation is handed over\r\n                            to the building's maintenance team on completion.\r\n                        <\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"faq-item\">\r\n                    <button class=\"faq-q\" aria-expanded=\"false\">\r\n                        Can LED screens handle bilingual Arabic-English wayfinding in government buildings? <span\r\n                            class=\"faq-toggle\" aria-hidden=\"true\"><\/span>\r\n                    <\/button>\r\n                    <div class=\"faq-a\">\r\n                        <p>Yes. Fine-pitch LED at P2.5 to P3 renders both Arabic and English text with equal clarity at\r\n                            standard corridor viewing distances. The Novastar CMS manages wayfinding schedules including\r\n                            department changes, hearing room updates, and visitor notices across every corridor screen\r\n                            simultaneously, updated from one central dashboard without requiring on-site staff to\r\n                            manually change any display.\r\n                        <\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"faq-item\">\r\n                    <button class=\"faq-q\" aria-expanded=\"false\">\r\n                        Can LED integrate into an existing government building facade without altering the architecture?\r\n                        <span class=\"faq-toggle\" aria-hidden=\"true\"><\/span>\r\n                    <\/button>\r\n                    <div class=\"faq-a\">\r\n                        <p>Yes, when engineered from the fabrication stage. StarLED designs the mounting system to\r\n                            respect existing architectural features including concrete reveals, ornamental facings, and\r\n                            structural mullions, so the LED cabinet sits flush with the intended architectural line. The\r\n                            display reads as a designed facade element rather than a retrofit, which is the standard\r\n                            required for federal government buildings where architectural character is a regulated\r\n                            feature.\r\n                        <\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n\r\n                <div class=\"faq-item\">\r\n                    <button class=\"faq-q\" aria-expanded=\"false\">\r\n                        Can federal campaigns be scheduled across multiple government buildings simultaneously?\r\n                        <span class=\"faq-toggle\" aria-hidden=\"true\"><\/span>\r\n                    <\/button>\r\n                    <div class=\"faq-a\">\r\n                        <p>Yes. Novastar cloud CMS manages content across an unlimited number of screens and sites from\r\n                            a single operator dashboard. National Day campaigns, federal awareness drives, and daily\r\n                            public information can be scheduled to go live across every ministry facade at the same\r\n                            time, ensuring message consistency across the full federal estate without any site-by-site\r\n                            management.\r\n                        <\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n\r\n\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n\r\n\r\n    <script>\r\n        \/\/ FAQ accordion\r\n        document.querySelectorAll('.faq-q').forEach(btn => {\r\n            btn.addEventListener('click', () => {\r\n                const item = btn.closest('.faq-item');\r\n                const open = item.classList.toggle('open');\r\n                btn.setAttribute('aria-expanded', open ? 'true' : 'false');\r\n            });\r\n        });\r\n\r\n        \/\/ Smooth-scroll for in-page anchors (hero thumbs to case studies)\r\n        document.querySelectorAll('a[href^=\"#\"]').forEach(a => {\r\n            a.addEventListener('click', (e) => {\r\n                const id = a.getAttribute('href');\r\n                if (id.length < 2) return;\r\n                const target = document.querySelector(id);\r\n                if (!target) return;\r\n                e.preventDefault();\r\n                const top = target.getBoundingClientRect().top + window.scrollY - 80;\r\n                window.scrollTo({ top, behavior: 'smooth' });\r\n            });\r\n        });\r\n    <\/script>\r\n\r\n<\/body>\r\n\r\n<\/html>\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>Government and Public Sector Case Studies \u2014 StarLED Dubai Home \/ Government and Public Sector 07 \/ 12Case Studiesr LED [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"content-type":"","inline_featured_image":false,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-26607","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Case Studies - Government and Public Sector - StarLED<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/starleddisplay.com\/ar\/government-led-screen\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Case Studies - Government and Public Sector - StarLED\" \/>\n<meta property=\"og:description\" content=\"Government and Public Sector Case Studies \u2014 StarLED Dubai Home \/ Government and Public Sector 07 \/ 12Case Studiesr LED [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/starleddisplay.com\/ar\/government-led-screen\/\" \/>\n<meta property=\"og:site_name\" content=\"StarLED\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-27T05:41:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/starleddisplay.com\/wp-content\/uploads\/2026\/05\/1234-1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"22 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/starleddisplay.com\\\/government-led-screen\\\/\",\"url\":\"https:\\\/\\\/starleddisplay.com\\\/government-led-screen\\\/\",\"name\":\"Case Studies - Government and Public Sector - StarLED\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/starleddisplay.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/starleddisplay.com\\\/government-led-screen\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/starleddisplay.com\\\/government-led-screen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/starleddisplay.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/1234-1.png\",\"datePublished\":\"2026-05-26T12:32:40+00:00\",\"dateModified\":\"2026-05-27T05:41:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/starleddisplay.com\\\/government-led-screen\\\/#breadcrumb\"},\"inLanguage\":\"ar-AE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/starleddisplay.com\\\/government-led-screen\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ar-AE\",\"@id\":\"https:\\\/\\\/starleddisplay.com\\\/government-led-screen\\\/#primaryimage\",\"url\":\"https:\\\/\\\/starleddisplay.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/1234-1.png\",\"contentUrl\":\"https:\\\/\\\/starleddisplay.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/1234-1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/starleddisplay.com\\\/government-led-screen\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/starleddisplay.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Case Studies &#8211; Government and Public Sector\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/starleddisplay.com\\\/#website\",\"url\":\"https:\\\/\\\/starleddisplay.com\\\/\",\"name\":\"StarLED Display\",\"description\":\"Premier LED display solutions\",\"publisher\":{\"@id\":\"https:\\\/\\\/starleddisplay.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/starleddisplay.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar-AE\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/starleddisplay.com\\\/#organization\",\"name\":\"StarLED Display\",\"url\":\"https:\\\/\\\/starleddisplay.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar-AE\",\"@id\":\"https:\\\/\\\/starleddisplay.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/starleddisplay.com\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/cropped-cropped-White-black.png\",\"contentUrl\":\"https:\\\/\\\/starleddisplay.com\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/cropped-cropped-White-black.png\",\"width\":512,\"height\":171,\"caption\":\"StarLED Display\"},\"image\":{\"@id\":\"https:\\\/\\\/starleddisplay.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/Starleddisplay\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/starsign-uae\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Case Studies - Government and Public Sector - StarLED","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/starleddisplay.com\/ar\/government-led-screen\/","og_locale":"ar_AR","og_type":"article","og_title":"Case Studies - Government and Public Sector - StarLED","og_description":"Government and Public Sector Case Studies \u2014 StarLED Dubai Home \/ Government and Public Sector 07 \/ 12Case Studiesr LED [&hellip;]","og_url":"https:\/\/starleddisplay.com\/ar\/government-led-screen\/","og_site_name":"StarLED","article_modified_time":"2026-05-27T05:41:09+00:00","og_image":[{"url":"https:\/\/starleddisplay.com\/wp-content\/uploads\/2026\/05\/1234-1.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"22 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/starleddisplay.com\/government-led-screen\/","url":"https:\/\/starleddisplay.com\/government-led-screen\/","name":"Case Studies - Government and Public Sector - StarLED","isPartOf":{"@id":"https:\/\/starleddisplay.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/starleddisplay.com\/government-led-screen\/#primaryimage"},"image":{"@id":"https:\/\/starleddisplay.com\/government-led-screen\/#primaryimage"},"thumbnailUrl":"https:\/\/starleddisplay.com\/wp-content\/uploads\/2026\/05\/1234-1.png","datePublished":"2026-05-26T12:32:40+00:00","dateModified":"2026-05-27T05:41:09+00:00","breadcrumb":{"@id":"https:\/\/starleddisplay.com\/government-led-screen\/#breadcrumb"},"inLanguage":"ar-AE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/starleddisplay.com\/government-led-screen\/"]}]},{"@type":"ImageObject","inLanguage":"ar-AE","@id":"https:\/\/starleddisplay.com\/government-led-screen\/#primaryimage","url":"https:\/\/starleddisplay.com\/wp-content\/uploads\/2026\/05\/1234-1.png","contentUrl":"https:\/\/starleddisplay.com\/wp-content\/uploads\/2026\/05\/1234-1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/starleddisplay.com\/government-led-screen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/starleddisplay.com\/"},{"@type":"ListItem","position":2,"name":"Case Studies &#8211; Government and Public Sector"}]},{"@type":"WebSite","@id":"https:\/\/starleddisplay.com\/#website","url":"https:\/\/starleddisplay.com\/","name":"StarLED Display","description":"Premier LED display solutions","publisher":{"@id":"https:\/\/starleddisplay.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/starleddisplay.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar-AE"},{"@type":"Organization","@id":"https:\/\/starleddisplay.com\/#organization","name":"StarLED Display","url":"https:\/\/starleddisplay.com\/","logo":{"@type":"ImageObject","inLanguage":"ar-AE","@id":"https:\/\/starleddisplay.com\/#\/schema\/logo\/image\/","url":"https:\/\/starleddisplay.com\/wp-content\/uploads\/2023\/06\/cropped-cropped-White-black.png","contentUrl":"https:\/\/starleddisplay.com\/wp-content\/uploads\/2023\/06\/cropped-cropped-White-black.png","width":512,"height":171,"caption":"StarLED Display"},"image":{"@id":"https:\/\/starleddisplay.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/Starleddisplay\/","https:\/\/www.linkedin.com\/company\/starsign-uae"]}]}},"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"Sameer Kassim","author_link":"https:\/\/starleddisplay.com\/ar\/blog\/author\/sameer\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"Government and Public Sector Case Studies \u2014 StarLED Dubai Home \/ Government and Public Sector 07 \/ 12Case Studiesr LED [&hellip;]","_links":{"self":[{"href":"https:\/\/starleddisplay.com\/ar\/wp-json\/wp\/v2\/pages\/26607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/starleddisplay.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/starleddisplay.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/starleddisplay.com\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/starleddisplay.com\/ar\/wp-json\/wp\/v2\/comments?post=26607"}],"version-history":[{"count":13,"href":"https:\/\/starleddisplay.com\/ar\/wp-json\/wp\/v2\/pages\/26607\/revisions"}],"predecessor-version":[{"id":26759,"href":"https:\/\/starleddisplay.com\/ar\/wp-json\/wp\/v2\/pages\/26607\/revisions\/26759"}],"wp:attachment":[{"href":"https:\/\/starleddisplay.com\/ar\/wp-json\/wp\/v2\/media?parent=26607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}