:root{
  --ink:#141517; --navy:#1c1e21; --navy2:#26282c; --steel:#a9adb2; --steel-dim:#6c7076;
  --ember:#ff6a35; --ember-dim:#c94e1e; --paper:#eceef0; --white:#fff;
  --line: rgba(255,255,255,.10);
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:inherit; margin:0; padding:0;}
html{scroll-padding-top:env(safe-area-inset-top,0px); scroll-behavior:smooth;}
body{font-family:Inter,'Segoe UI',Roboto,Arial,sans-serif; color:var(--ink); background:var(--paper); line-height:1.55; overflow-x:hidden;}
h1,h2,h3,.brand{font-family:Oswald,Arial,sans-serif; letter-spacing:.2px;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
img{max-width:100%; display:block;}

/* NAV */
header{position:sticky; top:0; z-index:50; background:rgba(238,240,241,.96); backdrop-filter:blur(8px); border-bottom:1px solid rgba(0,0,0,.08);}
nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1180px; margin:0 auto;}
.brand{display:block;}
.brand img{height:44px; width:auto; display:block;}
footer .brand img{height:46px;}
.navlinks{display:flex; gap:30px; list-style:none;}
.navlinks a{color:var(--steel-dim); font-size:15px; font-weight:500; transition:color .2s;}
.navlinks a:hover, .navlinks a.active{color:var(--ink);}
.navcta{display:flex; align-items:center; gap:20px;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 22px; font-weight:600; font-size:14.5px; border:1.5px solid transparent; transition:transform .15s ease, background .2s;}
.btn:active{transform:scale(.97);}
.btn-ember{background:var(--ember); color:var(--white);}
.btn-ember:hover{background:#ff7f52;}
.btn-line{border-color:rgba(0,0,0,.25); color:var(--ink);}
.btn-line:hover{border-color:var(--ink); background:rgba(0,0,0,.05);}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer;}
.burger span{width:24px; height:2px; background:var(--ink);}

/* HERO */
.hero{background:linear-gradient(180deg,var(--ink),var(--navy) 70%); color:var(--white); position:relative; padding:90px 0 0;}
.hero::before{content:"";position:absolute; inset:0; background:
  repeating-linear-gradient(115deg, transparent 0 60px, rgba(255,255,255,.025) 60px 62px);
  pointer-events:none;}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; position:relative;}
.eyebrow{color:var(--ember); font-size:13px; font-weight:600; letter-spacing:1.5px;}
.hero h1{font-size:clamp(40px,5.4vw,66px); font-weight:700; line-height:1.05; margin:14px 0 20px; overflow:hidden;}
.hero h1 .row{display:block; clip-path:inset(0 100% 0 0); animation:reveal .8s cubic-bezier(.4,0,.2,1) forwards;}
.hero h1 .row:nth-child(2){animation-delay:.12s;}
.hero h1 .accent{color:var(--ember);}
@keyframes reveal{to{clip-path:inset(0 0 0 0);}}
.hero p{max-width:480px; color:var(--steel); font-size:17px;}
.hero .actions{display:flex; gap:16px; margin:32px 0 40px; flex-wrap:wrap;}

