:root{--concrete:#1e2022;--slab:#2a2d30;--rebar:#8e949a;--red:#e8191e;--paper:#ecebe7;--ink:#1e2022;--text:#e9e8e4;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--concrete);color:var(--text);font:400 17px/1.7 "Anek Tamil",system-ui,sans-serif}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--concrete);border-bottom:1px solid #3a3d41}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;padding-bottom:10px}
header img{height:44px;width:auto;display:block}
.call{font-weight:800;text-decoration:none;background:var(--red);color:#fff;padding:8px 16px;border-radius:2px;white-space:nowrap}
/* hero: rebar ribs */
.hero{position:relative;overflow:hidden;padding:64px 0 72px;border-bottom:6px solid var(--red)}
.ribs{position:absolute;inset:0 0 0 auto;width:38%;background:repeating-linear-gradient(90deg,transparent 0 22px,#2f3236 22px 26px,transparent 26px 56px,#33363a 56px 58px);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%);pointer-events:none}
.ribs::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 46px,var(--red) 46px 49px,transparent 49px 160px);opacity:.55;clip-path:inset(0 0 100% 0);animation:draw 1.6s .2s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes draw{to{clip-path:inset(0 0 0 0)}}
.hero h1{position:relative;font-weight:800;font-size:clamp(34px,7vw,68px);line-height:1.15;margin:0 0 20px;max-width:15ch}
.hero p{position:relative;max-width:34em;color:#c9c8c3;margin:0 0 28px;font-size:19px}
.btn{display:inline-block;background:var(--red);color:#fff;font:800 18px "Anek Tamil",sans-serif;border:0;padding:14px 28px;border-radius:2px;text-decoration:none;cursor:pointer}
.btn:hover{background:#ff2a30}
.ghost{background:transparent;border:2px solid var(--rebar);margin-left:10px}
.ghost:hover{background:var(--slab)}
/* products */
section{padding:56px 0}
h2{font-weight:800;font-size:clamp(26px,4.5vw,40px);margin:0 0 28px;line-height:1.2}
.bands{display:grid;gap:0;border-top:1px solid #3a3d41}
.band{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:20px;padding:26px 0;border-bottom:1px solid #3a3d41}
.band h3{margin:0;font-size:24px;font-weight:800;color:var(--red);line-height:1.3}
.band small{display:block;color:var(--rebar);font-weight:400;font-size:15px;margin-top:4px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tags li{background:var(--slab);border-left:4px solid var(--rebar);padding:6px 14px;font-weight:600}
@media(max-width:640px){.band{grid-template-columns:1fr;gap:10px}.ghost{margin:12px 0 0}.ribs{width:60%;opacity:.6}}
/* challan booking slip */
.slip{background:var(--paper);color:var(--ink);padding:28px;border-radius:2px;position:relative;
background-image:radial-gradient(circle at 0 50%,var(--concrete) 10px,transparent 11px),radial-gradient(circle at 100% 50%,var(--concrete) 10px,transparent 11px);
background-size:51% 28px,51% 28px;background-position:left 0 top 120px,right 0 top 120px;background-repeat:repeat-y,repeat-y}
.slip h2{color:var(--ink);margin-bottom:6px}
.slip>p{margin:0 0 22px;color:#555}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid .full{grid-column:1/-1}
@media(max-width:640px){.grid{grid-template-columns:1fr}}
label{display:block;font-weight:600;font-size:15px;margin-bottom:4px}
input,select,textarea{width:100%;font:400 17px "Anek Tamil",sans-serif;padding:11px 12px;border:2px solid #b9b7b0;background:#fff;color:var(--ink);border-radius:2px}
input:focus,select:focus,textarea:focus{border-color:var(--red)}
.req{color:var(--red)}
.note{font-size:15px;color:#555;margin:14px 0 0}
.err{color:#b00;font-weight:600;min-height:1.4em;margin:10px 0 0}
footer{background:#17191a;padding:40px 0 48px;border-top:6px solid var(--red);color:#b9b8b3;font-size:16px}
footer strong{color:var(--text)}
footer .wrap{display:grid;gap:6px}
@media(prefers-reduced-motion:reduce){.ribs::after{animation:none;clip-path:none}html{scroll-behavior:auto}}

nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
nav a{text-decoration:none;font-weight:600}
nav a:hover{color:var(--red)}
header .wrap{flex-wrap:wrap}
.box{background:var(--paper);color:var(--ink);padding:28px;border-radius:2px;max-width:460px;margin:0 auto}
.box h1{margin:0 0 18px;font-size:28px;font-weight:800;line-height:1.3}
.box .full{margin-bottom:16px}
.ok{background:#e4f3e4;color:#1c5a1c;border-left:4px solid #2a8a2a;padding:12px 14px;margin:0 0 18px;font-weight:600}
.bad{background:#fbe6e6;color:#8a1414;border-left:4px solid var(--red);padding:12px 14px;margin:0 0 18px;font-weight:600}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:8px 10px;border-bottom:1px solid #3a3d41;vertical-align:top}
.tbl th{color:var(--rebar);font-weight:600;white-space:nowrap}
.scroll{overflow-x:auto}
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:18px}
.filters input,.filters select{width:auto;min-width:150px}
.link{color:var(--red);font-weight:600}
.mini{width:auto;padding:6px 8px;font-size:15px}
.cta{padding:20px 0 64px}