:root{
  --red:#d3181e; --red-d:#a70f14;
  --ink:#16191c; --steel:#22272b; --steel-2:#2c3236; --line:#3a4146;
  --mid:#6b737a; --light:#e9ecee; --paper:#f4f5f6; --white:#fff;
  --cond:"Barlow Condensed","Arial Narrow","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --sans:"PingFang SC","Microsoft YaHei","Noto Sans SC","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.65;font-size:15px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1240px,92vw);margin:0 auto}
.mono{font-family:var(--mono);letter-spacing:.02em}

/* top bar */
.topbar{background:var(--ink);color:#9aa3aa;font-size:12.5px;border-bottom:1px solid #000}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding:7px 0}
.topbar b{color:#fff;font-weight:500}
.topbar span+span{margin-left:22px}

/* header */
header.site{position:sticky;top:0;z-index:50;background:#fff;border-bottom:3px solid var(--red)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:50px;height:50px;object-fit:contain}
.brand .t1{font-weight:800;font-size:21px;letter-spacing:.06em;line-height:1.1}
.brand .t2{font-family:var(--cond);font-size:12.5px;letter-spacing:.14em;color:var(--mid);font-weight:600}
nav.main{display:flex;gap:4px}
nav.main a{padding:0 15px;height:74px;display:flex;align-items:center;font-size:15px;font-weight:500;border-bottom:3px solid transparent;margin-bottom:-3px}
nav.main a:hover{color:var(--red);border-bottom-color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 24px;background:var(--red);color:#fff;font-weight:600;font-size:15px;border:0;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--red-d)}
.btn.ghost{background:transparent;border:1px solid #fff;color:#fff}
.btn.ghost:hover{background:#fff;color:var(--ink)}
.btn.dark{background:var(--ink)}
.btn.dark:hover{background:#000}
.btn .arr{font-family:var(--mono)}
.menu-btn{display:none;background:none;border:1px solid var(--line);width:42px;height:42px;font-size:20px}

/* hero */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;background:url(https://hanfeng.sitxo.com/wp-content/uploads/hanfeng-site/20261030-v1/assets/img/hero-scene.webp) center 60%/cover}
.hero .bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,16,18,.95) 0%,rgba(14,16,18,.82) 42%,rgba(14,16,18,.25) 75%,rgba(14,16,18,.15) 100%)}
.hero>.wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;min-height:600px;align-items:center}
.hero .kicker{font-family:var(--mono);font-size:12.5px;color:#c9cfd3;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.hero .kicker:before{content:"";width:34px;height:3px;background:var(--red)}
.hero h1{font-size:50px;line-height:1.18;font-weight:800;letter-spacing:.02em;margin:20px 0 18px}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p.lead{color:#c9cfd3;font-size:16.5px;max-width:540px}
.hero .ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero .torch{justify-self:end;width:min(560px,100%);filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));transform:rotate(-8deg)}
.hero-spec{position:relative;background:var(--steel);border-top:1px solid var(--line)}
.hero-spec .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.hero-spec div.c{padding:22px 24px;border-left:1px solid var(--line);color:#aeb6bc;font-size:13px}
.hero-spec div.c:last-child{border-right:1px solid var(--line)}
.hero-spec b{display:block;font-family:var(--cond);font-size:28px;color:#fff;font-weight:600;letter-spacing:.02em;line-height:1.2}

/* section */
section{padding:92px 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:44px;border-bottom:1px solid #cfd4d8;padding-bottom:22px}
.sec-head .en{font-family:var(--cond);font-weight:600;color:var(--red);letter-spacing:.18em;font-size:14px;text-transform:uppercase}
.sec-head h2{font-size:34px;font-weight:800;letter-spacing:.03em;line-height:1.25;margin-top:6px}
.sec-head p{max-width:470px;color:var(--mid);font-size:14.5px}
.dark-sec{background:var(--steel);color:#fff}
.dark-sec .sec-head{border-color:var(--line)}
.dark-sec .sec-head p{color:#9aa3aa}

/* product categories */
.cats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #cfd4d8;background:#fff}
.cat{position:relative;padding:26px 24px 24px;border-right:1px solid #cfd4d8;display:flex;flex-direction:column;transition:background .2s}
.cat:last-child{border-right:0}
.cat:hover{background:#fafbfb}
.cat:hover .pic img{transform:scale(1.04)}
.cat .code{font-family:var(--mono);font-size:12px;color:var(--mid)}
.cat h3{font-size:20px;margin:4px 0 6px}
.cat .pic{height:220px;display:flex;align-items:center;justify-content:center;margin:12px 0 16px;background:linear-gradient(180deg,#f1f3f4,#e4e8ea)}
.cat .pic img{max-height:190px;max-width:86%;object-fit:contain;transition:transform .35s}
.cat p{font-size:13.5px;color:var(--mid);flex:1}
.cat .more{margin-top:16px;font-weight:600;font-size:14px;color:var(--red);display:flex;justify-content:space-between;border-top:1px solid #e3e6e8;padding-top:12px}

/* W200A */
.w200{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.w200 .gallery .main{background:#1d2124;border:1px solid var(--line);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.w200 .gallery .main img{width:100%;height:100%;object-fit:contain}
.w200 .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
.w200 .thumbs button{background:#1d2124;border:1px solid var(--line);aspect-ratio:1/1;cursor:pointer;padding:4px}
.w200 .thumbs button.on{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.w200 .thumbs img{width:100%;height:100%;object-fit:contain}
.w200 h3{font-family:var(--cond);font-size:46px;font-weight:700;line-height:1;letter-spacing:.02em}
.w200 h3 small{display:block;font-family:var(--sans);font-size:18px;font-weight:600;color:#cfd4d8;margin-top:10px;letter-spacing:.04em}
.w200 .desc{color:#aeb6bc;margin:18px 0 22px;font-size:14.5px}
.feat{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.feat div{padding:14px 14px 14px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:#c6ccd0}
.feat div:nth-child(odd){padding-right:18px;border-right:1px solid var(--line)}
.feat div:nth-child(even){padding-left:18px}
.feat b{display:block;color:#fff;font-size:14.5px;margin-bottom:2px}
.spec{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:28px}
.spec caption{text-align:left;font-family:var(--mono);font-size:12px;color:#8d969c;letter-spacing:.1em;padding-bottom:8px}
.spec th,.spec td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.spec th{width:34%;color:#8d969c;font-weight:500}
.spec td{font-family:var(--mono);color:#fff}

/* torch selector */
.tabs{display:flex;flex-wrap:wrap;border:1px solid #cfd4d8;border-bottom:0;background:#fff}
.tabs button{flex:1;min-width:120px;padding:15px 10px;font-family:var(--cond);font-size:20px;font-weight:600;letter-spacing:.04em;background:#fff;border:0;border-right:1px solid #cfd4d8;cursor:pointer;color:var(--mid)}
.tabs button:last-child{border-right:0}
.tabs button.on{background:var(--ink);color:#fff;box-shadow:inset 0 -3px 0 var(--red)}
.tpanel{display:none;grid-template-columns:1fr 1fr 1fr;border:1px solid #cfd4d8;background:#fff}
.tpanel.on{display:grid}
.tpanel .t-img{background:linear-gradient(180deg,#eef0f2,#dfe3e6);display:flex;align-items:center;justify-content:center;padding:30px;min-height:420px}
.tpanel .t-img img{max-height:380px;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(0,0,0,.18))}
.tpanel .t-info{padding:34px 32px;border-left:1px solid #cfd4d8;border-right:1px solid #cfd4d8}
.tpanel .t-info .m{font-family:var(--cond);font-size:40px;font-weight:700;line-height:1}
.tpanel .t-info .n{font-weight:600;margin:6px 0 16px;color:var(--mid)}
.tpanel table{width:100%;border-collapse:collapse;font-size:13.5px}
.tpanel td{padding:8px 0;border-bottom:1px dashed #d6dade}
.tpanel td:first-child{color:var(--mid);width:42%}
.tpanel td:last-child{font-family:var(--mono)}
.tpanel .t-weld{position:relative;background:#111}
.tpanel .t-weld img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.tpanel .t-weld span{position:absolute;left:0;bottom:0;background:var(--red);color:#fff;font-size:12.5px;padding:6px 12px}
.range{margin-top:34px;background:#fff;border:1px solid #cfd4d8;padding:26px 28px}
.range h4{font-size:15px;margin-bottom:16px;display:flex;justify-content:space-between}
.range h4 span{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--mid)}
.bar{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:14px;margin:8px 0;font-size:13px}
.bar .lab{font-family:var(--cond);font-weight:600;font-size:17px}
.bar .track{position:relative;height:22px;background:repeating-linear-gradient(90deg,#eef0f2 0 calc(10% - 1px),#d8dde0 calc(10% - 1px) 10%)}
.bar .fill{position:absolute;top:3px;bottom:3px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:11px;display:flex;align-items:center;padding-left:6px;white-space:nowrap}
.bar .fill.r{background:var(--red)}
.axis{display:grid;grid-template-columns:110px 1fr;gap:14px;font-family:var(--mono);font-size:11px;color:var(--mid)}
.axis div:last-child{display:flex;justify-content:space-between}
.other-torch{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.other-torch .o{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid #cfd4d8;padding:16px 20px}
.other-torch img{width:110px;height:110px;object-fit:contain}
.other-torch b{font-family:var(--cond);font-size:22px}
.other-torch p{font-size:13px;color:var(--mid)}

/* LPM & cutters */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.split>*,.w200>*,.about>*,.contact .wrap>*{min-width:0}
.pts{list-style:none;border-top:1px solid #cfd4d8;margin-top:16px}
.pts li{padding:11px 0 11px 26px;border-bottom:1px solid #e1e4e6;position:relative;font-size:14px}
.pts li:before{content:"";position:absolute;left:0;top:19px;width:12px;height:3px;background:var(--red)}
.lpm-pics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lpm-pics div{background:#fff;border:1px solid #cfd4d8;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:14px}
.lpm-pics div.wide{grid-column:span 2;aspect-ratio:2/1}
.lpm-pics img{max-height:100%;object-fit:contain}
.tbl{width:100%;border-collapse:collapse;background:#fff;font-size:13.5px;margin-top:34px;border:1px solid #cfd4d8}
.tbl th{background:var(--ink);color:#fff;font-weight:500;text-align:left;padding:12px 14px;font-size:13px}
.tbl td{padding:12px 14px;border-top:1px solid #e1e4e6}
.tbl td.m{font-family:var(--cond);font-size:19px;font-weight:700}
.tbl td.mono{font-family:var(--mono)}
.tbl tr:hover td{background:#fafbfb}
.cutters{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line)}
.cutter{border-right:1px solid var(--line);display:flex;flex-direction:column}
.cutter:last-child{border-right:0}
.cutter .pic{background:#e9ecee;height:230px;display:flex;align-items:center;justify-content:center;padding:18px}
.cutter .pic img{max-height:100%;object-fit:contain}
.cutter .b{padding:18px 18px 20px}
.cutter .m{font-family:var(--cond);font-size:28px;font-weight:700;line-height:1}
.cutter .m small{font-family:var(--sans);font-size:12px;font-weight:500;color:#8d969c;margin-left:6px}
.cutter dl{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;font-size:12.5px;margin-top:14px}
.cutter dt{color:#8d969c}
.cutter dd{font-family:var(--mono);color:#fff;text-align:right}
.cut-feat{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cut-feat div{padding:18px 20px 18px 0;font-size:13px;color:#aeb6bc}
.cut-feat div+div{padding-left:20px;border-left:1px solid var(--line)}
.cut-feat b{display:block;color:#fff;font-size:15px;margin-bottom:4px}

/* industries */
.ind{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid #cfd4d8;background:#fff}
.ind div{padding:26px 20px;border-right:1px solid #cfd4d8}
.ind div:last-child{border-right:0}
.ind .k{font-family:var(--mono);font-size:11.5px;color:var(--red)}
.ind h4{font-size:18px;margin:6px 0 6px}
.ind p{font-size:13px;color:var(--mid)}
.cases{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:240px 240px;gap:10px;margin-top:30px}
.cases figure{position:relative;overflow:hidden;background:#222}
.cases figure:first-child{grid-row:span 2}
.cases img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cases figure:hover img{transform:scale(1.04)}
.cases figcaption{position:absolute;left:0;bottom:0;background:rgba(18,20,22,.86);color:#fff;font-size:12.5px;padding:7px 12px}

/* weld results */
.joints{background:#fff;border:1px solid #cfd4d8;padding:20px;display:grid;grid-template-columns:300px 1fr;gap:30px;align-items:center;margin-bottom:24px}
.joints img{width:100%}
.joints h4{font-size:20px;margin-bottom:8px}
.joints p{color:var(--mid);font-size:14px}
.joints .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.joints .tags span{border:1px solid #cfd4d8;padding:4px 12px;font-size:13px}
.welds{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:250px;gap:10px}
.welds figure{background:linear-gradient(180deg,#eceff1,#dde1e4);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.welds figure img{max-height:92%;max-width:92%;object-fit:contain}
.welds figure.ph img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.welds figure.span2{grid-column:span 2}
.welds figcaption{position:absolute;left:8px;bottom:8px;background:#fff;font-size:12px;padding:3px 8px;border-left:3px solid var(--red)}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.about .imgs{display:grid;grid-template-columns:1fr;gap:10px}
.about .imgs img{width:100%;aspect-ratio:16/9;object-fit:cover}
.about .txt p{color:#4a5258;margin-bottom:14px}
.svc{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #cfd4d8;margin-top:26px}
.svc div{padding:16px 0;border-bottom:1px solid #cfd4d8;font-size:13.5px;color:var(--mid)}
.svc div:nth-child(odd){padding-right:16px;border-right:1px solid #cfd4d8}
.svc div:nth-child(even){padding-left:18px}
.svc b{display:block;color:var(--ink);font-size:15.5px}
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px}
.certs figure{background:#fff;border:1px solid #cfd4d8;padding:14px;text-align:center}
.certs img{aspect-ratio:7/10;object-fit:contain;margin:0 auto;width:100%;cursor:zoom-in}
.certs figcaption{font-size:13px;margin-top:10px;color:var(--mid)}

/* contact */
.contact{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.contact:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:repeating-linear-gradient(-45deg,var(--red) 0 14px,var(--ink) 14px 28px)}
.contact .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px}
.contact h2{font-size:34px;line-height:1.25;margin:6px 0 16px}
.contact .en{font-family:var(--cond);color:var(--red);letter-spacing:.18em;font-weight:600}
.contact .info{color:#aeb6bc;font-size:14.5px}
.contact .tel{font-family:var(--cond);font-size:44px;font-weight:700;color:#fff;letter-spacing:.03em;margin:22px 0 4px;line-height:1}
.contact dl{margin-top:24px;border-top:1px solid var(--line)}
.contact dl div{display:grid;grid-template-columns:80px 1fr;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.contact dt{color:#8d969c}
form.inq{background:var(--steel);border:1px solid var(--line);padding:30px}
form.inq h3{font-size:18px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:baseline}
form.inq h3 span{font-family:var(--mono);font-size:11.5px;color:#8d969c;font-weight:400}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg .full{grid-column:span 2}
form.inq label{display:block;font-size:12.5px;color:#aeb6bc;margin-bottom:5px}
form.inq input,form.inq select,form.inq textarea{width:100%;background:#1a1e21;border:1px solid var(--line);color:#fff;padding:11px 12px;font:inherit;font-size:14px;border-radius:0}
form.inq input:focus,form.inq select:focus,form.inq textarea:focus{outline:none;border-color:var(--red)}
form.inq textarea{height:96px;resize:vertical}
.chk{display:flex;flex-wrap:wrap;gap:8px}
.chk label{display:flex!important;align-items:center;gap:6px;border:1px solid var(--line);padding:7px 12px;margin:0!important;cursor:pointer;font-size:13px!important;color:#dfe3e6!important}
.chk input{width:auto!important}
.ok{display:none;margin-top:14px;padding:12px 14px;border-left:3px solid var(--red);background:#1a1e21;font-size:14px}

footer{background:#0f1113;color:#7d868c;font-size:13px;padding:34px 0}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:99;cursor:zoom-out;padding:4vh}
.lb.on{display:flex}
.lb img{max-height:92vh;max-width:92vw;background:#fff}

@media (max-width:1080px){
  nav.main{display:none;position:absolute;top:74px;left:0;right:0;background:#fff;flex-direction:column;border-bottom:3px solid var(--red)}
  nav.main.open{display:flex}
  nav.main a{height:50px;border-top:1px solid #eee;padding:0 4vw}
  .menu-btn{display:block}
  header.site .btn{display:none}
  .hero>.wrap{grid-template-columns:1fr;padding:60px 0 30px}
  .hero .torch-wrap{justify-self:center;width:min(420px,80%)}
  .hero h1{font-size:38px}
  .hero-spec .wrap,.cats{grid-template-columns:1fr 1fr}
  .cat:nth-child(2){border-right:0}.cat:nth-child(-n+2){border-bottom:1px solid #cfd4d8}
  .w200,.split,.about,.contact .wrap{grid-template-columns:1fr;gap:36px}
  .tpanel{grid-template-columns:1fr 1fr}.tpanel .t-weld{display:none}
  .tpanel .t-info{border-right:0}
  .cutters{grid-template-columns:repeat(3,1fr)}
  .cutter{border-bottom:1px solid var(--line)}
  .ind{grid-template-columns:repeat(3,1fr)}
  .welds{grid-template-columns:repeat(3,1fr);grid-auto-rows:220px}
  .cut-feat{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:14.5px}
  section{padding:64px 0}
  .topbar .r{display:none}
  .hero h1{font-size:30px}
  .hero .torch-wrap{display:none}
  .hero .bg:after{background:rgba(14,16,18,.78)}
  .hero-spec .wrap{grid-template-columns:1fr 1fr}
  .hero-spec div.c{padding:16px}
  .hero-spec b{font-size:22px}
  .sec-head{flex-direction:column;align-items:flex-start}
  .sec-head h2{font-size:26px}
  .cats,.tpanel,.other-torch,.joints,.fg,.svc,.feat{grid-template-columns:1fr}
  .cat{border-right:0;border-bottom:1px solid #cfd4d8}
  .tpanel .t-img{min-height:280px}.tpanel .t-info{border-left:0;border-top:1px solid #cfd4d8}
  .tabs button{min-width:33%;font-size:17px;border-bottom:1px solid #cfd4d8}
  .bar,.axis{grid-template-columns:70px 1fr}
  .cutters{grid-template-columns:1fr 1fr}
  .ind{grid-template-columns:1fr 1fr}
  .cases{grid-template-columns:1fr 1fr;grid-template-rows:200px 160px 160px}
  .cases figure:first-child{grid-column:span 2;grid-row:auto}
  .welds{grid-template-columns:1fr 1fr;grid-auto-rows:190px}
  .welds figure.span2{grid-column:span 2}
  .certs{grid-template-columns:1fr 1fr}
  .fg .full{grid-column:auto}
  .feat div:nth-child(odd){border-right:0;padding-right:0}.feat div:nth-child(even){padding-left:0}
  .svc div:nth-child(odd){border-right:0}.svc div:nth-child(even){padding-left:0}
  .contact .tel{font-size:34px}
  .tbl-wrap{overflow-x:auto}
  .tbl{min-width:640px}
  .cut-feat{grid-template-columns:1fr}.cut-feat div+div{border-left:0;padding-left:0;border-top:1px solid var(--line)}
}

/* ===== motion ===== */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(0);z-index:100;pointer-events:none}
header.site{transition:box-shadow .3s}
header.site.scrolled{box-shadow:0 8px 24px rgba(0,0,0,.12)}
/* nav underline sweep */
nav.main a{position:relative;transition:color .25s}
nav.main a:after{content:"";position:absolute;left:15px;right:15px;bottom:-3px;height:3px;background:var(--red);transform:scaleX(0);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
nav.main a:hover{border-bottom-color:transparent}
nav.main a:hover:after{transform:scaleX(1)}
/* buttons: dark fill sweeps in, arrow moves */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:color .3s,border-color .3s}
.btn:before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-101%);transition:transform .4s cubic-bezier(.7,0,.2,1);z-index:-1}
.btn:hover{background:var(--red)}
.btn:hover:before{transform:translateX(0)}
.btn.dark:before{background:var(--red)}
.btn.dark:hover{background:var(--ink)}
.btn.ghost:before{background:#fff}
.btn.ghost:hover{background:transparent;color:var(--ink)}
.btn .arr{display:inline-block;transition:transform .35s}
.btn:hover .arr{transform:translateX(5px)}
/* product cards */
.cat{transition:background .3s,box-shadow .35s,transform .35s}
.cat:before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.cat:hover{transform:translateY(-6px);box-shadow:0 22px 40px rgba(20,24,28,.14);z-index:2}
.cat:hover:before{transform:scaleX(1)}
.cat .pic img{transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s}
.cat:hover .pic img{transform:scale(1.08) translateY(-4px);filter:drop-shadow(0 14px 14px rgba(0,0,0,.2))}
.cat .more .mono{transition:transform .35s}
.cat:hover .more .mono{transform:translateX(6px)}
/* W200A thumbs / spec rows */
.w200 .thumbs button{transition:transform .25s,border-color .25s}
.w200 .thumbs button:hover{transform:translateY(-3px);border-color:#8d969c}
.w200 .main img{transition:opacity .25s,transform .4s}
.w200 .main img.swap{opacity:0;transform:scale(.97)}
.spec tr{transition:background .2s}
.spec tr:hover{background:rgba(255,255,255,.04)}
.spec tr:hover th{color:var(--red)}
.feat div{transition:background .25s}
.feat div:hover{background:rgba(211,24,30,.08)}
/* torch tabs & panels */
.tabs button{transition:background .25s,color .25s}
.tabs button:not(.on):hover{background:#f1f3f4;color:var(--ink)}
.tpanel.on .t-img img{animation:torchIn .7s cubic-bezier(.2,.8,.2,1) both}
.tpanel.on .t-info>*{animation:fadeUp .55s cubic-bezier(.2,.8,.2,1) both}
.tpanel.on .t-info>*:nth-child(2){animation-delay:.06s}.tpanel.on .t-info>*:nth-child(3){animation-delay:.12s}.tpanel.on .t-info>*:nth-child(4){animation-delay:.18s}
.tpanel.on .t-weld img{animation:zoomOut 1s ease both}
.tpanel .t-img img{transition:transform .5s}
.tpanel .t-img:hover img{transform:rotate(-4deg) scale(1.04)}
.tpanel td{transition:color .2s}
.tpanel tr:hover td:last-child{color:var(--red)}
@keyframes torchIn{from{opacity:0;transform:translateX(-40px) rotate(-10deg)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes zoomOut{from{transform:scale(1.15)}to{transform:scale(1)}}
.bar .fill{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.range.in .bar .fill{clip-path:inset(0 0 0 0)}
.bar:hover .fill{filter:brightness(1.25)}
.other-torch .o{transition:border-color .3s,box-shadow .3s}
.other-torch .o:hover{border-color:var(--ink);box-shadow:0 12px 26px rgba(0,0,0,.08)}
.other-torch img{transition:transform .5s}
.other-torch .o:hover img{transform:rotate(-10deg) scale(1.08)}
/* LPM / tables */
.pts li:before{transition:width .3s}
.pts li:hover:before{width:20px}
.pts li{transition:padding .3s}
.pts li:hover{padding-left:34px}
.lpm-pics div{transition:border-color .3s,box-shadow .3s}
.lpm-pics img{transition:transform .5s}
.lpm-pics div:hover{border-color:var(--ink);box-shadow:0 14px 30px rgba(0,0,0,.1)}
.lpm-pics div:hover img{transform:scale(1.06)}
.tbl td:first-child{box-shadow:inset 0 0 0 var(--red);transition:box-shadow .25s}
.tbl tr:hover td:first-child{box-shadow:inset 4px 0 0 var(--red)}
/* cutters */
.cutter{position:relative;transition:background .3s}
.cutter:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red);transform:scaleX(0);transition:transform .4s}
.cutter:hover{background:#2a3034}
.cutter:hover:after{transform:scaleX(1)}
.cutter .pic{transition:background .3s}
.cutter .pic img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.cutter:hover .pic{background:#fff}
.cutter:hover .pic img{transform:scale(1.1) rotate(-3deg)}
.cut-feat div{transition:background .25s}
.cut-feat div:hover b{color:var(--red)}
/* industries / cases / welds / certs */
.ind div{position:relative;transition:background .35s,color .35s}
.ind div h4,.ind div p{transition:color .35s}
.ind div:hover{background:var(--ink)}
.ind div:hover h4{color:#fff}.ind div:hover p{color:#aeb6bc}
.cases figcaption,.welds figcaption{transition:background .3s,color .3s,transform .3s}
.cases figure:hover figcaption{background:var(--red)}
.welds figure img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.welds figure:hover img{transform:scale(1.08)}
.welds figure:hover figcaption{background:var(--red);color:#fff;transform:translateY(-3px)}
.joints .tags span{transition:background .2s,color .2s,border-color .2s}
.joints .tags span:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.certs figure{transition:transform .35s,box-shadow .35s,border-color .35s}
.certs figure:hover{transform:translateY(-8px);box-shadow:0 22px 40px rgba(0,0,0,.14);border-color:var(--red)}
.about .imgs{overflow:hidden}
.about .imgs img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.about .imgs img:hover{transform:scale(1.04)}
.svc div{transition:background .25s}
.svc div:hover b{color:var(--red)}
form.inq input,form.inq select,form.inq textarea{transition:border-color .25s,background .25s}
form.inq input:hover,form.inq select:hover,form.inq textarea:hover{border-color:#5b646a}
.chk label{transition:border-color .2s,background .2s}
.chk label:hover{border-color:var(--red)}
.chk label:has(input:checked){background:var(--red);border-color:var(--red)}
.contact:before{animation:stripe 1.6s linear infinite;background-size:39.6px 39.6px;background-image:repeating-linear-gradient(-45deg,var(--red) 0 14px,var(--ink) 14px 28px)}
@keyframes stripe{to{background-position:39.6px 0}}

/* ----- intro (hero) ----- */
html.js .hero .bg{transform:scale(1.14);opacity:0;transition:transform 2.4s cubic-bezier(.2,.8,.2,1),opacity 1.2s}
html.js .hero .kicker{opacity:0;transition:opacity .6s .3s}
html.js .hero .kicker:before{width:0;transition:width .7s .4s cubic-bezier(.7,0,.2,1)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .ln>span{display:inline-block}
html.js .hero h1 .ln>span{transform:translateY(110%);transition:transform 1s cubic-bezier(.2,.9,.2,1)}
html.js .hero h1 em{background:linear-gradient(90deg,var(--red),var(--red)) 0 100%/0 0 no-repeat}
html.js .hero .lead,html.js .hero .ctas{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
html.js .hero .torch{opacity:0;transform:translate(120px,40px) rotate(18deg) scale(.9);transition:opacity 1s .5s,transform 1.4s .5s cubic-bezier(.2,.9,.2,1)}
html.js .hero-spec .c{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}
body.ready .hero .bg{transform:none;opacity:1}
body.ready .hero .kicker{opacity:1}
body.ready .hero .kicker:before{width:34px}
body.ready .hero h1 .ln>span{transform:none}
body.ready .hero h1 .ln:nth-child(2)>span{transition-delay:.12s}
body.ready .hero h1 .ln:nth-child(3)>span{transition-delay:.24s}
body.ready .hero h1 .ln:nth-child(1)>span{transition-delay:0s}
html.js body.ready .hero .lead{opacity:1;transform:none;transition-delay:.55s}
html.js body.ready .hero .ctas{opacity:1;transform:none;transition-delay:.7s}
html.js body.ready .hero .torch{opacity:1;transform:rotate(-8deg)}
html.js body.ready .hero-spec .c{opacity:1;transform:none}
body.ready .hero-spec .c:nth-child(1){transition-delay:.9s}body.ready .hero-spec .c:nth-child(2){transition-delay:1s}body.ready .hero-spec .c:nth-child(3){transition-delay:1.1s}body.ready .hero-spec .c:nth-child(4){transition-delay:1.2s}
.hero .h1wrap{position:relative}
.hero h1 .ln:first-child{transition-delay:.1s}
.hero .torch-wrap{justify-self:end;position:relative;width:min(560px,100%)}
.hero .torch-wrap .torch{width:100%}
.hero .torch-wrap:after{content:"";position:absolute;left:58%;top:34%;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,#fff 0,#bfe3ff 30%,rgba(120,180,255,.5) 55%,transparent 72%);filter:blur(1px);opacity:0;animation:arc 2.6s 2s infinite}
@keyframes arc{0%,100%{opacity:0;transform:scale(.6)}8%{opacity:1;transform:scale(1.6)}12%{opacity:.4}16%{opacity:1;transform:scale(1.2)}30%{opacity:0}}
.hero .torch{animation:float 6s 2s ease-in-out infinite}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}
.hero .torch{transition:filter .4s}
.hero .torch-wrap:hover .torch{filter:drop-shadow(0 30px 40px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(211,24,30,.45))}
.hero-spec .c{position:relative;transition:background .3s}
.hero-spec .c:hover{background:#2a3034}
.hero-spec .c:hover b{color:var(--red)}

/* ----- scroll reveal ----- */
html.js .rv{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
html.js .rv.rv-l{transform:translateX(-40px)}
html.js .rv.rv-r{transform:translateX(40px)}
html.js .rv.rv-z{transform:scale(.94)}
html.js .rv.in{opacity:1;transform:none}
.sec-head{position:relative;border-bottom-color:transparent!important}
.sec-head:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#cfd4d8;transform-origin:left;transition:transform 1.2s cubic-bezier(.7,0,.2,1)}
.dark-sec .sec-head:after{background:var(--line)}
html.js .sec-head:not(.in):after{transform:scaleX(0)}
.sec-head h2 .ch{display:inline-block;white-space:pre}
html.js .sec-head h2 .ch{opacity:0;transform:translateY(.7em) rotate(6deg);transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.2,1);transition-delay:calc(var(--i)*35ms + .15s)}
html.js .sec-head.in h2 .ch{opacity:1;transform:none}
html.js .sec-head .en{clip-path:inset(0 100% 0 0);transition:clip-path .8s cubic-bezier(.7,0,.2,1)}
html.js .sec-head.in .en{clip-path:inset(0 0 0 0)}
html.js .sec-head p{opacity:0;transform:translateY(14px);transition:opacity .7s .45s,transform .7s .45s}
html.js .sec-head.in p{opacity:1;transform:none}
html.js .contact h2 .ch{opacity:0;display:inline-block;transform:translateY(.6em);transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.2,1);transition-delay:calc(var(--i)*25ms)}
html.js .contact h2.in .ch{opacity:1;transform:none}
.contact h2 .ch{display:inline-block;white-space:pre}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  html.js .rv,html.js .sec-head h2 .ch,html.js .sec-head p,html.js .hero *{opacity:1!important;transform:none!important;clip-path:none!important}
}

/* ===== multipage ===== */
nav.main .dd{position:relative;display:flex}
nav.main .dd>a:before{content:"";position:absolute;right:3px;top:50%;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg)}
nav.main .sub{position:absolute;top:100%;left:0;min-width:230px;background:var(--ink);border-top:3px solid var(--red);padding:6px 0;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility .25s;z-index:60}
nav.main .dd:hover .sub{opacity:1;visibility:visible;transform:none}
nav.main .sub a{height:auto;padding:11px 20px;color:#cfd4d8;font-size:14px;display:flex;justify-content:space-between;border:0;margin:0}
nav.main .sub a:after{display:none}
nav.main .sub a span{font-family:var(--mono);font-size:11px;color:#7d868c}
nav.main .sub a:hover{background:var(--red);color:#fff}
nav.main .sub a:hover span{color:#fff}
nav.main a.cur{color:var(--red)}
nav.main a.cur:after{transform:scaleX(1)}
.pbanner{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.pbanner .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.pbanner .bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,16,18,.94) 0%,rgba(14,16,18,.78) 50%,rgba(14,16,18,.45) 100%)}
.pbanner .wrap{position:relative;padding:86px 0 62px}
.crumbs{font-size:12.5px;color:#9aa3aa;font-family:var(--mono)}
.crumbs a:hover{color:#fff}
.crumbs i{font-style:normal;margin:0 8px;color:var(--red)}
.pbanner .en{font-family:var(--cond);font-weight:600;color:var(--red);letter-spacing:.18em;font-size:14px;text-transform:uppercase;margin-top:30px}
.pbanner h1{font-size:44px;font-weight:800;letter-spacing:.03em;line-height:1.2;margin:6px 0 12px}
.pbanner p{color:#c3cacf;max-width:620px;font-size:15.5px}
.pbanner:after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(-45deg,var(--red) 0 12px,transparent 12px 24px);opacity:.9}
html.js .pbanner .bg{transform:scale(1.1);opacity:0;transition:transform 2s cubic-bezier(.2,.8,.2,1),opacity 1s}
html.js body.ready .pbanner .bg{transform:none;opacity:1}
html.js .pbanner .wrap>*{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .9s cubic-bezier(.2,.9,.2,1)}
html.js body.ready .pbanner .wrap>*{opacity:1;transform:none}
body.ready .pbanner .wrap>*:nth-child(2){transition-delay:.1s}body.ready .pbanner .wrap>*:nth-child(3){transition-delay:.2s}body.ready .pbanner .wrap>*:nth-child(4){transition-delay:.32s}
.cta-band{background:var(--red);color:#fff;padding:0;position:relative;overflow:hidden}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:44px 0}
.cta-band h3{font-size:26px;font-weight:800;letter-spacing:.03em}
.cta-band p{color:#ffd9da;font-size:14.5px;margin-top:4px}
.cta-band .tel{font-family:var(--cond);font-size:34px;font-weight:700;line-height:1;margin-right:26px}
.cta-band .act{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.cta-band .btn{background:var(--ink)}
.cta-band .btn:before{background:#fff}
.cta-band .btn:hover{color:var(--ink)}
.cta-band:before{content:"HANFENG";position:absolute;right:-20px;bottom:-38px;font-family:var(--cond);font-weight:700;font-size:170px;line-height:1;color:rgba(255,255,255,.07);letter-spacing:.04em;pointer-events:none}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--steel);color:#fff;border:1px solid var(--line)}
.feature .img{background:#1d2124;display:flex;align-items:center;justify-content:center;padding:40px;overflow:hidden}
.feature .img img{max-height:440px;object-fit:contain;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.feature:hover .img img{transform:scale(1.05)}
.feature .txt{padding:48px 46px;border-left:1px solid var(--line)}
.feature .code{font-family:var(--mono);color:#8d969c;font-size:12px}
.feature h3{font-family:var(--cond);font-size:46px;font-weight:700;line-height:1;margin:8px 0 6px}
.feature h4{font-size:18px;color:#cfd4d8;margin-bottom:16px}
.feature p{color:#aeb6bc;font-size:14.5px}
.feature .feat{margin:22px 0 28px}
.more-link{display:inline-flex;gap:8px;font-weight:600;color:var(--red);border-bottom:2px solid var(--red);padding-bottom:3px;margin-top:26px}
.more-link .mono{transition:transform .3s}
.more-link:hover .mono{transform:translateX(5px)}
.sec-foot{display:flex;justify-content:center;margin-top:36px}
.models td a{color:var(--red);font-weight:600;white-space:nowrap}
.models td a:hover{text-decoration:underline}
.models td.cat-c{color:var(--mid);font-size:13px}
.svc-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.svc-photos figure{position:relative;overflow:hidden;aspect-ratio:4/5;background:#222}
.svc-photos img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.svc-photos figure:hover img{transform:scale(1.05)}
.svc-photos figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 16px;background:linear-gradient(180deg,transparent,rgba(10,12,14,.9));color:#fff}
.svc-photos figcaption b{display:block;font-size:17px}
.svc-photos figcaption span{font-size:13px;color:#c3cacf}
.addr-block{display:grid;grid-template-columns:1.2fr .8fr;border:1px solid #cfd4d8;background:#fff;margin-top:56px}
.addr-block img{width:100%;height:100%;object-fit:cover;min-height:280px}
.addr-block div{padding:36px}
.addr-block h4{font-size:20px;margin-bottom:12px}
.addr-block p{color:var(--mid);font-size:14px;margin-bottom:8px}
@media (max-width:1080px){
  nav.main .dd{flex-direction:column}
  nav.main .dd>a:before{right:4vw}
  nav.main .sub{position:static;opacity:1;visibility:visible;transform:none;background:#f4f5f6;border-top:0;padding:0}
  nav.main .sub a{color:var(--ink);padding:0 4vw 0 calc(4vw + 16px);height:44px;align-items:center;border-top:1px solid #e6e8ea}
  .feature{grid-template-columns:1fr}.feature .txt{border-left:0;border-top:1px solid var(--line)}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
  .addr-block{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pbanner .wrap{padding:56px 0 46px}
  .pbanner h1{font-size:30px}
  .feature .txt{padding:30px 22px}.feature h3{font-size:36px}
  .svc-photos{grid-template-columns:1fr}
  .svc-photos figure{aspect-ratio:4/3}
  .cta-band h3{font-size:21px}
}

/* Keep model anchors below sticky navigation. */
#tTabs{scroll-margin-top:95px}
.hf-inquiry-honeypot{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;pointer-events:none!important}
form.inq .hf-inquiry-consent{display:flex;align-items:flex-start;gap:9px;margin:15px 0 0;line-height:1.7;font-size:12px;color:#aeb6bc}
form.inq .hf-inquiry-consent input{width:15px!important;height:15px!important;flex:0 0 15px;margin:3px 0 0;padding:0;accent-color:#e3342f}
form.inq .hf-inquiry-consent a{color:#f0f0f0;text-decoration:underline;text-underline-offset:3px}
form.inq button:disabled{opacity:.65;cursor:wait}
form.inq .ok{white-space:normal;overflow-wrap:anywhere;line-height:1.7}
form.inq .ok[data-state=error]{border-left-color:#ff8d81;color:#ffd7d2}
form.inq [aria-busy=true]{cursor:wait}