.hero-art{position:relative; height:360px; display:flex; align-items:center; justify-content:center;}
.coil-wrap{position:absolute; width:230px; height:230px; left:2%; top:6%; animation:spin 16s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.rebar-wrap{position:absolute; width:300px; right:0; bottom:12%; overflow:hidden; animation:float 5s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}
.rebar-wrap img{width:100%; display:block; filter:drop-shadow(0 16px 22px rgba(0,0,0,.5));}
.shine{position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(115deg,transparent, rgba(255,255,255,.5) 50%, transparent); animation:sweep 3.4s ease-in-out infinite;}
@keyframes sweep{0%{left:-60%;} 60%{left:130%;} 100%{left:130%;}}

.stat-strip{border-top:1px solid var(--line); margin-top:10px;}
.stat-strip .wrap{display:grid; grid-template-columns:repeat(3,1fr); }
.stat-strip div{padding:22px 0; border-right:1px solid var(--line);}
.stat-strip div:last-child{border-right:0;}
.stat-strip strong{font-family:Oswald; font-size:22px; display:block;}
.stat-strip span{color:var(--steel-dim); font-size:12.5px; letter-spacing:.5px;}

/* SECTION generic */
.section{padding:88px 0;}
.section-dark{background:var(--ink); color:var(--white);}
.split{display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start;}
.split h2{font-size:clamp(28px,3.4vw,40px); font-weight:600; line-height:1.15; margin-top:10px;}
.split p{max-width:520px; color:var(--steel-dim); margin-bottom:16px;}
.section-dark .split p{color:var(--steel);}
.link-arrow{display:inline-flex; align-items:center; gap:6px; font-weight:600; border-bottom:2px solid var(--ember); padding-bottom:2px;}

/* PRODUCTS */
.prod-head{max-width:640px; margin-bottom:48px;}
.prod-head h2{font-size:clamp(28px,3.4vw,40px); font-weight:600; margin-top:10px;}
.prod-head p{color:var(--steel); margin-top:14px;}
.products{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.p-card{background:var(--navy); padding:34px 28px; min-height:340px; display:flex; flex-direction:column;}
.p-icon{width:52px; height:52px; margin-bottom:22px;}
.p-card h3{font-size:22px; font-weight:600; margin:6px 0 10px;}
.p-cat{color:var(--ember); font-size:12.5px; font-weight:600; letter-spacing:1px;}
.p-card p{color:var(--steel); font-size:14.5px; flex-grow:1;}
.p-specs{display:flex; gap:22px; margin:18px 0; padding-top:16px; border-top:1px solid var(--line);}
.p-specs div strong{display:block; font-size:16px;}
.p-specs div span{color:var(--steel-dim); font-size:11.5px;}
.p-card a{font-weight:600; font-size:14px; border-bottom:2px solid var(--ember); align-self:flex-start;}

/* APPROACH (legit sequence) */
.approach-head{max-width:600px; margin:0 auto 50px; text-align:center;}
.approach-head h2{font-size:clamp(26px,3.2vw,36px); font-weight:600; margin-top:10px;}
.approach-head p{color:var(--steel-dim); margin-top:12px;}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
.step{padding:0 30px; position:relative;}
.step:not(:last-child)::after{content:"";position:absolute; right:0; top:6px; bottom:6px; width:1px; background:#d7dadc;}
.step b.num{color:var(--ember); font-family:Oswald; font-size:15px;}
.step h3{font-size:20px; font-weight:600; margin:10px 0 8px;}
.step p{color:var(--steel-dim); font-size:14.5px;}

/* GLOBAL SUPPLY */
.gs-visual{position:relative; height:220px; background:var(--navy2); border:1px solid var(--line);}
.gs-visual .dot{position:absolute; width:11px; height:11px; border-radius:50%; background:var(--ember); top:50%; transform:translateY(-50%);}
.gs-visual .dot.a{left:14%;} .gs-visual .dot.b{left:82%;}
.gs-visual .lbl{position:absolute; top:calc(50% + 16px); font-size:12px; letter-spacing:1px; color:var(--steel);}
.gs-visual .lbl.a{left:14%; transform:translateX(-50%);} .gs-visual .lbl.b{left:82%; transform:translateX(-50%);}
.gs-visual .path{position:absolute; top:50%; left:16%; width:66%; height:2px; background:repeating-linear-gradient(90deg,var(--ember) 0 8px, transparent 8px 14px);}

/* CTA */
.cta{background:var(--navy2); padding:70px 40px; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;}
.cta h2{color:var(--white); font-size:clamp(26px,3vw,36px); font-weight:600;}
.cta p{color:var(--steel); max-width:420px; margin-top:10px;}
.cta-actions{display:flex; flex-direction:column; gap:14px; align-items:flex-start;}

/* FOOTER */
footer{background:#e4e6e8; color:var(--steel-dim); padding:56px 0 30px; border-top:1px solid rgba(0,0,0,.06);}
.f-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px;}
.f-grid h4{color:var(--ink); font-size:13px; letter-spacing:1px; margin-bottom:14px;}
.f-grid ul{list-style:none;}
.f-grid li{margin-bottom:9px; font-size:14.5px;}
.f-grid li a:hover{color:var(--ink);}
.f-bottom{border-top:1px solid rgba(0,0,0,.08); margin-top:40px; padding-top:20px; font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* CONTACT PAGE */
.page-hero{background:linear-gradient(180deg,var(--ink),var(--navy) 100%); color:var(--white); padding:70px 0 54px;}
.page-hero h1{font-size:clamp(32px,4.4vw,50px); font-weight:700; margin:12px 0 10px;}
.page-hero p{color:var(--steel); max-width:520px;}

.info-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#d7dadc; border:1px solid #d7dadc; margin-top:-1px;}
.info-card{background:var(--white); padding:30px 28px;}
.info-card svg{width:30px; height:30px; margin-bottom:16px;}
.info-card h3{font-size:15px; font-weight:600; letter-spacing:.5px; margin-bottom:8px; color:var(--steel-dim);}
.info-card a, .info-card span{display:block; font-size:17px; font-weight:600; color:var(--ink);}
.info-card small{display:block; margin-top:6px; color:var(--steel-dim); font-size:13px; font-weight:400;}

.contact-wrap{display:grid; grid-template-columns:1.3fr .9fr; gap:50px; align-items:start;}
.form-panel h2{font-size:clamp(24px,2.8vw,32px); font-weight:600; margin-bottom:10px;}
.form-panel > p{color:var(--steel-dim); margin-bottom:28px;}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.f-group{margin-bottom:18px;}
.f-group label{display:block; font-size:13px; font-weight:600; color:var(--steel-dim); margin-bottom:6px; letter-spacing:.3px;}
.f-group input, .f-group select, .f-group textarea{width:100%; padding:13px 14px; border:1.5px solid #d7dadc; background:var(--white); font-family:Inter,sans-serif; font-size:15px; color:var(--ink); transition:border-color .2s;}
.f-group input:focus, .f-group select:focus, .f-group textarea:focus{outline:none; border-color:var(--ember);}
.f-group textarea{resize:vertical; min-height:120px;}
.form-panel .btn{border:0; cursor:pointer; font-size:15.5px; padding:14px 30px;}
.side-panel{background:var(--navy2); color:var(--white); padding:34px 30px;}
.side-panel h3{font-size:19px; font-weight:600; margin-bottom:14px;}
.side-panel ul{list-style:none;}
.side-panel li{padding:12px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--steel);}
.side-panel li:last-child{border-bottom:0;}
.form-msg{padding:16px 20px; margin-bottom:24px; font-size:14.5px; font-weight:500;}
.form-msg.ok{background:#e5f3ea; color:#1e6b3a; border:1px solid #b9e0c6;}
.form-msg.err{background:#fbeae5; color:#a3341c; border:1px solid #f0c3b6;}

/* PRODUCT PAGES */
.stat-strip.cols-4 .wrap{grid-template-columns:repeat(4,1fr);}
.info-cards.cols-4{grid-template-columns:repeat(4,1fr);}
.table-wrap{overflow-x:auto; margin-top:10px;}
.data-table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px;}
.data-table th{background:var(--ink); color:var(--white); text-align:left; padding:12px 16px; font-size:12.5px; letter-spacing:.4px;}
.data-table td{padding:11px 16px; border-bottom:1px solid #e4e6e8;}
.data-table tr:nth-child(even) td{background:#f5f6f7;}
.notice{background:#f5f6f7; border-left:3px solid var(--ember); padding:16px 20px; font-size:14px; color:var(--steel-dim);}
.notice strong{color:var(--ink); display:block; margin-bottom:4px;}

@media(max-width:860px){
  .navlinks, .navcta .btn-line{display:none;}
  .burger{display:flex;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-art{height:220px;}
  .split, .prod-head, .approach-head{grid-template-columns:1fr;}
  .products, .steps{grid-template-columns:1fr;}
  .step:not(:last-child)::after{display:none;}
  .stat-strip .wrap{grid-template-columns:1fr; }
  .stat-strip div{border-right:0; border-bottom:1px solid var(--line);}
  .f-grid{grid-template-columns:1fr 1fr;}
  .cta{flex-direction:column; align-items:flex-start;}
  .info-cards{grid-template-columns:1fr;}
  .stat-strip.cols-4 .wrap{grid-template-columns:1fr;}
  .contact-wrap{grid-template-columns:1fr;}
  .f-row{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){ .hero h1 .row{animation:none; clip-path:none;} }

/* ENQUIRY FORM EXTRAS */
.addr-box{border:1px dashed #cfd3d6; padding:16px 16px 0; margin-bottom:18px; background:rgba(255,255,255,.5);}
.addr-title{font-size:13px; font-weight:700; letter-spacing:.3px; margin-bottom:12px; color:var(--ink);}
.addr-title small{font-weight:400; color:var(--steel-dim);}
.pin-status{display:block; min-height:16px; margin-top:4px; font-size:12px; color:var(--steel-dim);}
.cap-line{display:flex; gap:10px; align-items:stretch; max-width:220px;}
.cap-refresh{border:1.5px solid #d7dadc; background:var(--white); width:46px; font-size:20px; cursor:pointer;}
.captcha-row .cap-q{color:var(--ember); font-size:16px;}
.enq-msg{margin-bottom:18px;}
.moq-note{margin-top:18px; padding:12px 16px; background:#f5f6f7; border-left:3px solid var(--ember); font-size:13.5px; color:var(--steel-dim);}
.moq-note strong{color:var(--ink);}
.enq-form button[type=submit]{border:0; cursor:pointer; font-size:15.5px; padding:14px 30px;}
.enq-form button[disabled]{opacity:.6; cursor:wait;}

/* QUOTE POPUP */
.modal{position:fixed; inset:0; z-index:100; background:rgba(10,11,12,.62); display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; padding:24px 14px;}
.modal[hidden]{display:none;}
.modal-box{position:relative; background:var(--paper); width:100%; max-width:640px; padding:32px 30px; margin:auto; box-shadow:0 20px 60px rgba(0,0,0,.35);}
.modal-box h2{font-size:28px; font-weight:600;}
.modal-sub{color:var(--steel-dim); margin:6px 0 22px; font-size:14.5px;}
.modal-close{position:absolute; top:10px; right:14px; background:none; border:0; font-size:32px; line-height:1; cursor:pointer; color:var(--ink);}
body.modal-open{overflow:hidden;}

/* FLOATING CALL / WHATSAPP / ENQUIRY */
.float-bar{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:60; display:flex; flex-direction:column; gap:10px; align-items:flex-end;}
.fb{display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 16px; border:0; border-radius:26px; color:#fff; font:600 14px Inter,sans-serif; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.28); transition:transform .15s;}
.fb:hover{transform:translateY(-2px);}
.fb svg{width:22px; height:22px; flex:none;}
.fb-wa{background:#25d366;}
.fb-call{background:#1769e0;}
.fb-enq{background:var(--ember);}
body.modal-open .float-bar{display:none;}
@media(max-width:600px){
  .float-bar{flex-direction:row; left:0; right:0; bottom:0; padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px)); gap:8px; background:rgba(20,21,23,.96);}
  .fb{flex:1; justify-content:center; border-radius:6px; height:44px; padding:0 8px; box-shadow:none;}
  body{padding-bottom:62px;}
  .modal-box{padding:26px 18px;}
}

/* COMPACT FORM (v5) */
.enq-form .f-row{gap:10px;}
.enq-form .f-row.c4{grid-template-columns:.8fr 1.1fr 1fr 1fr;}
.enq-form .f-group{margin-bottom:10px;}
.enq-form .f-group label{font-size:12px; margin-bottom:3px;}
.enq-form .f-group label small{font-weight:400;}
.enq-form .f-group input, .enq-form .f-group select, .enq-form .f-group textarea{padding:8px 10px; font-size:14px;}
.enq-form .f-group textarea{min-height:0; height:56px;}
.enq-form .pin-status{display:block; margin:-4px 0 10px; font-size:11.5px; min-height:0;}
.enq-foot{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.enq-foot .captcha-row{margin-bottom:0;}
.enq-foot .btn{padding:11px 26px;}
.moq-note{margin-top:12px; padding:8px 12px; font-size:12.5px;}
.modal{padding:14px;}
.modal-box{padding:20px 24px 18px; max-width:680px;}
.modal-box h2{font-size:24px;}
.modal-sub{margin:2px 0 12px; font-size:13.5px;}
.done-box{max-width:420px; text-align:center; padding:34px 28px;}
.done-box p{color:var(--steel-dim); margin:8px 0 22px;}
.done-ic{width:64px; height:64px; margin:0 auto 14px; border-radius:50%; background:#e5f3ea; color:#1e6b3a; font-size:34px; line-height:64px;}
.done-box .btn{border:0; cursor:pointer; padding:12px 40px;}
@media(max-width:600px){
  .enq-form .f-row, .enq-form .f-row.c4{grid-template-columns:1fr 1fr;}
  .enq-foot{flex-direction:column; align-items:stretch;}
  .enq-foot .btn{justify-content:center;}
}

/* FIELD ERRORS (v6) */
.f-group.invalid input, .f-group.invalid select, .f-group.invalid textarea{border-color:#d93025; background:#fff5f4;}
.f-group.invalid input:focus, .f-group.invalid select:focus, .f-group.invalid textarea:focus{border-color:#d93025;}
.f-err{display:block; margin-top:3px; color:#c5221f; font-size:11.5px; font-weight:500; line-height:1.3;}

/* Highlighted MOQ note (sits right below Message box) */
.enq-form .moq-note{margin:2px 0 14px; padding:9px 14px; background:#fff4cc; border:1px solid #f0b400; border-left:5px solid #f0b400; border-radius:4px; font-size:13.5px; font-weight:700; color:#c0121f;}
.enq-form .moq-note strong{color:#8a0010; font-weight:800;}