{"id":60,"date":"2026-08-26T02:02:55","date_gmt":"2026-08-26T02:02:55","guid":{"rendered":"https:\/\/securityinstallpros.co.za\/?page_id=60"},"modified":"2026-08-26T02:04:58","modified_gmt":"2026-08-26T02:04:58","slug":"elementor-60","status":"publish","type":"page","link":"https:\/\/securityinstallpros.co.za\/","title":{"rendered":"Elementor #60"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nPerimeter \u2014 Gate Motors, Electric Fencing & CCTV<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root{\r\n --ink:#0E1512;\r\n --panel:#161F1B;\r\n --panel-line:#2A362F;\r\n --fog:#93A79B;\r\n --fog-dim:#5C6D62;\r\n --paper:#F1F4F0;\r\n --hazard:#E8B93A;\r\n --hazard-dim:#7A6220;\r\n --stripe-dark:#1A1F16;\r\n }\r\n\r\n *{ box-sizing:border-box; margin:0; padding:0; }\r\n html{ scroll-behavior:smooth; }\r\n body{\r\n background:var(--ink); color:var(--paper);\r\n font-family:'Inter', sans-serif;\r\n overflow-x:hidden;\r\n -webkit-font-smoothing:antialiased;\r\n }\r\n\r\n .grain{\r\n position:fixed; inset:0; pointer-events:none; z-index:50;\r\n opacity:0.045; mix-blend-mode:overlay;\r\n background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n }\r\n\r\n \/* ---------- nav ---------- *\/\r\n nav{\r\n position:relative; z-index:30;\r\n display:flex; align-items:center; justify-content:space-between;\r\n padding:28px 5vw 0;\r\n }\r\n .logo{\r\n display:flex; align-items:center; gap:10px;\r\n font-family:'Oswald', sans-serif;\r\n font-weight:600; font-size:1.15rem; letter-spacing:0.03em; text-transform:uppercase;\r\n }\r\n .logo svg{ width:22px; height:22px; }\r\n .nav-links{\r\n display:flex; gap:30px;\r\n font-family:'JetBrains Mono', monospace;\r\n font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase;\r\n color:var(--fog);\r\n }\r\n .nav-links a{ color:inherit; text-decoration:none; transition:color .2s ease; }\r\n .nav-links a:hover{ color:var(--paper); }\r\n .nav-cta{\r\n font-family:'JetBrains Mono', monospace;\r\n font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase;\r\n color:var(--paper); text-decoration:none;\r\n border:1px solid var(--panel-line);\r\n padding:10px 18px; border-radius:2px;\r\n transition:border-color .25s ease, color .25s ease, background .25s ease;\r\n white-space:nowrap;\r\n }\r\n .nav-cta:hover{ border-color:var(--hazard); color:var(--ink); background:var(--hazard); }\r\n\r\n @media (max-width:820px){ .nav-links{ display:none; } }\r\n\r\n \/* ---------- hero ---------- *\/\r\n .hero{\r\n position:relative;\r\n min-height:92vh;\r\n display:flex; align-items:center;\r\n padding:0 5vw;\r\n overflow:hidden;\r\n }\r\n .vignette{\r\n position:absolute; inset:0; pointer-events:none; z-index:5;\r\n background:radial-gradient(ellipse at 70% 45%, transparent 0%, transparent 38%, rgba(14,21,18,0.75) 100%);\r\n }\r\n\r\n .hud{\r\n position:absolute; top:110px; left:5vw; z-index:20;\r\n font-family:'JetBrains Mono', monospace;\r\n font-size:0.7rem; letter-spacing:0.06em;\r\n color:var(--fog-dim);\r\n display:flex; flex-direction:column; gap:6px;\r\n }\r\n .hud-row{ display:flex; align-items:center; gap:8px; }\r\n .dot{\r\n width:6px; height:6px; border-radius:50%;\r\n background:var(--hazard); box-shadow:0 0 8px 1px var(--hazard);\r\n animation:pulse 2.4s ease-in-out infinite;\r\n }\r\n @keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }\r\n .hud-status{ color:var(--fog); }\r\n .hud-status b{ color:var(--paper); font-weight:500; }\r\n\r\n .hero-inner{\r\n position:relative; z-index:20;\r\n max-width:620px; padding-top:36px;\r\n }\r\n .eyebrow{\r\n font-family:'JetBrains Mono', monospace;\r\n font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;\r\n color:var(--hazard);\r\n display:flex; align-items:center; gap:10px;\r\n margin-bottom:22px;\r\n }\r\n .eyebrow::before{ content:''; width:26px; height:1px; background:var(--hazard); }\r\n\r\n h1{\r\n font-family:'Oswald', sans-serif;\r\n font-weight:600;\r\n font-size:clamp(2.3rem, 5vw, 3.9rem);\r\n line-height:1.08;\r\n letter-spacing:0.005em;\r\n text-transform:uppercase;\r\n color:var(--paper);\r\n }\r\n h1 .accent{ color:var(--hazard); }\r\n\r\n .sub{\r\n margin-top:24px;\r\n font-size:1.06rem; line-height:1.65;\r\n color:var(--fog);\r\n max-width:520px;\r\n }\r\n\r\n .cta-block{\r\n margin-top:38px;\r\n display:flex; flex-direction:column; align-items:flex-start; gap:14px;\r\n }\r\n .cta-primary{\r\n font-family:'Oswald', sans-serif;\r\n font-weight:500; font-size:0.95rem; letter-spacing:0.03em; text-transform:uppercase;\r\n color:var(--ink);\r\n background:var(--hazard);\r\n border:none; padding:18px 30px;\r\n border-radius:2px;\r\n cursor:pointer;\r\n display:inline-flex; align-items:center; gap:12px;\r\n transition:transform .25s ease, box-shadow .25s ease, background .25s ease;\r\n }\r\n .cta-primary:hover{\r\n transform:translateY(-2px);\r\n background:#F3CC5F;\r\n box-shadow:0 12px 28px -8px rgba(232,185,58,0.4);\r\n }\r\n .cta-primary svg{ width:16px; height:16px; transition:transform .25s ease; }\r\n .cta-primary:hover svg{ transform:translateX(3px); }\r\n .cta-micro{ font-size:0.82rem; color:var(--fog-dim); }\r\n\r\n .see-more{\r\n margin-top:8px;\r\n font-family:'JetBrains Mono', monospace;\r\n font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;\r\n color:var(--fog-dim); text-decoration:none;\r\n display:inline-flex; align-items:center; gap:6px;\r\n transition:color .2s ease;\r\n }\r\n .see-more:hover{ color:var(--hazard); }\r\n\r\n \/* ---------- hero boundary scene ---------- *\/\r\n .hscene{\r\n position:absolute; right:-6vw; top:50%; transform:translateY(-50%);\r\n width:min(50vw, 640px); z-index:10; opacity:0.9;\r\n }\r\n .hscene svg{ width:100%; height:auto; display:block; }\r\n .hfence{\r\n stroke-dasharray:10 8;\r\n animation:marchAnts 3.5s linear infinite;\r\n }\r\n @keyframes marchAnts{ to{ stroke-dashoffset:-72; } }\r\n .hglyph{ animation:sensorPulse 3s ease-in-out infinite; transform-origin:center; }\r\n .hglyph.d2{ animation-delay:1s; }\r\n .hglyph.d3{ animation-delay:2s; }\r\n @keyframes sensorPulse{\r\n 0%,100%{ opacity:0.55; } 50%{ opacity:1; }\r\n }\r\n\r\n @media (max-width:880px){\r\n .hscene{ opacity:0.14; right:-24vw; width:100vw; z-index:1; }\r\n .hero-inner{ max-width:100%; }\r\n .hud{ top:92px; }\r\n nav{ padding-top:22px; }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }\r\n }\r\n\r\n \/* ============ TRUST BAR ============ *\/\r\n .trust{\r\n position:relative; z-index:20;\r\n border-top:1px solid var(--panel-line);\r\n border-bottom:1px solid var(--panel-line);\r\n background:var(--panel);\r\n }\r\n .trust-stats{\r\n display:grid;\r\n grid-template-columns:repeat(4, 1fr);\r\n max-width:1180px; margin:0 auto;\r\n }\r\n .stat{\r\n padding:38px 24px;\r\n text-align:left;\r\n border-left:1px solid var(--panel-line);\r\n }\r\n .stat:first-child{ border-left:none; }\r\n .stat-num{\r\n font-family:'Oswald', sans-serif;\r\n font-weight:600;\r\n font-size:clamp(1.6rem, 3vw, 2.3rem);\r\n color:var(--paper);\r\n letter-spacing:0.005em;\r\n display:flex; align-items:baseline; gap:2px;\r\n }\r\n .stat-num .unit{ font-size:0.55em; color:var(--hazard); font-weight:600; }\r\n .stat-label{\r\n margin-top:6px;\r\n font-family:'JetBrains Mono', monospace;\r\n font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase;\r\n color:var(--fog-dim);\r\n }\r\n .badges{\r\n display:flex; flex-wrap:wrap; gap:10px;\r\n max-width:1180px; margin:0 auto;\r\n padding:20px 24px 32px;\r\n border-top:1px solid var(--panel-line);\r\n }\r\n .badge{\r\n font-family:'JetBrains Mono', monospace;\r\n font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase;\r\n color:var(--fog);\r\n border:1px solid var(--panel-line);\r\n padding:8px 14px; border-radius:2px;\r\n display:flex; align-items:center; gap:8px;\r\n }\r\n .badge svg{ width:12px; height:12px; flex-shrink:0; }\r\n\r\n @media (max-width:880px){\r\n .trust-stats{ grid-template-columns:repeat(2, 1fr); }\r\n .stat:nth-child(3){ border-left:none; }\r\n }\r\n\r\n \/* ============ INTERACTIVE PERIMETER DIAGRAM ============ *\/\r\n .demo{\r\n position:relative; z-index:20;\r\n padding:110px 5vw 130px;\r\n max-width:1280px; margin:0 auto;\r\n border-top:1px solid var(--panel-line);\r\n }\r\n .demo-head{ max-width:620px; margin-bottom:56px; }\r\n .demo-eyebrow{\r\n font-family:'JetBrains Mono', monospace;\r\n font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;\r\n color:var(--hazard);\r\n display:flex; align-items:center; gap:10px;\r\n margin-bottom:18px;\r\n }\r\n .demo-eyebrow::before{ content:''; width:26px; height:1px; background:var(--hazard); }\r\n .demo h2{\r\n font-family:'Oswald', sans-serif;\r\n font-weight:600; text-transform:uppercase;\r\n font-size:clamp(1.7rem, 3.2vw, 2.5rem);\r\n line-height:1.15; letter-spacing:0.005em;\r\n color:var(--paper);\r\n }\r\n .demo-sub{ margin-top:18px; font-size:1rem; line-height:1.65; color:var(--fog); }\r\n\r\n .demo-grid{\r\n display:grid;\r\n grid-template-columns:1.1fr 0.9fr;\r\n gap:56px; align-items:start;\r\n }\r\n\r\n .plan-hint{\r\n font-family:'JetBrains Mono', monospace;\r\n font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase;\r\n color:var(--fog-dim);\r\n display:flex; align-items:center; gap:8px;\r\n margin-bottom:16px;\r\n }\r\n .plan-hint .dot{ animation:pulse 2.4s ease-in-out infinite; }\r\n\r\n .plot{\r\n width:100%; height:auto; display:block;\r\n background:var(--panel);\r\n border:1px solid var(--panel-line);\r\n border-radius:2px;\r\n }\r\n\r\n .zone-hit{\r\n fill:rgba(0,0,0,0);\r\n cursor:pointer;\r\n transition:fill .3s ease;\r\n }\r\n .zone-hit:hover{ fill:rgba(232,185,58,0.06); }\r\n .zone-hit.active{ fill:rgba(232,185,58,0.10); }\r\n\r\n .boundary{\r\n stroke:var(--fog-dim);\r\n stroke-width:2.5;\r\n fill:none;\r\n stroke-dasharray:10 8;\r\n animation:marchAnts 4s linear infinite;\r\n }\r\n .boundary.zone-active-line{\r\n stroke:var(--hazard);\r\n filter:drop-shadow(0 0 4px rgba(232,185,58,0.5));\r\n }\r\n\r\n .house{ fill:#1D2620; stroke:var(--panel-line); stroke-width:1.5; }\r\n .gate-leaf{ fill:var(--fog-dim); transition:fill .3s ease; }\r\n .zone-hit.active ~ .gate-leaf{ fill:var(--hazard); }\r\n\r\n .zone-label{\r\n font-family:'JetBrains Mono', monospace;\r\n font-size:10px; letter-spacing:0.04em; text-transform:uppercase;\r\n fill:var(--fog-dim);\r\n pointer-events:none;\r\n }\r\n\r\n .panel-card{\r\n background:var(--panel);\r\n border:1px solid var(--panel-line);\r\n border-radius:2px;\r\n padding:32px;\r\n min-height:380px;\r\n position:relative;\r\n }\r\n .panel-card::before{\r\n content:'';\r\n position:absolute; top:0; left:0; right:0; height:4px;\r\n background:repeating-linear-gradient(135deg, var(--hazard) 0 10px, var(--stripe-dark) 10px 20px);\r\n opacity:0.85;\r\n }\r\n .panel-eyebrow{\r\n font-family:'JetBrains Mono', monospace;\r\n font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase;\r\n color:var(--fog-dim);\r\n margin:8px 0 10px;\r\n }\r\n .panel-title{\r\n font-family:'Oswald', sans-serif;\r\n font-weight:600; text-transform:uppercase;\r\n font-size:1.5rem; color:var(--paper);\r\n margin-bottom:14px;\r\n transition:opacity .2s ease;\r\n }\r\n .panel-blurb{ font-size:0.95rem; line-height:1.6; color:var(--fog); margin-bottom:26px; }\r\n\r\n .equip-list{ list-style:none; display:flex; flex-direction:column; gap:14px; }\r\n .equip-list li{\r\n display:flex; align-items:flex-start; gap:12px;\r\n font-size:0.9rem; color:var(--paper);\r\n padding-bottom:14px; border-bottom:1px solid var(--panel-line);\r\n }\r\n .equip-list li:last-child{ border-bottom:none; padding-bottom:0; }\r\n .equip-icon{ width:18px; height:18px; flex-shrink:0; margin-top:1px; color:var(--hazard); }\r\n .equip-icon svg{ width:100%; height:100%; }\r\n .equip-name{ font-weight:500; }\r\n .equip-desc{ color:var(--fog-dim); font-size:0.82rem; margin-top:2px; }\r\n\r\n .demo-cta{\r\n margin-top:30px;\r\n display:inline-flex; align-items:center; gap:10px;\r\n font-family:'JetBrains Mono', monospace;\r\n font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase;\r\n color:var(--hazard); text-decoration:none;\r\n border-bottom:1px solid var(--hazard-dim);\r\n padding-bottom:2px;\r\n transition:border-color .25s ease, gap .25s ease;\r\n }\r\n .demo-cta:hover{ border-color:var(--hazard); gap:14px; }\r\n\r\n @media (max-width:900px){\r\n .demo-grid{ grid-template-columns:1fr; }\r\n .demo{ padding:80px 6vw 90px; }\r\n }\r\n\r\n \/* ============ POWER RESILIENCE ============ *\/\r\n .power{\r\n position:relative; z-index:20;\r\n padding:110px 5vw 130px;\r\n max-width:1280px; margin:0 auto;\r\n border-top:1px solid var(--panel-line);\r\n }\r\n .power-grid{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:64px; align-items:center;\r\n }\r\n .power-copy .demo-eyebrow{ margin-bottom:18px; }\r\n .power-copy h2{\r\n font-family:'Oswald', sans-serif;\r\n font-weight:600; text-transform:uppercase;\r\n font-size:clamp(1.7rem, 3.2vw, 2.5rem);\r\n line-height:1.15; letter-spacing:0.005em;\r\n color:var(--paper);\r\n }\r\n .power-copy .power-sub{\r\n margin-top:18px; font-size:1rem; line-height:1.7; color:var(--fog);\r\n max-width:480px;\r\n }\r\n\r\n .power-stats{\r\n display:grid;\r\n grid-template-columns:repeat(3, 1fr);\r\n gap:16px;\r\n margin-top:42px;\r\n }\r\n .power-stat{\r\n border:1px solid var(--panel-line);\r\n border-radius:2px;\r\n padding:22px 18px;\r\n background:var(--panel);\r\n }\r\n .power-stat .num{\r\n font-family:'Oswald', sans-serif;\r\n font-weight:600; font-size:1.7rem;\r\n color:var(--hazard);\r\n letter-spacing:0.005em;\r\n }\r\n .power-stat .label{\r\n margin-top:8px;\r\n font-family:'JetBrains Mono', monospace;\r\n font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase;\r\n color:var(--fog-dim);\r\n line-height:1.4;\r\n }\r\n\r\n .power-scene{\r\n position:relative;\r\n border:1px solid var(--panel-line);\r\n border-radius:2px;\r\n background:var(--panel);\r\n padding:28px;\r\n }\r\n .power-hud{\r\n font-family:'JetBrains Mono', monospace;\r\n font-size:0.7rem; letter-spacing:0.06em;\r\n display:flex; flex-direction:column; gap:6px;\r\n margin-bottom:14px;\r\n }\r\n .power-hud-row{ display:flex; align-items:center; gap:8px; }\r\n .power-hud-row .grid-dot{\r\n width:6px; height:6px; border-radius:50%;\r\n background:var(--fog-dim);\r\n }\r\n .power-hud-row .backup-dot{\r\n width:6px; height:6px; border-radius:50%;\r\n background:var(--hazard); box-shadow:0 0 8px 1px var(--hazard);\r\n animation:pulse 2.4s ease-in-out infinite;\r\n }\r\n .power-hud-row .offline{ color:var(--fog-dim); }\r\n .power-hud-row .active{ color:var(--paper); }\r\n .power-hud-row .active b{ color:var(--hazard); font-weight:600; }\r\n\r\n .power-svg{ width:100%; height:auto; display:block; }\r\n .power-line{\r\n stroke:var(--panel-line);\r\n stroke-width:2;\r\n fill:none;\r\n }\r\n .power-line.flow{\r\n stroke:var(--hazard);\r\n stroke-dasharray:8 6;\r\n animation:marchAnts 2.6s linear infinite;\r\n opacity:0.85;\r\n }\r\n .power-line.dead{\r\n stroke:var(--fog-dim);\r\n stroke-dasharray:4 6;\r\n opacity:0.4;\r\n }\r\n .batt-glow{\r\n animation:sensorPulse 2.6s ease-in-out infinite;\r\n }\r\n .device-dot{\r\n animation:sensorPulse 2.6s ease-in-out infinite;\r\n }\r\n .device-dot.d2{ animation-delay:.5s; }\r\n .device-dot.d3{ animation-delay:1s; }\r\n\r\n @media (max-width:900px){\r\n .power-grid{ grid-template-columns:1fr; }\r\n .power{ padding:80px 6vw 90px; }\r\n .power-stats{ grid-template-columns:1fr; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"grain\"><\/div>\r\n\r\n<div class=\"hero\">\r\n <div class=\"vignette\"><\/div>\r\n\r\n <nav>\r\n <div class=\"logo\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect x=\"3\" y=\"9\" width=\"18\" height=\"12\" rx=\"1\" stroke=\"#E8B93A\" stroke-width=\"1.4\"\/>\r\n <path d=\"M7 9V6a5 5 0 0110 0v3\" stroke=\"#E8B93A\" stroke-width=\"1.4\"\/>\r\n <path d=\"M12 13v3\" stroke=\"#E8B93A\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n Perimeter\r\n <\/div>\r\n <div class=\"nav-links\">\r\n <a href=\"#\">Gate Motors<\/a>\r\n <a href=\"#\">Electric Fencing<\/a>\r\n <a href=\"#\">CCTV<\/a>\r\n <a href=\"#\">Pricing<\/a>\r\n <\/div>\r\n <a href=\"#\" class=\"nav-cta\">Book Free Assessment<\/a>\r\n <\/nav>\r\n\r\n <div class=\"hud\">\r\n <div class=\"hud-row\"><span class=\"dot\"><\/span><span class=\"hud-status\">FENCE STATUS \u2014 <b>ARMED<\/b><\/span><\/div>\r\n <div class=\"hud-row\" style=\"opacity:.6\"><span style=\"width:6px\"><\/span><span class=\"hud-status\">ZONE MONITORING: ACTIVE<\/span><\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-inner\">\r\n <div class=\"eyebrow\">Gate Motors \u00b7 Electric Fencing \u00b7 CCTV<\/div>\r\n <h1>Your Boundary Is Only as Strong as Its <span class=\"accent\">Weakest Point.<\/span><\/h1>\r\n <p class=\"sub\">Gate motors, electric fencing, and CCTV \u2014 installed and commissioned by certified technicians, working together as one connected system. Not three separate vendors guessing at each other's placement.<\/p>\r\n <div class=\"cta-block\">\r\n <button class=\"cta-primary\">\r\n Book My Free Site Assessment\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12h14M13 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/button>\r\n <div class=\"cta-micro\">No hard sell \u2014 just an honest look at where your property is exposed.<\/div>\r\n <\/div>\r\n <a href=\"#perimeter-diagram\" class=\"see-more\">See how it works \u2193<\/a>\r\n <\/div>\r\n\r\n <div class=\"hscene\">\r\n <svg viewBox=\"0 0 520 420\" fill=\"none\">\r\n <rect class=\"hfence\" x=\"60\" y=\"50\" width=\"400\" height=\"320\" stroke=\"#3A4A3F\" stroke-width=\"2\"\/>\r\n <rect x=\"180\" y=\"150\" width=\"160\" height=\"120\" fill=\"#1B241E\" stroke=\"#2A362F\" stroke-width=\"1.5\"\/>\r\n <rect x=\"245\" y=\"366\" width=\"30\" height=\"8\" fill=\"#5C6D62\"\/>\r\n <rect x=\"56\" y=\"195\" width=\"8\" height=\"26\" fill=\"#5C6D62\"\/>\r\n <circle class=\"hglyph\" cx=\"70\" cy=\"60\" r=\"4\" fill=\"#E8B93A\"\/>\r\n <circle class=\"hglyph d2\" cx=\"450\" cy=\"60\" r=\"4\" fill=\"#E8B93A\"\/>\r\n <circle class=\"hglyph d3\" cx=\"260\" cy=\"370\" r=\"4\" fill=\"#4FD1C5\"\/>\r\n <path d=\"M70 60 L180 150 M450 60 L340 150\" stroke=\"#2A362F\" stroke-width=\"1\" stroke-dasharray=\"3 4\"\/>\r\n <\/svg>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ============ TRUST BAR ============ -->\r\n<section class=\"trust\">\r\n <div class=\"trust-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-num\" data-count=\"14\"><span class=\"val\">0<\/span><span class=\"unit\">+<\/span><\/div>\r\n <div class=\"stat-label\">Years Installing Perimeter Systems<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"stat-num\" data-count=\"2800\"><span class=\"val\">0<\/span><span class=\"unit\">+<\/span><\/div>\r\n <div class=\"stat-label\">Gates, Fences & Cameras Installed<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"stat-num\" data-count=\"8\"><span class=\"val\">0<\/span><span class=\"unit\">hrs+<\/span><\/div>\r\n <div class=\"stat-label\">Minimum Battery Backup, Every System<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"stat-num\" data-count=\"100\"><span class=\"val\">0<\/span><span class=\"unit\">%<\/span><\/div>\r\n <div class=\"stat-label\">Certified & Compliant Installations<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"badges\">\r\n <div class=\"badge\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 2L4 5.5V11C4 16.2 7.4 20.7 12 22C16.6 20.7 20 16.2 20 11V5.5L12 2Z\" stroke=\"#93A79B\" stroke-width=\"1.6\"\/><\/svg>\r\n PSIRA Registered Installer\r\n <\/div>\r\n <div class=\"badge\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M4 4v16M9 4v16M14 4v16M19 4v16M2 8h20M2 16h20\" stroke=\"#93A79B\" stroke-width=\"1.4\" stroke-linecap=\"round\"\/><\/svg>\r\n Certified Electric Fence Installer\r\n <\/div>\r\n <div class=\"badge\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M4 12l5 5L20 6\" stroke=\"#93A79B\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n Authorised Dealer \u2014 Centurion \/ DIGI \/ Nemtek \/ Hikvision\r\n <\/div>\r\n <div class=\"badge\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"#93A79B\" stroke-width=\"1.6\"\/><path d=\"M12 7v5l3.5 2\" stroke=\"#93A79B\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><\/svg>\r\n 24\/7 Emergency Callout\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ============ INTERACTIVE PERIMETER DIAGRAM ============ -->\r\n<section class=\"demo\" id=\"perimeter-diagram\">\r\n <div class=\"demo-head\">\r\n <div class=\"demo-eyebrow\">See Your Property, Not a Sample Property<\/div>\r\n <h2>Click a Zone. See What We'd Recommend There.<\/h2>\r\n <p class=\"demo-sub\">Every boundary has different weak points \u2014 a driveway gate, a fence line along a neighbour's wall, a side entrance nobody thinks about until it's used against them. This is a simplified version of the walkthrough we do on-site, free, before anything is quoted.<\/p>\r\n <\/div>\r\n\r\n <div class=\"demo-grid\">\r\n <div class=\"plan-wrap\">\r\n <div class=\"plan-hint\"><span class=\"dot\"><\/span> Click any zone on the property outline<\/div>\r\n\r\n <svg class=\"plot\" id=\"plot\" viewBox=\"0 0 600 500\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n\r\n <!-- boundary fence, drawn as the property outline -->\r\n <rect id=\"boundaryRect\" class=\"boundary\" x=\"80\" y=\"80\" width=\"440\" height=\"340\"><\/rect>\r\n\r\n <!-- house footprint -->\r\n <rect class=\"house\" x=\"240\" y=\"200\" width=\"120\" height=\"100\"><\/rect>\r\n\r\n <!-- gate leaves -->\r\n <rect class=\"gate-leaf\" data-for=\"driveway\" x=\"260\" y=\"416\" width=\"30\" height=\"8\"><\/rect>\r\n <rect class=\"gate-leaf\" data-for=\"sidegate\" x=\"76\" y=\"230\" width=\"8\" height=\"26\"><\/rect>\r\n\r\n <!-- zone hit areas -->\r\n <rect class=\"zone-hit\" data-zone=\"rear\" x=\"120\" y=\"80\" width=\"360\" height=\"50\"><\/rect>\r\n <rect class=\"zone-hit\" data-zone=\"fenceline\" x=\"440\" y=\"130\" width=\"80\" height=\"280\"><\/rect>\r\n <rect class=\"zone-hit\" data-zone=\"driveway\" x=\"120\" y=\"380\" width=\"360\" height=\"40\"><\/rect>\r\n <rect class=\"zone-hit\" data-zone=\"sidegate\" x=\"80\" y=\"130\" width=\"80\" height=\"280\"><\/rect>\r\n\r\n <!-- labels -->\r\n <text class=\"zone-label\" x=\"140\" y=\"105\">Rear Boundary<\/text>\r\n <text class=\"zone-label\" x=\"452\" y=\"270\" transform=\"rotate(90 452 270)\">Fence Line<\/text>\r\n <text class=\"zone-label\" x=\"230\" y=\"404\">Driveway Gate<\/text>\r\n <text class=\"zone-label\" x=\"30\" y=\"270\" transform=\"rotate(-90 30 270)\">Side Gate<\/text>\r\n\r\n <\/svg>\r\n <\/div>\r\n\r\n <div class=\"panel-card\" id=\"panelCard\">\r\n <div class=\"panel-eyebrow\" id=\"panelEyebrow\">RECOMMENDED \u2014 DRIVEWAY GATE<\/div>\r\n <div class=\"panel-title\" id=\"panelTitle\">Driveway Gate<\/div>\r\n <div class=\"panel-blurb\" id=\"panelBlurb\">Your main entry point \u2014 and the one that matters most. A sliding gate motor with real battery backup, paired with a camera clear enough to read a plate, closes the gap that most break-ins actually use.<\/div>\r\n <ul class=\"equip-list\" id=\"equipList\"><\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <a href=\"#\" class=\"demo-cta\">\r\n Get This Walkthrough for My Property\r\n <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\"><path d=\"M5 12h14M13 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/a>\r\n<\/section>\r\n\r\n<!-- ============ POWER RESILIENCE ============ -->\r\n<section class=\"power\" id=\"power-resilience\">\r\n <div class=\"power-grid\">\r\n\r\n <div class=\"power-copy\">\r\n <div class=\"demo-eyebrow\">Built for the Grid We Actually Have<\/div>\r\n <h2>Load Shedding Doesn't Open Your Gate.<\/h2>\r\n <p class=\"power-sub\">A security system that switches off with the power isn't a security system \u2014 it's a schedule your property is vulnerable on. Every gate motor, fence energizer, and camera system we install ships with battery backup rated to keep running well past your average outage window.<\/p>\r\n\r\n <div class=\"power-stats\">\r\n <div class=\"power-stat\">\r\n <div class=\"num\">8hrs+<\/div>\r\n <div class=\"label\">Minimum backup on every install<\/div>\r\n <\/div>\r\n <div class=\"power-stat\">\r\n <div class=\"num\">Zone-monitored<\/div>\r\n <div class=\"label\">Fence stays live and reporting<\/div>\r\n <\/div>\r\n <div class=\"power-stat\">\r\n <div class=\"num\">App alerts<\/div>\r\n <div class=\"label\">You're notified the moment backup kicks in<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"power-scene\">\r\n <div class=\"power-hud\">\r\n <div class=\"power-hud-row\"><span class=\"grid-dot\"><\/span><span class=\"offline\">GRID \u2014 OFFLINE<\/span><\/div>\r\n <div class=\"power-hud-row\"><span class=\"backup-dot\"><\/span><span class=\"active\">BACKUP \u2014 <b>ACTIVE<\/b> \u00b7 8HR CAPACITY<\/span><\/div>\r\n <\/div>\r\n\r\n <svg class=\"power-svg\" viewBox=\"0 0 480 300\" fill=\"none\">\r\n <!-- grid pylon, dead line -->\r\n <g opacity=\"0.55\">\r\n <path d=\"M70 40 L55 90 M70 40 L85 90 M55 65 L85 65 M70 40 V20\" stroke=\"#5C6D62\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path class=\"power-line dead\" d=\"M85 90 Q140 120 170 150\"><\/path>\r\n <path d=\"M60 30 L80 100\" stroke=\"#5C6D62\" stroke-width=\"2\" stroke-linecap=\"round\" opacity=\"0.7\"\/>\r\n <path d=\"M80 30 L60 100\" stroke=\"#5C6D62\" stroke-width=\"2\" stroke-linecap=\"round\" opacity=\"0.7\"\/>\r\n <\/g>\r\n <text x=\"40\" y=\"112\" font-family=\"JetBrains Mono, monospace\" font-size=\"9\" letter-spacing=\"0.5\" fill=\"#5C6D62\">GRID<\/text>\r\n\r\n <!-- battery, glowing -->\r\n <g class=\"batt-glow\">\r\n <rect x=\"150\" y=\"150\" width=\"60\" height=\"40\" rx=\"3\" stroke=\"#E8B93A\" stroke-width=\"2\"><\/rect>\r\n <rect x=\"210\" y=\"163\" width=\"6\" height=\"14\" fill=\"#E8B93A\"><\/rect>\r\n <rect x=\"158\" y=\"158\" width=\"16\" height=\"24\" fill=\"#E8B93A\" opacity=\"0.85\"><\/rect>\r\n <rect x=\"178\" y=\"158\" width=\"16\" height=\"24\" fill=\"#E8B93A\" opacity=\"0.5\"><\/rect>\r\n <\/g>\r\n <text x=\"152\" y=\"205\" font-family=\"JetBrains Mono, monospace\" font-size=\"9\" letter-spacing=\"0.5\" fill=\"#93A79B\">BACKUP<\/text>\r\n\r\n <!-- flow lines to devices -->\r\n <path class=\"power-line flow\" d=\"M180 150 Q180 100 130 60\"><\/path>\r\n <path class=\"power-line flow\" d=\"M180 150 Q220 110 280 70\"><\/path>\r\n <path class=\"power-line flow\" d=\"M180 190 Q220 220 300 240\"><\/path>\r\n\r\n <!-- gate motor device -->\r\n <g transform=\"translate(105,35)\">\r\n <rect x=\"0\" y=\"10\" width=\"26\" height=\"14\" rx=\"2\" stroke=\"#93A79B\" stroke-width=\"1.5\"><\/rect>\r\n <path d=\"M5 10V5a8 8 0 0116 0v5\" stroke=\"#93A79B\" stroke-width=\"1.5\"><\/path>\r\n <circle class=\"device-dot\" cx=\"30\" cy=\"12\" r=\"3\" fill=\"#4FD1C5\"><\/circle>\r\n <\/g>\r\n <text x=\"100\" y=\"70\" font-family=\"JetBrains Mono, monospace\" font-size=\"9\" letter-spacing=\"0.4\" fill=\"#93A79B\">GATE MOTOR<\/text>\r\n\r\n <!-- fence device -->\r\n <g transform=\"translate(255,45)\">\r\n <path d=\"M0 0v20M8 0v20M16 0v20M24 0v20M-4 5h32M-4 15h32\" stroke=\"#93A79B\" stroke-width=\"1.3\" stroke-linecap=\"round\"><\/path>\r\n <circle class=\"device-dot d2\" cx=\"28\" cy=\"4\" r=\"3\" fill=\"#4FD1C5\"><\/circle>\r\n <\/g>\r\n <text x=\"248\" y=\"80\" font-family=\"JetBrains Mono, monospace\" font-size=\"9\" letter-spacing=\"0.4\" fill=\"#93A79B\">FENCE ENERGIZER<\/text>\r\n\r\n <!-- camera device -->\r\n <g transform=\"translate(280,220)\">\r\n <rect x=\"0\" y=\"0\" width=\"24\" height=\"16\" rx=\"2\" stroke=\"#93A79B\" stroke-width=\"1.5\"><\/rect>\r\n <path d=\"M24 4l8-4v16l-8-4\" stroke=\"#93A79B\" stroke-width=\"1.5\" stroke-linejoin=\"round\"><\/path>\r\n <circle class=\"device-dot d3\" cx=\"34\" cy=\"0\" r=\"3\" fill=\"#4FD1C5\"><\/circle>\r\n <\/g>\r\n <text x=\"278\" y=\"255\" font-family=\"JetBrains Mono, monospace\" font-size=\"9\" letter-spacing=\"0.4\" fill=\"#93A79B\">CCTV<\/text>\r\n <\/svg>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n \/\/ ---------- count-up stats ----------\r\n const stats = document.querySelectorAll('.stat-num');\r\n const statObserver = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if(entry.isIntersecting){\r\n const el = entry.target;\r\n const target = parseInt(el.dataset.count, 10);\r\n const valEl = el.querySelector('.val');\r\n const duration = 1400;\r\n const startTime = performance.now();\r\n function tick(now){\r\n const progress = Math.min((now - startTime) \/ duration, 1);\r\n const eased = 1 - Math.pow(1 - progress, 3);\r\n valEl.textContent = Math.round(eased * target).toLocaleString();\r\n if(progress < 1) requestAnimationFrame(tick);\r\n }\r\n requestAnimationFrame(tick);\r\n statObserver.unobserve(el);\r\n }\r\n });\r\n }, { threshold: 0.4 });\r\n stats.forEach(s => statObserver.observe(s));\r\n<\/script>\r\n\r\n<script>\r\n const zoneData = {\r\n driveway: {\r\n eyebrow: 'RECOMMENDED \u2014 DRIVEWAY GATE',\r\n title: 'Driveway Gate',\r\n blurb: 'Your main entry point \u2014 and the one that matters most. A sliding gate motor with real battery backup, paired with a camera clear enough to read a plate, closes the gap that most break-ins actually use.',\r\n equip: [\r\n { name:'Sliding Gate Motor', desc:'Battery backup, app control, auto-close', icon:'motor' },\r\n { name:'Entrance HD Camera', desc:'License-plate clarity, day\/night', icon:'camera' },\r\n { name:'Driveway Motion Sensor', desc:'Alerts on approach before the gate is reached', icon:'sensor' },\r\n ]\r\n },\r\n fenceline: {\r\n eyebrow: 'RECOMMENDED \u2014 FENCE LINE (BOUNDARY WALL)',\r\n title: 'Fence Line',\r\n blurb: 'A triggered fence with no alert is just a fence. Zone-monitored electric fencing tells you the moment a wire is cut or a climb is attempted \u2014 not after the fact.',\r\n equip: [\r\n { name:'SANS-Compliant Electric Fencing', desc:'Meets SANS 10222 install spec', icon:'fence' },\r\n { name:'Zone Monitoring Energizer', desc:'Pinpoints which section triggered', icon:'sensor' },\r\n { name:'Alarm Panel Integration', desc:'Fence trigger fires a real alert, not a silent event', icon:'alarm' },\r\n ]\r\n },\r\n sidegate: {\r\n eyebrow: 'RECOMMENDED \u2014 SIDE \/ PEDESTRIAN GATE',\r\n title: 'Side \/ Pedestrian Gate',\r\n blurb: 'The entrance nobody thinks about until it\\u2019s used against them. Remote access control plus motion-triggered coverage closes a gap most properties leave wide open.',\r\n equip: [\r\n { name:'Swing Gate Motor', desc:'Remote access, manual override', icon:'motor' },\r\n { name:'Motion-Activated Camera', desc:'Records + alerts on approach', icon:'camera' },\r\n { name:'Gate Contact Sensor', desc:'Arms with the rest of the system', icon:'sensor' },\r\n ]\r\n },\r\n rear: {\r\n eyebrow: 'RECOMMENDED \u2014 REAR BOUNDARY',\r\n title: 'Rear Boundary',\r\n blurb: 'The most commonly overlooked zone on any property. No street frontage doesn\\u2019t mean no risk \u2014 it usually means less visibility for you, not for anyone trying to get in.',\r\n equip: [\r\n { name:'Electric Fence Extension', desc:'Continues zone monitoring around the back line', icon:'fence' },\r\n { name:'Low-Light Camera Coverage', desc:'Night vision, no street lighting required', icon:'camera' },\r\n { name:'Vibration Sensor', desc:'Detects tampering attempts on the fence line', icon:'alarm' },\r\n ]\r\n }\r\n };\r\n\r\n const icons = {\r\n motor: '<svg viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"3\" y=\"9\" width=\"18\" height=\"9\" rx=\"1.5\" stroke=\"currentColor\" stroke-width=\"1.6\"\/><path d=\"M7 9V6a5 5 0 0110 0v3\" stroke=\"currentColor\" stroke-width=\"1.6\"\/><path d=\"M12 13v2\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><\/svg>',\r\n camera: '<svg viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"2\" y=\"7\" width=\"15\" height=\"11\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.6\"\/><path d=\"M17 10l5-3v10l-5-3\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/><\/svg>',\r\n sensor: '<svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.6\"\/><path d=\"M12 2v4M12 18v4M2 12h4M18 12h4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><\/svg>',\r\n fence: '<svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M4 4v16M9 4v16M14 4v16M19 4v16M2 8h20M2 16h20\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>',\r\n alarm: '<svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 2L4 5.5V11C4 16.2 7.4 20.7 12 22C16.6 20.7 20 16.2 20 11V5.5L12 2Z\" stroke=\"currentColor\" stroke-width=\"1.6\"\/><path d=\"M12 8v4l2.5 2.5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><\/svg>'\r\n };\r\n\r\n const zoneHits = document.querySelectorAll('.zone-hit');\r\n const boundaryRect = document.getElementById('boundaryRect');\r\n const panelEyebrow = document.getElementById('panelEyebrow');\r\n const panelTitle = document.getElementById('panelTitle');\r\n const panelBlurb = document.getElementById('panelBlurb');\r\n const equipList = document.getElementById('equipList');\r\n const panelCard = document.getElementById('panelCard');\r\n\r\n function renderZone(key){\r\n const data = zoneData[key];\r\n if(!data) return;\r\n panelCard.style.transition = 'opacity .2s ease';\r\n panelCard.style.opacity = '0.4';\r\n setTimeout(() => {\r\n panelEyebrow.textContent = data.eyebrow;\r\n panelTitle.textContent = data.title;\r\n panelBlurb.textContent = data.blurb;\r\n equipList.innerHTML = data.equip.map(e => `\r\n <li>\r\n <span class=\"equip-icon\">${icons[e.icon]}<\/span>\r\n <span>\r\n <div class=\"equip-name\">${e.name}<\/div>\r\n <div class=\"equip-desc\">${e.desc}<\/div>\r\n <\/span>\r\n <\/li>\r\n `).join('');\r\n panelCard.style.opacity = '1';\r\n }, 120);\r\n\r\n zoneHits.forEach(z => z.classList.toggle('active', z.dataset.zone === key));\r\n boundaryRect.classList.toggle('zone-active-line', true);\r\n }\r\n\r\n zoneHits.forEach(z => {\r\n z.addEventListener('click', () => renderZone(z.dataset.zone));\r\n });\r\n\r\n \/\/ default state\r\n renderZone('driveway');\r\n document.querySelector('.zone-hit[data-zone=\"driveway\"]').classList.add('active');\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Perimeter \u2014 Gate Motors, Electric Fencing & CCTV Perimeter Gate Motors Electric Fencing CCTV Pricing Book Free Assessment FENCE STATUS \u2014 ARMED ZONE MONITORING: ACTIVE Gate Motors \u00b7 Electric Fencing \u00b7 CCTV Your Boundary Is Only as Strong as Its Weakest Point. Gate motors, electric fencing, and CCTV \u2014 installed and commissioned by certified technicians, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-60","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/securityinstallpros.co.za\/index.php?rest_route=\/wp\/v2\/pages\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/securityinstallpros.co.za\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/securityinstallpros.co.za\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/securityinstallpros.co.za\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/securityinstallpros.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=60"}],"version-history":[{"count":4,"href":"https:\/\/securityinstallpros.co.za\/index.php?rest_route=\/wp\/v2\/pages\/60\/revisions"}],"predecessor-version":[{"id":64,"href":"https:\/\/securityinstallpros.co.za\/index.php?rest_route=\/wp\/v2\/pages\/60\/revisions\/64"}],"wp:attachment":[{"href":"https:\/\/securityinstallpros.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}