{"id":171,"date":"2026-06-11T13:28:19","date_gmt":"2026-06-11T13:28:19","guid":{"rendered":"https:\/\/staging.samplesite.top\/binnaeng\/?page_id=171"},"modified":"2026-10-26T16:54:23","modified_gmt":"2026-10-26T16:54:23","slug":"civil-infrastructure","status":"publish","type":"page","link":"https:\/\/staging.samplesite4u.com\/binnaeng\/civil-infrastructure\/","title":{"rendered":"Civil Infrastructure"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"171\" class=\"elementor elementor-171\">\n\t\t\t\t<div class=\"elementor-element elementor-element-647f2c8 e-con-full e-flex e-con e-parent\" data-id=\"647f2c8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-89f9a13 elementor-widget elementor-widget-html\" data-id=\"89f9a13\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow+Condensed:wght@700;800&family=Barlow:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap\">\r\n\r\n<div class=\"cvl\">\r\n\r\n  <!-- HERO -->\r\n  <header class=\"cvl-hero\">\r\n    <div class=\"cvl-wrap\">\r\n      <p class=\"cvl-badge\"><span>\u2713<\/span><b>150+<\/b> projects delivered<\/p>\r\n      <h1>We build what everything else rides on.<\/h1>\r\n      <a href=\"#cvl-section\" class=\"cvl-btn cvl-btn-solid\">Explore our services<\/a>\r\n    <\/div>\r\n    <div class=\"cvl-ruler\" aria-hidden=\"true\"><\/div>\r\n  <\/header>\r\n\r\n  <!-- INTERACTIVE GROUND SECTION -->\r\n  <section class=\"cvl-sec\" id=\"cvl-section\">\r\n    <div class=\"cvl-wrap cvl-grid\">\r\n      <div class=\"cvl-tabs\" role=\"tablist\" aria-label=\"Infrastructure services\">\r\n        <button type=\"button\" role=\"tab\" data-k=\"road\" aria-selected=\"true\">\r\n          <h3>Road Construction<\/h3>\r\n          <p>Highways, urban roads and access routes engineered for durability and smooth traffic flow.<\/p>\r\n        <\/button>\r\n        <button type=\"button\" role=\"tab\" data-k=\"bridge\" aria-selected=\"false\">\r\n          <h3>Bridge Construction<\/h3>\r\n          <p>Robust bridge structures that connect communities and withstand demanding loads.<\/p>\r\n        <\/button>\r\n        <button type=\"button\" role=\"tab\" data-k=\"drain\" aria-selected=\"false\">\r\n          <h3>Drainage Systems<\/h3>\r\n          <p>Stormwater solutions that protect the structure above and prevent flooding around it.<\/p>\r\n        <\/button>\r\n        <button type=\"button\" role=\"tab\" data-k=\"earth\" aria-selected=\"false\">\r\n          <h3>Earthworks &amp; Excavation<\/h3>\r\n          <p>Precise site preparation, grading and excavation as the foundation for every project.<\/p>\r\n        <\/button>\r\n      <\/div>\r\n\r\n      <figure class=\"cvl-sheet\">\r\n        <svg class=\"cvl-svg\" id=\"cvlSvg\" data-a=\"road\" viewBox=\"0 0 640 360\" role=\"img\" aria-label=\"Ground cross-section showing a road on embankment, a bridge over a river, a drainage pipe and cut-and-fill earthworks\">\r\n          <defs><pattern id=\"cvlGrid\" width=\"40\" height=\"40\" patternUnits=\"userSpaceOnUse\"><path d=\"M40 0H0V40\" fill=\"none\" stroke=\"#EADBC9\"\/><\/pattern><\/defs>\r\n          <rect width=\"640\" height=\"360\" fill=\"#FBF3EB\"\/><rect width=\"640\" height=\"360\" fill=\"url(#cvlGrid)\"\/>\r\n          <rect x=\"236\" y=\"304\" width=\"228\" height=\"26\" fill=\"#9CC0E6\"\/>\r\n\r\n          <g class=\"g g-earth\">\r\n            <polygon points=\"0,200 190,200 250,330 0,330\" fill=\"#C9A27E\"\/>\r\n            <polygon points=\"450,330 510,200 640,200 640,330\" fill=\"#C9A27E\"\/>\r\n            <rect y=\"330\" width=\"640\" height=\"30\" fill=\"#8B6B4E\"\/>\r\n            <path d=\"M0 250Q80 240 150 262M0 292Q90 282 200 308M566 250Q600 244 640 252M524 296Q580 286 640 298\" stroke=\"#A9825D\" fill=\"none\" stroke-dasharray=\"5 4\"\/>\r\n            <text x=\"16\" y=\"318\" class=\"t\">FILL 1:2<\/text><text x=\"560\" y=\"322\" class=\"t\">CUT 1:2<\/text>\r\n          <\/g>\r\n\r\n          <g class=\"g g-road\">\r\n            <rect x=\"0\" y=\"188\" width=\"190\" height=\"6\" fill=\"#0C1A30\"\/><rect x=\"0\" y=\"194\" width=\"190\" height=\"6\" fill=\"#7B6F63\"\/>\r\n            <rect x=\"510\" y=\"188\" width=\"130\" height=\"6\" fill=\"#0C1A30\"\/><rect x=\"510\" y=\"194\" width=\"130\" height=\"6\" fill=\"#7B6F63\"\/>\r\n            <path d=\"M0 191H190M510 191H640\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-dasharray=\"10 8\"\/>\r\n            <text x=\"14\" y=\"176\" class=\"t\">ASPHALT + BASE<\/text>\r\n          <\/g>\r\n\r\n          <g class=\"g g-bridge\">\r\n            <rect x=\"186\" y=\"188\" width=\"328\" height=\"16\" fill=\"#5A6572\"\/><path d=\"M190 191H510\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-dasharray=\"10 8\"\/>\r\n            <rect x=\"290\" y=\"204\" width=\"16\" height=\"126\" fill=\"#6E7986\"\/><rect x=\"394\" y=\"204\" width=\"16\" height=\"126\" fill=\"#6E7986\"\/>\r\n            <rect x=\"182\" y=\"204\" width=\"12\" height=\"34\" fill=\"#6E7986\"\/><rect x=\"506\" y=\"204\" width=\"12\" height=\"34\" fill=\"#6E7986\"\/>\r\n            <path d=\"M190 160H510M190 153V167M510 153V167\" stroke=\"#F58220\" stroke-width=\"1.5\" fill=\"none\"\/>\r\n            <text x=\"350\" y=\"148\" text-anchor=\"middle\" class=\"t\">SPAN<\/text><text x=\"314\" y=\"270\" class=\"t\">PIER<\/text>\r\n          <\/g>\r\n\r\n          <g class=\"g g-drain\">\r\n            <path d=\"M535 168V186\" stroke=\"#2F6FB5\" stroke-width=\"2\" stroke-dasharray=\"3 4\"\/>\r\n            <rect x=\"528\" y=\"194\" width=\"14\" height=\"8\" fill=\"#0C1A30\"\/>\r\n            <path d=\"M535 202V260H470\" stroke=\"#0C1A30\" stroke-width=\"9\" fill=\"none\" stroke-linejoin=\"round\"\/>\r\n            <path d=\"M535 202V260H470\" stroke=\"#9CC0E6\" stroke-width=\"3\" fill=\"none\" stroke-linejoin=\"round\"\/>\r\n            <text x=\"548\" y=\"180\" class=\"t\">GULLY<\/text><text x=\"414\" y=\"250\" class=\"t\">OUTFALL<\/text>\r\n          <\/g>\r\n        <\/svg>\r\n        <figcaption><span>SECTION A\u2013A<\/span><span>ILLUSTRATIVE \u00b7 NOT TO SCALE<\/span><\/figcaption>\r\n      <\/figure>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- PROCESS as chainage -->\r\n  <section class=\"cvl-sec cvl-sand\">\r\n    <div class=\"cvl-wrap\">\r\n      <h2>Every project follows the same chainage<\/h2>\r\n      <p class=\"cvl-sub\">Road engineers measure distance in chainage. We measure progress the same way.<\/p>\r\n      <ol class=\"cvl-ch\">\r\n        <li><b>0+000<\/b><h4>Survey<\/h4><p>Site, soil and traffic data collected before any design starts.<\/p><\/li>\r\n        <li><b>1+000<\/b><h4>Design<\/h4><p>Alignments, structures and drainage designed together.<\/p><\/li>\r\n        <li><b>2+000<\/b><h4>Earthworks<\/h4><p>Cut, fill and compaction to the required levels.<\/p><\/li>\r\n        <li><b>3+000<\/b><h4>Construction<\/h4><p>Pavement, structures and drainage built and inspected.<\/p><\/li>\r\n        <li><b>4+000<\/b><h4>Handover<\/h4><p>As-built records and a walk-through with your team.<\/p><\/li>\r\n      <\/ol>\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n<style>\r\n.cvl{--r:#F58220;--rd:#B85A0A;--ink:#0C1A30;--mut:#5C6A7E;--sand:#FBF3EB;--line:#E8D8C7;--amb:#F2B632;font-family:'Barlow',sans-serif;color:var(--ink);background:#fff;line-height:1.6}\r\n.cvl *,.cvl *::before,.cvl *::after{box-sizing:border-box}\r\n.cvl h1,.cvl h2,.cvl h3,.cvl h4{font-family:'Barlow Condensed',sans-serif;margin:0;line-height:1;text-transform:uppercase;letter-spacing:.01em}\r\n.cvl p{margin:0}\r\n.cvl-wrap{max-width:1180px;margin:0 auto;padding:0 32px}\r\n.cvl a:focus-visible,.cvl button:focus-visible{outline:3px solid var(--amb);outline-offset:3px}\r\n\r\n.cvl-btn{display:inline-block;padding:16px 30px;font-weight:700;font-size:15px;text-decoration:none;border-radius:4px;transition:transform .2s,background .2s}\r\n.cvl-btn:hover{transform:translateY(-2px)}\r\n.cvl-btn-solid{background:var(--r);color:var(--ink)}.cvl-btn-solid:hover{background:#FF9A45}\r\n\r\n\/* hero *\/\r\n.cvl-hero{background:var(--sand);padding:56px 0 0}\r\n.cvl-badge{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 18px 6px 6px;font-size:14px;color:var(--mut);margin-bottom:18px}\r\n.cvl-badge span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--r);color:var(--ink);font-size:14px;font-weight:700}\r\n.cvl-badge b{font:800 22px 'Barlow Condensed',sans-serif;color:var(--ink)}\r\n.cvl-hero h1{font-size:clamp(40px,6vw,76px);font-weight:800;max-width:16ch;margin-bottom:26px}\r\n.cvl-hero .cvl-btn{margin-bottom:44px}\r\n.cvl-ruler{height:34px;background:\r\n repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 100px) 0 100%\/100% 28px no-repeat,\r\n repeating-linear-gradient(90deg,var(--r) 0 1px,transparent 1px 20px) 0 100%\/100% 12px no-repeat;\r\n border-bottom:3px solid var(--ink)}\r\n\r\n.cvl-sec{padding:96px 0}\r\n.cvl-sand{background:var(--sand)}\r\n.cvl h2{font-size:clamp(34px,4.4vw,56px);font-weight:800;max-width:18ch}\r\n.cvl-sub{color:var(--mut);font-size:17px;max-width:54ch;margin:14px 0 44px}\r\n\r\n\/* interactive section *\/\r\n.cvl-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center}\r\n.cvl-tabs{display:flex;flex-direction:column;gap:10px}\r\n.cvl-tabs button{all:unset;box-sizing:border-box;cursor:pointer;display:block;padding:20px 22px;border:2px solid var(--line);border-left:6px solid var(--line);border-radius:4px;transition:border-color .25s,background .25s}\r\n.cvl-tabs button:hover{border-color:var(--r)}\r\n.cvl-tabs button:focus-visible{outline:3px solid var(--amb);outline-offset:3px}\r\n.cvl-tabs h3{font-size:28px;font-weight:700}\r\n.cvl-tabs p{font-size:15px;color:var(--mut);max-height:0;overflow:hidden;opacity:0;transition:max-height .35s,opacity .35s,margin .35s}\r\n.cvl-tabs button[aria-selected=\"true\"]{background:var(--sand);border-color:var(--r);border-left-color:var(--r)}\r\n.cvl-tabs button[aria-selected=\"true\"] p{max-height:100px;opacity:1;margin-top:8px}\r\n\r\n.cvl-sheet{margin:0;border:3px solid var(--ink);border-radius:4px;background:#fff}\r\n.cvl-svg{display:block;width:100%;height:auto}\r\n.cvl-sheet figcaption{display:flex;justify-content:space-between;gap:12px;padding:8px 14px;border-top:3px solid var(--ink);font:500 12px 'IBM Plex Mono',monospace;color:var(--ink);background:var(--sand)}\r\n.cvl-svg .g{opacity:.2;transition:opacity .5s}\r\n.cvl-svg[data-a=\"road\"] .g-road,.cvl-svg[data-a=\"bridge\"] .g-bridge,.cvl-svg[data-a=\"drain\"] .g-drain,.cvl-svg[data-a=\"earth\"] .g-earth{opacity:1}\r\n.cvl-svg[data-a=\"road\"] .g-earth,.cvl-svg[data-a=\"bridge\"] .g-earth,.cvl-svg[data-a=\"drain\"] .g-earth{opacity:.45}\r\n.cvl-svg .t{font:500 11px 'IBM Plex Mono',monospace;fill:var(--rd)}\r\n\r\n\/* chainage *\/\r\n.cvl-ch{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative}\r\n.cvl-ch::before{content:\"\";position:absolute;left:0;right:0;top:44px;height:3px;background:var(--ink)}\r\n.cvl-ch li{position:relative}\r\n.cvl-ch li::before{content:\"\";position:absolute;left:0;top:38px;width:3px;height:15px;background:var(--ink)}\r\n.cvl-ch b{display:block;font:500 15px 'IBM Plex Mono',monospace;color:var(--rd);margin-bottom:34px}\r\n.cvl-ch h4{font-size:22px;font-weight:700;margin:22px 0 8px}\r\n.cvl-ch p{font-size:15px;color:var(--mut);padding-right:6px}\r\n\r\n@media(max-width:900px){\r\n .cvl-hero{padding-top:40px}\r\n .cvl-grid{grid-template-columns:1fr;gap:28px}.cvl-sheet{order:-1}\r\n .cvl-sec{padding:64px 0}.cvl-wrap{padding:0 20px}\r\n .cvl-ch{grid-template-columns:1fr;gap:0}.cvl-ch::before{left:6px;right:auto;top:0;bottom:0;width:3px;height:auto}\r\n .cvl-ch li{padding:0 0 28px 40px}.cvl-ch li::before{left:0;top:6px;width:15px;height:3px}\r\n .cvl-ch b{margin-bottom:6px}.cvl-ch h4{margin-top:0}\r\n}\r\n@media(prefers-reduced-motion:reduce){.cvl-svg .g,.cvl-tabs p,.cvl-tabs button,.cvl-btn{transition:none}}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  var svg=document.getElementById('cvlSvg'),btns=[].slice.call(document.querySelectorAll('.cvl-tabs button')),\r\n      keys=btns.map(function(b){return b.getAttribute('data-k');}),i=0,timer=null;\r\n  function show(k){\r\n    svg.setAttribute('data-a',k);\r\n    btns.forEach(function(b){b.setAttribute('aria-selected',b.getAttribute('data-k')===k);});\r\n  }\r\n  function stop(){if(timer){clearInterval(timer);timer=null;}}\r\n  btns.forEach(function(b){\r\n    b.addEventListener('click',function(){stop();show(b.getAttribute('data-k'));});\r\n    b.addEventListener('focus',function(){stop();});\r\n  });\r\n  var still=window.matchMedia&&window.matchMedia('(prefers-reduced-motion:reduce)').matches;\r\n  if(!still){timer=setInterval(function(){i=(i+1)%keys.length;show(keys[i]);},4200);}\r\n})();\r\n<\/script>\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>\u2713150+ projects delivered We build what everything else rides on. Explore our services Road Construction Highways, urban roads and access routes engineered for durability and smooth traffic flow. Bridge Construction&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-171","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-json\/wp\/v2\/pages\/171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-json\/wp\/v2\/comments?post=171"}],"version-history":[{"count":11,"href":"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-json\/wp\/v2\/pages\/171\/revisions"}],"predecessor-version":[{"id":1125,"href":"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-json\/wp\/v2\/pages\/171\/revisions\/1125"}],"wp:attachment":[{"href":"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-json\/wp\/v2\/media?parent=171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}