{"id":963,"date":"2026-10-19T05:10:26","date_gmt":"2026-10-19T05:10:26","guid":{"rendered":"https:\/\/staging.samplesite4u.com\/binnaeng\/?page_id=963"},"modified":"2026-10-26T17:08:54","modified_gmt":"2026-10-26T17:08:54","slug":"project-management","status":"publish","type":"page","link":"https:\/\/staging.samplesite4u.com\/binnaeng\/project-management\/","title":{"rendered":"Project Management"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"963\" class=\"elementor elementor-963\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b483ede e-con-full e-flex e-con e-parent\" data-id=\"b483ede\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b14325 elementor-widget elementor-widget-html\" data-id=\"1b14325\" 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=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n<div class=\"pm-page\" id=\"pmPage\">\r\n\r\n  <!-- HERO -->\r\n  <header class=\"pm-hero\">\r\n    <div class=\"pm-wrap pm-hero-grid\">\r\n      <div class=\"pm-copy\">\r\n        <span class=\"pm-eyebrow\"><i class=\"fa-solid fa-bars-progress\"><\/i>PROJECT MANAGEMENT<\/span>\r\n        <h1>\r\n          <span class=\"pm-hf\"><span class=\"ln\">On Time.<\/span><span class=\"ln\">On Budget.<\/span><span class=\"ln\"><em>On Target.<\/em><\/span><\/span>\r\n          <span class=\"pm-hm\"><span class=\"ln\">On Time. On Budget.<\/span><span class=\"ln\"><em>On Target.<\/em><\/span><\/span>\r\n        <\/h1>\r\n        <p>Disciplined project management that keeps schedules, costs and quality under control from kickoff to handover, so every project is delivered exactly as promised.<\/p>\r\n        <div class=\"pm-actions\">\r\n          <a href=\"#pm-method\" class=\"pm-btn\">See How We Manage<i class=\"fa-solid fa-arrow-down\"><\/i><\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Gantt board -->\r\n      <div class=\"pm-board\" id=\"pmBoard\" style=\"--pp:0\">\r\n        <div class=\"pm-bh\"><span><i class=\"fa-solid fa-bars-staggered\"><\/i>PROJECT SCHEDULE<\/span><em>Illustrative<\/em><\/div>\r\n\r\n        <div class=\"pm-rows\" id=\"pmRows\">\r\n          <div class=\"pm-axis\"><span><\/span><div class=\"pm-ax\" id=\"pmAx\"><\/div><\/div>\r\n          <div id=\"pmTasks\"><\/div>\r\n          <div class=\"pm-cur\" aria-hidden=\"true\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"pm-ctl\">\r\n          <button type=\"button\" class=\"pm-play\" id=\"pmPlay\"><i class=\"fa-solid fa-play\"><\/i><span>Play<\/span><\/button>\r\n          <input type=\"range\" id=\"pmRange\" min=\"0\" max=\"100\" step=\"0.1\" value=\"0\" aria-label=\"Scrub through the project timeline\">\r\n        <\/div>\r\n\r\n        <div class=\"pm-read\">\r\n          <div><small>PROGRESS<\/small><b id=\"pmPct\">0%<\/b><\/div>\r\n          <div><small>TASKS COMPLETE<\/small><b id=\"pmDone\">0 \/ 6<\/b><\/div>\r\n          <div class=\"pm-next\"><small>NEXT MILESTONE<\/small><b id=\"pmNext\"><i class=\"fa-solid fa-diamond\"><\/i>Kick-Off<\/b><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"pm-leg\" aria-hidden=\"true\"><span><i class=\"c1\"><\/i>Critical path<\/span><span><i class=\"c2\"><\/i>Task<\/span><span><i class=\"fa-solid fa-diamond lg\"><\/i>Milestone<\/span><span><i class=\"fa-solid fa-location-dot lg\"><\/i>Today<\/span><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/header>\r\n\r\n  <!-- METHOD: stage gates -->\r\n  <section class=\"pm-sec pm-grid-bg\" id=\"pm-method\">\r\n    <div class=\"pm-wrap\">\r\n      <div class=\"pm-head pm-rv\">\r\n        <span class=\"pm-eyebrow pm-eyebrow-d\"><i class=\"fa-solid fa-route\"><\/i>OUR APPROACH<\/span>\r\n        <h2>Five Gates From Idea To Handover<\/h2>\r\n        <p>Every project passes through clear stage gates. Select a gate to see what happens inside it.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"pm-gates pm-rv\" id=\"pmGates\" style=\"--g:0\">\r\n        <div class=\"pm-gl\" aria-hidden=\"true\"><i><\/i><\/div>\r\n        <button type=\"button\" class=\"pm-g on\" data-i=\"0\" aria-pressed=\"true\"><span class=\"d\"><i class=\"fa-solid fa-flag\"><\/i><\/span><small>GATE 1<\/small><b>Initiate<\/b><\/button>\r\n        <button type=\"button\" class=\"pm-g\" data-i=\"1\" aria-pressed=\"false\"><span class=\"d\"><i class=\"fa-solid fa-map\"><\/i><\/span><small>GATE 2<\/small><b>Plan<\/b><\/button>\r\n        <button type=\"button\" class=\"pm-g\" data-i=\"2\" aria-pressed=\"false\"><span class=\"d\"><i class=\"fa-solid fa-people-carry-box\"><\/i><\/span><small>GATE 3<\/small><b>Execute<\/b><\/button>\r\n        <button type=\"button\" class=\"pm-g\" data-i=\"3\" aria-pressed=\"false\"><span class=\"d\"><i class=\"fa-solid fa-chart-line\"><\/i><\/span><small>GATE 4<\/small><b>Monitor &amp; Control<\/b><\/button>\r\n        <button type=\"button\" class=\"pm-g\" data-i=\"4\" aria-pressed=\"false\"><span class=\"d\"><i class=\"fa-solid fa-flag-checkered\"><\/i><\/span><small>GATE 5<\/small><b>Close<\/b><\/button>\r\n      <\/div>\r\n\r\n      <div class=\"pm-gc pm-rv\" aria-live=\"polite\">\r\n        <span class=\"pm-wm\" id=\"pmWm\">01<\/span>\r\n        <div class=\"pm-gcl\">\r\n          <small id=\"pmGs\"><i class=\"fa-solid fa-flag\"><\/i>GATE 1<\/small>\r\n          <h3 id=\"pmGt\">Initiate<\/h3>\r\n          <p id=\"pmGp\"><\/p>\r\n        <\/div>\r\n        <ul class=\"pm-gcr\" id=\"pmGl\"><\/ul>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- CONTROLS -->\r\n  <section class=\"pm-ctrls\">\r\n    <div class=\"pm-wrap\">\r\n      <div class=\"pm-head pm-head-l pm-rv\">\r\n        <span class=\"pm-eyebrow\"><i class=\"fa-solid fa-sliders\"><\/i>PROJECT CONTROLS<\/span>\r\n        <h2>Six Things We Never Let Drift<\/h2>\r\n      <\/div>\r\n      <div class=\"pm-cgrid\">\r\n        <div class=\"pm-cc pm-rv\"><span class=\"n\">01<\/span><i class=\"fa-solid fa-calendar-check\"><\/i><h3>Schedule<\/h3><p>Baseline programmes, look-ahead planning and early warnings keep every milestone in sight.<\/p><\/div>\r\n        <div class=\"pm-cc pm-rv\"><span class=\"n\">02<\/span><i class=\"fa-solid fa-coins\"><\/i><h3>Cost<\/h3><p>Budgets are tracked line by line, with change control that keeps spending transparent.<\/p><\/div>\r\n        <div class=\"pm-cc pm-rv\"><span class=\"n\">03<\/span><i class=\"fa-solid fa-medal\"><\/i><h3>Quality<\/h3><p>Inspection and test plans make sure work meets specification the first time.<\/p><\/div>\r\n        <div class=\"pm-cc pm-rv\"><span class=\"n\">04<\/span><i class=\"fa-solid fa-triangle-exclamation\"><\/i><h3>Risk<\/h3><p>Risks are identified early, owned by name and reviewed throughout the project.<\/p><\/div>\r\n        <div class=\"pm-cc pm-rv\"><span class=\"n\">05<\/span><i class=\"fa-solid fa-helmet-safety\"><\/i><h3>Safety<\/h3><p>HSE requirements are built into every plan, method statement and site briefing.<\/p><\/div>\r\n        <div class=\"pm-cc pm-rv\"><span class=\"n\">06<\/span><i class=\"fa-solid fa-comments\"><\/i><h3>Communication<\/h3><p>Clear reporting and regular reviews keep clients and teams aligned.<\/p><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- TAPE -->\r\n  <div class=\"pm-tape\" aria-hidden=\"true\">\r\n    <div class=\"pm-track\">\r\n      <i class=\"fa-solid fa-clock ic\"><\/i><span>ON TIME<\/span><i class=\"fa-solid fa-angles-right sep\"><\/i><i class=\"fa-solid fa-coins ic\"><\/i><span>ON BUDGET<\/span><i class=\"fa-solid fa-angles-right sep\"><\/i><i class=\"fa-solid fa-bullseye ic\"><\/i><span>ON TARGET<\/span><i class=\"fa-solid fa-angles-right sep\"><\/i><i class=\"fa-solid fa-clock ic\"><\/i><span>ON TIME<\/span><i class=\"fa-solid fa-angles-right sep\"><\/i><i class=\"fa-solid fa-coins ic\"><\/i><span>ON BUDGET<\/span><i class=\"fa-solid fa-angles-right sep\"><\/i><i class=\"fa-solid fa-bullseye ic\"><\/i><span>ON TARGET<\/span><i class=\"fa-solid fa-angles-right sep\"><\/i><i class=\"fa-solid fa-clock ic\"><\/i><span>ON TIME<\/span><i class=\"fa-solid fa-angles-right sep\"><\/i><i class=\"fa-solid fa-coins ic\"><\/i><span>ON BUDGET<\/span><i class=\"fa-solid fa-angles-right sep\"><\/i><i class=\"fa-solid fa-bullseye ic\"><\/i><span>ON TARGET<\/span><i class=\"fa-solid fa-angles-right sep\"><\/i><i class=\"fa-solid fa-clock ic\"><\/i><span>ON TIME<\/span><i class=\"fa-solid fa-angles-right sep\"><\/i><i class=\"fa-solid fa-coins ic\"><\/i><span>ON BUDGET<\/span><i class=\"fa-solid fa-angles-right sep\"><\/i><i class=\"fa-solid fa-bullseye ic\"><\/i><span>ON TARGET<\/span><i class=\"fa-solid fa-angles-right sep\"><\/i>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n.pm-page{--n:#0d1e33;--br:#FF6B00;--sl:#64748b;--line:#e3e9ef;--tint:#f1f4f8;--lw:150px;\r\n  font-family:'Montserrat',sans-serif;color:var(--n);width:100%;overflow-x:clip;background:#fff;-webkit-text-size-adjust:100%}\r\n.pm-page *,.pm-page *::before,.pm-page *::after{box-sizing:border-box;margin:0;padding:0}\r\n\/* Montserrat on the text only (NOT on pseudo-elements, so icons keep their font) *\/\r\n.pm-page *{font-family:'Montserrat',sans-serif}\r\n\/* Font Awesome icons: force the icon font on the <i> AND its ::before glyph *\/\r\n.pm-page i.fa-solid,\r\n.pm-page i.fa-solid::before{font-family:\"Font Awesome 6 Free\"!important;font-weight:900!important;font-style:normal}\r\n.pm-page img{max-width:100%}\r\n.pm-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,32px)}\r\n.pm-sec{padding:100px 0}\r\n.pm-grid-bg,.pm-hero{background-color:#fafbfc;background-image:linear-gradient(#f0f3f6 1px,transparent 1px),linear-gradient(90deg,#f0f3f6 1px,transparent 1px);background-size:45px 45px}\r\n\r\n.pm-eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:3px;color:var(--br);margin-bottom:22px}\r\n.pm-eyebrow i{font-size:15px}\r\n.pm-eyebrow-d{color:var(--sl)}.pm-eyebrow-d i{color:var(--br)}\r\n.pm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 30px;border-radius:8px;background:var(--br);color:var(--n)!important;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 10px 24px rgba(255,107,0,.32);transition:background .2s,color .2s,transform .2s}\r\n.pm-btn i{font-size:13px;transition:transform .2s}.pm-btn:hover{background:var(--n);color:#fff!important;transform:translateY(-2px)}.pm-btn:hover i{transform:translateY(3px)}\r\n.pm-btn:focus-visible,.pm-g:focus-visible,.pm-play:focus-visible,.pm-ctl input:focus-visible{outline:3px solid var(--br);outline-offset:3px}\r\n\r\n.pm-head{max-width:640px;margin-bottom:48px}\r\n.pm-head h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;line-height:1.1;letter-spacing:-.03em;margin-bottom:14px}\r\n.pm-head p{font-size:15px;line-height:1.8;color:var(--sl)}\r\n.pm-head-l h2{color:#fff}\r\n.pm-js .pm-rv{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}\r\n.pm-js .pm-rv.in{opacity:1;transform:none}\r\n\r\n\/* hero *\/\r\n.pm-hero{padding:92px 0 96px}\r\n.pm-hero-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}\r\n.pm-copy{container-type:inline-size}\r\n.pm-copy h1{font-size:clamp(34px,5vw,56px);font-size:min(calc(100cqw \/ 7.4),70px);font-weight:800;line-height:1.04;letter-spacing:-.04em;margin-bottom:26px}\r\n.pm-copy h1 .ln{display:block;white-space:nowrap}\r\n.pm-copy h1 em{font-style:normal;color:var(--br)}\r\n.pm-hm{display:none}\r\n.pm-copy p{font-size:15px;line-height:1.8;color:var(--sl);max-width:46ch;margin-bottom:34px}\r\n.pm-copy>*{animation:pmup .8s cubic-bezier(.2,.8,.2,1) both}\r\n.pm-copy>:nth-child(2){animation-delay:.1s}.pm-copy>:nth-child(3){animation-delay:.2s}.pm-copy>:nth-child(4){animation-delay:.3s}\r\n@keyframes pmup{from{opacity:0;transform:translateY(26px)}}\r\n\r\n\/* board *\/\r\n.pm-board{background:#fff;border:1.5px solid var(--n);border-radius:14px;padding:16px 20px 18px;box-shadow:0 26px 56px rgba(13,30,51,.14);animation:pmup .9s cubic-bezier(.2,.8,.2,1) .2s both}\r\n.pm-bh{display:flex;justify-content:space-between;align-items:center;padding:4px 0 14px;border-bottom:1.5px solid var(--n);font-size:10px;font-weight:700;letter-spacing:2px}\r\n.pm-bh span{display:flex;align-items:center;gap:10px}.pm-bh i{color:var(--br);font-size:14px}\r\n.pm-bh em{font-style:normal;color:var(--sl);letter-spacing:1.4px}\r\n.pm-rows{position:relative;margin-top:6px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}\r\n.pm-axis,.pm-r{display:grid;grid-template-columns:var(--lw) 1fr;align-items:center}\r\n.pm-axis{height:30px}\r\n.pm-ax{display:flex}\r\n.pm-ax span{flex:1;font-size:9px;font-weight:700;letter-spacing:.5px;color:#94a3b8;border-left:1px solid #e3e9ef;padding-left:4px}\r\n.pm-r{height:46px;border-top:1px solid #eef1f5}\r\n.pm-n{font-size:12.5px;font-weight:700;padding-right:10px;display:flex;align-items:center;gap:8px;line-height:1.2}\r\n.pm-n i{color:var(--br);font-size:12px;width:14px;text-align:center;flex-shrink:0}\r\n.pm-t{position:relative;height:100%;background-image:linear-gradient(90deg,#eef1f5 1px,transparent 1px);background-size:calc(100% \/ 12) 100%}\r\n.pm-bar{position:absolute;top:10px;height:26px;border-radius:8px;background:rgba(13,30,51,.12);overflow:hidden;transform-origin:left;animation:pmbar .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * .12s + .4s)}\r\n.pm-bar.c{background:rgba(255,107,0,.2)}\r\n@keyframes pmbar{from{transform:scaleX(0)}}\r\n.pm-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--n)}\r\n.pm-bar.c .pm-fill{background:var(--br)}\r\n.pm-ck{position:absolute;right:7px;top:50%;margin-top:-6px;font-size:11px;color:#fff;opacity:0;transform:scale(0);transition:all .3s cubic-bezier(.2,1.6,.4,1)}\r\n.pm-bar.c .pm-ck{color:var(--n)}\r\n.pm-bar.done .pm-ck{opacity:1;transform:scale(1)}\r\n.pm-ms{position:absolute;top:50%;margin:-10px 0 0 -10px;font-size:20px;line-height:1;color:#b7c2d1;transition:color .3s,transform .3s,filter .3s}\r\n.pm-ms.on{color:var(--br);transform:scale(1.18);filter:drop-shadow(0 0 7px rgba(255,107,0,.75))}\r\n.pm-cur{position:absolute;top:0;bottom:0;left:calc(var(--lw) + (100% - var(--lw)) * var(--pp));width:2px;margin-left:-1px;background:var(--br);z-index:3;pointer-events:none;box-shadow:0 0 12px rgba(255,107,0,.7)}\r\n.pm-cur::before{content:\"\";position:absolute;left:50%;top:-4px;width:14px;height:14px;margin-left:-7px;background:var(--br);border:3px solid #fff;border-radius:50%;box-shadow:0 2px 8px rgba(13,30,51,.3)}\r\n\r\n.pm-ctl{display:flex;align-items:center;gap:16px;margin:16px 0 14px}\r\n.pm-play{display:inline-flex;align-items:center;gap:9px;flex-shrink:0;min-width:104px;justify-content:center;font-family:inherit;font-size:13px;font-weight:700;color:#fff;background:var(--n);border:0;border-radius:10px;padding:12px 18px;cursor:pointer;transition:background .2s}\r\n.pm-play:hover{background:var(--br);color:var(--n)}\r\n.pm-play i{font-size:12px}\r\n.pm-ctl input{-webkit-appearance:none;appearance:none;flex:1;height:8px;border-radius:5px;background:linear-gradient(90deg,var(--br) calc(var(--pp) * 100%),#e3e9ef calc(var(--pp) * 100%));cursor:pointer;touch-action:pan-y;margin:0;outline:none}\r\n.pm-ctl input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--br);border:4px solid #fff;box-shadow:0 3px 10px rgba(13,30,51,.35)}\r\n.pm-ctl input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--br);border:4px solid #fff;box-shadow:0 3px 10px rgba(13,30,51,.35)}\r\n.pm-read{display:grid;grid-template-columns:1fr 1.1fr 1.7fr;gap:12px}\r\n.pm-read>div{background:var(--tint);border-radius:10px;padding:12px 14px;min-width:0}\r\n.pm-read small{display:block;font-size:9px;font-weight:700;letter-spacing:1.5px;color:#8795ad;margin-bottom:5px}\r\n.pm-read b{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}\r\n.pm-next b{font-size:14px;letter-spacing:0;white-space:normal;line-height:1.25}\r\n.pm-next b i{color:var(--br);font-size:10px;flex-shrink:0}\r\n.pm-leg{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-size:10.5px;font-weight:600;color:var(--sl)}\r\n.pm-leg span{display:flex;align-items:center;gap:7px}\r\n.pm-leg i{display:inline-block}\r\n.pm-leg .c1{width:18px;height:8px;border-radius:4px;background:var(--br)}\r\n.pm-leg .c2{width:18px;height:8px;border-radius:4px;background:var(--n)}\r\n.pm-leg .lg{font-size:12px;color:var(--br)}\r\n\r\n\/* gates *\/\r\n.pm-gates{position:relative;display:grid;grid-template-columns:repeat(5,1fr);margin-bottom:34px}\r\n.pm-gl{position:absolute;left:10%;right:10%;top:38px;height:4px;background:var(--line);border-radius:2px}\r\n.pm-gl i{display:block;height:100%;width:calc(var(--g) * 25%);width:calc(var(--g) \/ 4 * 100%);background:var(--br);border-radius:2px;transition:width .6s cubic-bezier(.4,0,.2,1)}\r\n.pm-g{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;background:none;border:0;font-family:inherit;color:var(--n);cursor:pointer;padding:0 4px}\r\n.pm-g .d{display:flex;width:76px;height:76px;align-items:center;justify-content:center;margin-bottom:12px}\r\n.pm-g .d::before{content:\"\";position:absolute;width:54px;height:54px;background:#fff;border:2.5px solid var(--n);border-radius:10px;transform:rotate(45deg);transition:all .4s cubic-bezier(.2,1.4,.4,1)}\r\n.pm-g .d i{position:relative;font-size:19px;color:var(--n);transition:color .3s}\r\n.pm-g small{font-size:10px;font-weight:800;letter-spacing:2px;color:#94a3b8;transition:color .3s}\r\n.pm-g b{font-size:15px;font-weight:700;line-height:1.25}\r\n.pm-g:hover .d::before{border-color:var(--br);transform:rotate(45deg) scale(1.08)}\r\n.pm-g.past .d::before{background:var(--n);border-color:var(--n)}\r\n.pm-g.past .d i{color:var(--br)}\r\n.pm-g.on .d::before{background:var(--br);border-color:var(--br);transform:rotate(225deg) scale(1.14);box-shadow:0 10px 24px rgba(255,107,0,.4)}\r\n.pm-g.on .d i{color:var(--n)}\r\n.pm-g.on small{color:var(--br)}\r\n.pm-gc{position:relative;display:grid;grid-template-columns:1fr 1.1fr;gap:48px;background:var(--n);color:#fff;border-radius:20px;padding:46px 48px;overflow:hidden;box-shadow:0 20px 50px rgba(13,30,51,.16)}\r\n.pm-gc::before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--br)}\r\n.pm-wm{position:absolute;right:30px;bottom:-30px;font-size:190px;font-weight:800;letter-spacing:-.06em;color:rgba(255,255,255,.05);line-height:1;pointer-events:none}\r\n.pm-gcl small{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:2.4px;color:var(--br);margin-bottom:14px}\r\n.pm-gcl h3{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.03em;margin-bottom:14px}\r\n.pm-gcl p{font-size:15px;line-height:1.8;color:rgba(255,255,255,.76);max-width:40ch}\r\n.pm-gcr{list-style:none;position:relative;z-index:1;align-self:center}\r\n.pm-gcr li{display:flex;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:15px;font-weight:600;opacity:0;animation:pmli .5s cubic-bezier(.2,.8,.2,1) both}\r\n.pm-gcr li:last-child{border-bottom:0}\r\n.pm-gcr li i{width:28px;height:28px;border-radius:50%;background:var(--br);color:var(--n);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;animation:pmpop .5s cubic-bezier(.2,1.6,.4,1) both;animation-delay:inherit}\r\n@keyframes pmli{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}\r\n@keyframes pmpop{from{transform:scale(0)}}\r\n\r\n\/* controls *\/\r\n.pm-ctrls{background:var(--n);color:#fff;padding:100px 0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px}\r\n.pm-cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}\r\n.pm-cc{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:32px 28px 30px;overflow:hidden;transition:transform .3s,background .3s,border-color .3s}\r\n.pm-cc::after{content:\"\";position:absolute;left:0;right:0;top:0;height:4px;background:var(--br);transform:scaleX(0);transform-origin:left;transition:transform .5s}\r\n.pm-cc:hover{transform:translateY(-6px);background:rgba(255,255,255,.09);border-color:rgba(255,107,0,.6)}\r\n.pm-cc:hover::after{transform:scaleX(1)}\r\n.pm-cc .n{position:absolute;top:26px;right:26px;font-size:12px;font-weight:800;color:rgba(255,255,255,.3)}\r\n.pm-cc>i{width:54px;height:54px;border-radius:14px;background:var(--br);color:var(--n);display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:22px;transition:transform .4s}\r\n.pm-cc:hover>i{transform:rotate(-8deg) scale(1.08)}\r\n.pm-cc h3{font-size:20px;font-weight:700;margin-bottom:10px;letter-spacing:-.01em}\r\n.pm-cc p{font-size:14px;line-height:1.75;color:rgba(255,255,255,.72)}\r\n\r\n\/* tape *\/\r\n.pm-tape{background:var(--br);overflow:hidden;padding:20px 0}\r\n.pm-track{display:inline-flex;align-items:center;white-space:nowrap;animation:pmmarq 34s linear infinite}\r\n.pm-track span{font-size:clamp(18px,2.4vw,26px);font-weight:800;letter-spacing:.18em;color:var(--n);padding:0 4px}\r\n.pm-track .ic{font-size:clamp(18px,2.2vw,24px);color:var(--n);margin-right:14px}\r\n.pm-track .sep{font-size:16px;color:var(--n);opacity:.55;margin:0 38px;flex-shrink:0}\r\n@keyframes pmmarq{to{transform:translateX(-50%)}}\r\n\r\n\/* tablet *\/\r\n@media(max-width:1024px){\r\n  .pm-page{--lw:128px}\r\n  .pm-hero-grid{grid-template-columns:minmax(0,1fr);gap:48px}\r\n  .pm-copy{max-width:720px}\r\n  .pm-board{max-width:780px;width:100%;margin:0 auto}\r\n  .pm-cgrid{grid-template-columns:repeat(2,1fr)}\r\n  .pm-gc{grid-template-columns:1fr;gap:28px;padding:38px 34px}\r\n}\r\n\/* phone *\/\r\n@media(max-width:768px){\r\n  .pm-page{--lw:106px}\r\n  .pm-hf{display:none}.pm-hm{display:block}\r\n  .pm-copy h1{font-size:min(calc(100cqw \/ 13.6),42px)}\r\n  .pm-hero{padding:60px 0 64px}.pm-sec,.pm-ctrls{padding:64px 0}\r\n  .pm-btn{width:100%}\r\n  .pm-board{padding:12px 12px 16px}\r\n  .pm-n{font-size:10.5px;padding-right:4px;gap:6px}.pm-n i{font-size:10px;width:12px}\r\n  .pm-r{height:44px}.pm-bar{top:9px;height:26px}\r\n  .pm-ax span{font-size:8px;padding-left:2px}.pm-ax span:not(:nth-child(3n+1)){color:transparent}\r\n  .pm-play{min-width:0;padding:12px 14px}.pm-play span{display:none}\r\n  .pm-read{grid-template-columns:1fr 1fr}.pm-next{grid-column:1\/-1}\r\n  .pm-cgrid{grid-template-columns:1fr}\r\n  .pm-g .d{width:52px;height:52px;margin-bottom:8px}.pm-g .d::before{width:36px;height:36px;border-width:2px;border-radius:7px}\r\n  .pm-g .d i{font-size:14px}.pm-g small{display:none}.pm-g b{font-size:11px}\r\n  .pm-gl{top:26px}\r\n  .pm-gc{padding:30px 22px 26px;border-radius:16px}\r\n  .pm-wm{font-size:120px;right:12px}\r\n  .pm-gcr li{font-size:14px}\r\n}\r\n@media(max-width:420px){\r\n  .pm-page{--lw:100px}\r\n  .pm-n{font-size:10px;gap:5px}\r\n  .pm-leg{font-size:10px;gap:6px 12px}\r\n  .pm-read b{font-size:15px}\r\n}\r\n@media(prefers-reduced-motion:reduce){\r\n  .pm-copy>*,.pm-board,.pm-bar,.pm-track{animation:none}\r\n  .pm-js .pm-rv{opacity:1;transform:none;transition:none}\r\n  .pm-gcr li,.pm-gcr li i{animation:none;opacity:1}\r\n  .pm-cc,.pm-cc::after,.pm-gl i{transition:none}\r\n}\r\n\r\n\/* ===== WHITE TEXT FIX (overrides theme colors) ===== *\/\r\n\/* Stage gate card (Initiate, Plan, Execute...) *\/\r\n.pm-page .pm-gc,\r\n.pm-page .pm-gc h3,\r\n.pm-page .pm-gc p,\r\n.pm-page .pm-gc li,\r\n.pm-page .pm-gcl h3,\r\n.pm-page .pm-gcl p,\r\n.pm-page .pm-gcr li{\r\n  color:#fff !important;\r\n}\r\n\/* Control cards (Schedule, Cost, Quality...) and their heading *\/\r\n.pm-page .pm-ctrls h2,\r\n.pm-page .pm-cc h3,\r\n.pm-page .pm-cc p{\r\n  color:#fff !important;\r\n}\r\n\/* Keep the check icons inside the orange circles dark *\/\r\n.pm-page .pm-gcr li i{color:var(--n) !important}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  var page=document.getElementById('pmPage');if(!page)return;\r\n  var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n  \/* ---------- Gantt ---------- *\/\r\n  var T=[{n:'Planning',ic:'fa-clipboard-list',s:0,e:12,c:1},{n:'Design',ic:'fa-pen-ruler',s:8,e:30,c:1},{n:'Procurement',ic:'fa-cart-shopping',s:22,e:46,c:0},{n:'Mobilization',ic:'fa-truck',s:38,e:50,c:1},{n:'Construction',ic:'fa-helmet-safety',s:48,e:84,c:1},{n:'Commissioning',ic:'fa-gauge-high',s:78,e:96,c:1}];\r\n  var M=[{n:'Kick-Off',p:0},{n:'Design Freeze',p:30},{n:'Procurement Complete',p:46},{n:'Practical Completion',p:84},{n:'Handover',p:100}];\r\n  var board=document.getElementById('pmBoard'),rowsEl=document.getElementById('pmRows'),tasks=document.getElementById('pmTasks'),\r\n      ax=document.getElementById('pmAx'),rg=document.getElementById('pmRange'),play=document.getElementById('pmPlay'),\r\n      pct=document.getElementById('pmPct'),dn=document.getElementById('pmDone'),nx=document.getElementById('pmNext');\r\n  var i,h='';\r\n  for(i=1;i<=12;i++)h+='<span>M'+i+'<\/span>';ax.innerHTML=h;\r\n  h='';\r\n  T.forEach(function(t,k){\r\n    h+='<div class=\"pm-r\"><div class=\"pm-n\"><i class=\"fa-solid '+t.ic+'\"><\/i><span>'+t.n+'<\/span><\/div><div class=\"pm-t\"><div class=\"pm-bar'+(t.c?' c':'')+'\" style=\"left:'+t.s+'%;width:'+(t.e-t.s)+'%;--i:'+k+'\"><i class=\"pm-fill\"><\/i><i class=\"fa-solid fa-check pm-ck\"><\/i><\/div><\/div><\/div>';\r\n  });\r\n  h+='<div class=\"pm-r\"><div class=\"pm-n\"><i class=\"fa-solid fa-diamond\"><\/i><span>Milestones<\/span><\/div><div class=\"pm-t\">';\r\n  M.forEach(function(m){h+='<i class=\"fa-solid fa-diamond pm-ms\" title=\"'+m.n+'\" style=\"left:'+m.p+'%\"><\/i>'});\r\n  h+='<\/div><\/div>';\r\n  tasks.innerHTML=h;\r\n  var bars=tasks.querySelectorAll('.pm-bar'),ms=tasks.querySelectorAll('.pm-ms');\r\n  var p=0,raf=null,touched=false;\r\n\r\n  function set(v){\r\n    p=Math.max(0,Math.min(100,v));\r\n    board.style.setProperty('--pp',p\/100);\r\n    rg.value=p;\r\n    var done=0;\r\n    bars.forEach(function(b,k){\r\n      var t=T[k],f=Math.max(0,Math.min(1,(p-t.s)\/(t.e-t.s)));\r\n      b.querySelector('.pm-fill').style.width=(f*100)+'%';\r\n      var d=p>=t.e;if(d)done++;b.classList.toggle('done',d);\r\n    });\r\n    var next=null;\r\n    ms.forEach(function(m,k){var on=p>=M[k].p;m.classList.toggle('on',on);if(!on&&!next)next=M[k]});\r\n    pct.textContent=Math.round(p)+'%';\r\n    dn.textContent=done+' \/ '+T.length;\r\n    nx.innerHTML=next?'<i class=\"fa-solid fa-diamond\"><\/i>'+next.n:'<i class=\"fa-solid fa-circle-check\"><\/i>Project Handed Over';\r\n    play.querySelector('i').className='fa-solid '+(raf?'fa-pause':(p>=100?'fa-rotate-left':'fa-play'));\r\n    play.querySelector('span').textContent=raf?'Pause':(p>=100?'Replay':'Play');\r\n  }\r\n  function stop(){if(raf){cancelAnimationFrame(raf);raf=null}}\r\n  function run(){\r\n    stop();\r\n    if(p>=100)p=0;\r\n    var from=p,t0=null,dur=(100-from)\/100*11000;\r\n    (function f(t){\r\n      if(!t0)t0=t;var k=Math.min(1,(t-t0)\/dur);\r\n      p=from+(100-from)*k;\r\n      if(k<1){raf=requestAnimationFrame(f);set(p)}else{raf=null;set(100)}\r\n    })(performance.now());\r\n    set(p);\r\n  }\r\n  play.addEventListener('click',function(){touched=true;if(raf){stop();set(p)}else run()});\r\n  rg.addEventListener('input',function(){touched=true;stop();set(parseFloat(rg.value))});\r\n\r\n  \/\/ scrub directly on the chart\r\n  var drag=false;\r\n  function fromX(x){\r\n    var t=rowsEl.querySelector('.pm-t'),r=t.getBoundingClientRect();\r\n    touched=true;stop();set((x-r.left)\/r.width*100);\r\n  }\r\n  rowsEl.addEventListener('pointerdown',function(e){drag=true;try{rowsEl.setPointerCapture(e.pointerId)}catch(x){}fromX(e.clientX)});\r\n  rowsEl.addEventListener('pointermove',function(e){if(drag)fromX(e.clientX)});\r\n  ['pointerup','pointercancel'].forEach(function(n){rowsEl.addEventListener(n,function(){drag=false})});\r\n\r\n  set(reduce?58:0);\r\n  if(!reduce)setTimeout(function(){if(!touched)run()},1600);\r\n\r\n  \/* ---------- Gates ---------- *\/\r\n  var G=[\r\n    {t:'Initiate',s:'Define the project\\u2019s purpose, scope and success criteria before anything is committed.',l:['Scope and objectives','Stakeholder identification','Feasibility and business case','Project charter'],ic:'fa-flag'},\r\n    {t:'Plan',s:'Build the roadmap: schedule, budget, resources and risk, all agreed and baselined.',l:['Work breakdown structure','Schedule and budget baseline','Resource and procurement plan','Risk and safety plans'],ic:'fa-map'},\r\n    {t:'Execute',s:'Mobilize teams and deliver the work to plan, with every package coordinated.',l:['Team coordination','Procurement and logistics','Quality assurance','Progress reporting'],ic:'fa-people-carry-box'},\r\n    {t:'Monitor & Control',s:'Track performance against the baseline and correct course early.',l:['Schedule and cost tracking','Change control','Risk monitoring','Site inspections and audits'],ic:'fa-chart-line'},\r\n    {t:'Close',s:'Hand over with complete records, a signed-off result and lessons learned.',l:['Final inspection and testing','Handover documentation','Client sign-off','Lessons learned'],ic:'fa-flag-checkered'}\r\n  ];\r\n  var gates=document.getElementById('pmGates'),gb=gates.querySelectorAll('.pm-g'),\r\n      gs=document.getElementById('pmGs'),gt=document.getElementById('pmGt'),gp=document.getElementById('pmGp'),gl=document.getElementById('pmGl'),wm=document.getElementById('pmWm');\r\n  function esc(s){return s.replace(\/&\/g,'&amp;')}\r\n  function gate(k){\r\n    var d=G[k];\r\n    gates.style.setProperty('--g',k);\r\n    gb.forEach(function(b,j){b.classList.toggle('on',j===k);b.classList.toggle('past',j<k);b.setAttribute('aria-pressed',j===k)});\r\n    gs.innerHTML='<i class=\"fa-solid '+d.ic+'\"><\/i>GATE '+(k+1);\r\n    gt.textContent=d.t;gp.textContent=d.s;wm.textContent='0'+(k+1);\r\n    gl.innerHTML=d.l.map(function(x,j){return '<li style=\"animation-delay:'+(j*.12+.1)+'s\"><i class=\"fa-solid fa-check\"><\/i>'+esc(x)+'<\/li>'}).join('');\r\n  }\r\n  gb.forEach(function(b){b.addEventListener('click',function(){gate(+b.getAttribute('data-i'))})});\r\n  gate(0);\r\n\r\n  \/* ---------- Reveal ---------- *\/\r\n  var rv=page.querySelectorAll('.pm-rv');\r\n  if('IntersectionObserver' in window){\r\n    page.classList.add('pm-js');\r\n    var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}})},{threshold:.15});\r\n    rv.forEach(function(el,k){if(!el.classList.contains('pm-cc'))el.style.transitionDelay=((k%3)*.08)+'s';io.observe(el)});\r\n  }\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>PROJECT MANAGEMENT On Time.On Budget.On Target. On Time. On Budget.On Target. Disciplined project management that keeps schedules, costs and quality under control from kickoff to handover, so every project is&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-963","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-json\/wp\/v2\/pages\/963","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=963"}],"version-history":[{"count":9,"href":"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-json\/wp\/v2\/pages\/963\/revisions"}],"predecessor-version":[{"id":1134,"href":"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-json\/wp\/v2\/pages\/963\/revisions\/1134"}],"wp:attachment":[{"href":"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-json\/wp\/v2\/media?parent=963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}