:root{
  --ink:#1A1F1C; --char:#333537; --char-2:#4A4C4F; --yellow:#FEC407; --amber:#8A5F0E;
  --paper:#F7F5EF; --card:#FFFFFF; --line:#D8D3C4; --muted:#4A524D; --body:#2E3531; --light:#E4E4E4;
  --display:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:var(--char)} a:hover{color:#000}
h1,h2,h3{overflow-wrap:break-word; font-family:var(--display); font-weight:700; text-transform:uppercase; line-height:1; margin:0; color:var(--char); text-wrap:balance}
p{margin:0; text-wrap:pretty}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.skip{position:absolute; left:-999px; top:8px; background:var(--yellow); color:var(--ink); padding:8px 14px; z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--yellow); outline-offset:2px}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:rgba(247,245,239,0.96); backdrop-filter:blur(6px); border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px}
.brand img{height:48px; width:auto}
.nav{display:flex; gap:4px; align-items:center; flex-wrap:wrap}
.nav a{font-size:14px; font-weight:500; text-decoration:none; color:var(--char); padding:10px 10px; border-radius:2px}
.nav a:hover{background:#ECE8DD}
.nav .cta{background:var(--yellow); color:var(--ink); font-weight:600; margin-left:6px}
.nav .cta:hover{background:#E9B400}
.menu-btn{display:none; background:none; border:2px solid var(--char); color:var(--char); font:600 14px var(--sans); padding:10px 14px; min-height:44px; cursor:pointer}
@media (max-width: 980px){
  .menu-btn{display:block}
  .nav{display:none; position:absolute; top:72px; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; padding:8px 24px 16px}
  .nav.open{display:flex}
  .nav a{padding:12px 8px; border-bottom:1px solid #ECE8DD}
  .nav .cta{margin:8px 0 0; text-align:center}
}

/* Hero */
.hero{position:relative; color:#fff; background:var(--char)}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 62%}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,22,22,0.88) 0%, rgba(20,22,22,0.6) 55%, rgba(20,22,22,0.25) 100%)}
.hero .wrap{position:relative; z-index:1; padding-top:110px; padding-bottom:110px}
.hero .loc{font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow)}
.hero h1{color:#fff; font-size:clamp(40px, 8vw, 96px); line-height:.95; margin:16px 0 22px; max-width:900px}
.hero p.lead{font-size:clamp(17px, 2vw, 21px); max-width:640px; color:#EDEDED}
.hero .actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 22px; font-weight:600; text-decoration:none; border:2px solid transparent}
.btn-yellow{background:var(--yellow); color:var(--ink)} .btn-yellow:hover{background:#E9B400; color:var(--ink)}
.btn-ghost{border-color:#fff; color:#fff} .btn-ghost:hover{background:#fff; color:var(--ink)}
.hero .caption{position:absolute; right:24px; bottom:14px; z-index:1; font-size:12px; color:#D8D8D8}

.apps-band{background:var(--char); color:#fff}
.apps-band .wrap{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px; padding-top:36px; padding-bottom:40px}
.apps-band a{text-decoration:none; color:#fff; border-top:4px solid var(--yellow); padding-top:16px; display:block}
.apps-band strong{font-family:var(--display); font-size:30px; text-transform:uppercase; display:block; line-height:1}
.apps-band span{color:var(--light); font-size:15px}
@media (max-width: 900px){ .apps-band .wrap{grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px} }
@media (max-width: 480px){ .apps-band .wrap{grid-template-columns:1fr} }

/* Sections */
section.block{padding:88px 0}
section.block.alt{background:#EFECE3}
.kicker{display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--char)}
.kicker::before{content:""; width:12px; height:12px; background:var(--yellow)}
.section-head{max-width:820px; margin-bottom:40px}
.section-head h2{font-size:clamp(36px, 5vw, 56px); margin:12px 0 16px}
.section-head p{font-size:17px; color:var(--body)}
.card{background:var(--card); border:1px solid var(--line); padding:24px}
.card.top{border-top:4px solid var(--yellow)}
.card h3{font-size:26px; margin-bottom:12px}
.dark{background:var(--char); color:var(--light); padding:24px}
.dark h3{color:var(--yellow); font-size:26px; margin-bottom:12px}
ul.list{margin:0; padding-left:20px; color:var(--body)} ul.list li{margin:4px 0}
.dark ul.list{color:var(--light)}
.grid-2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px}
.grid-3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.grid-4{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px}
@media (max-width: 900px){ .grid-3{grid-template-columns:repeat(2, minmax(0,1fr))} .grid-4{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 640px){ .grid-2, .grid-3{grid-template-columns:1fr} }
figure{margin:0}
.photo{position:relative; overflow:hidden; background:var(--char)}
.photo img{width:100%; height:100%; object-fit:cover}
figcaption{font-size:13px; color:var(--muted); margin-top:8px}
.note{font-size:13px; color:var(--muted); margin-top:18px}

/* Drawings */
.pkg{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 24px; margin:0; padding:0; list-style:none}
.pkg li{display:flex; gap:10px; color:var(--body)} .pkg li::before{content:""; flex:0 0 9px; height:9px; margin-top:8px; background:var(--yellow)}
@media (max-width: 640px){ .pkg{grid-template-columns:1fr} }
.drawings{display:grid; grid-template-columns:2fr 3fr 3fr; gap:16px; margin-top:28px}
.drawings a{display:block; background:#fff; border:1px solid var(--line); padding:10px; text-decoration:none}
.drawings a:hover{border-color:var(--char)}
.drawings img{width:100%; height:300px; object-fit:contain}
.drawings span{display:block; font-size:13px; color:var(--muted); margin-top:8px}
@media (max-width: 900px){ .drawings{grid-template-columns:1fr} .drawings img{height:auto; max-height:420px} }
.feature-row{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; margin-top:40px}
.feature-row > div{border-top:4px solid var(--yellow); padding-top:12px}
.feature-row h3{font-size:22px; margin-bottom:6px}
@media (max-width: 720px){ .feature-row{grid-template-columns:1fr} }

/* Split */
.split{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px; align-items:start}
.split.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media (max-width: 900px){ .split, .split.rev{grid-template-columns:1fr} }
.stat{background:var(--char); padding:18px 20px}
.stat b{display:block; font-family:var(--display); font-size:40px; line-height:1; color:var(--yellow)}
.stat span{font-size:13px; color:var(--light)}
.standards{margin-top:28px}
.standards .grid-3 > div b{display:block; color:var(--char); font-size:14px; margin-bottom:4px}
.standards .grid-3 > div p{font-size:14px; color:var(--body)}

/* PLC */
.tiles .card{padding:20px}
.tiles h3{font-size:21px; margin-bottom:6px}
.tiles p{font-size:15px; color:var(--body)}
.netdiag{margin-top:24px}
.netdiag .row{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
.netdiag .node{border:2px solid var(--char); background:#fff; padding:12px; text-align:center}
.netdiag .node b{display:block; font-size:15px; color:var(--char)}
.netdiag .node span{font-size:13px; color:var(--muted)}
.netdiag .node.main{background:var(--yellow)} .netdiag .node.main span{color:var(--ink)}
.netdiag .stems{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; height:24px}
.netdiag .stems i{justify-self:center; width:2px; background:var(--char)}
.netdiag .bus{background:var(--char); color:var(--yellow); text-align:center; font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:8px}
@media (max-width: 640px){ .netdiag .node b{font-size:13px} .netdiag .node span{display:none} }

/* Applications */
.app{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:36px; align-items:center; padding:32px 0; border-top:1px solid #C9C3B2}
.app:first-of-type{border-top:2px solid var(--char)}
.app .photo{aspect-ratio:4/3}
.app .photo.drawing{background:#fff; border:1px solid var(--line)} .app .photo.drawing img{object-fit:contain}
.app h3{font-size:38px}
.app .sub{font-size:14px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); margin:8px 0 12px}
.app p{color:var(--body); margin-bottom:10px}
@media (max-width: 800px){ .app{grid-template-columns:1fr; gap:18px} }
.more{background:var(--char); color:var(--light); padding:22px 26px; margin-top:24px}
.more b{color:var(--yellow)}

/* Import */
.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px; counter-reset:s}
.steps li{display:flex; gap:18px; counter-increment:s}
.steps li::before{content:counter(s); flex:0 0 44px; height:44px; background:var(--yellow); color:var(--ink); font:700 24px var(--display); display:flex; align-items:center; justify-content:center}
.steps h3{font-size:24px; margin-bottom:4px}
.steps p{color:var(--body)}


/* Import feature */
.import-hero{position:relative; background:var(--char); color:#fff; overflow:hidden}
.import-hero .import-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% center; opacity:.3}
.import-hero .wrap{position:relative; padding-top:100px; padding-bottom:100px}
.import-hero h2{color:#fff; font-size:clamp(38px, 5.5vw, 68px); margin:14px 0 20px; max-width:900px}
.import-hero .lead{font-size:clamp(17px, 1.9vw, 20px); color:#EDEDED; max-width:760px}
.kicker.light{color:var(--yellow)}
.partner-badge{display:inline-flex; align-items:center; gap:14px; margin-top:32px; background:#fff; color:var(--ink); padding:12px 20px}
.partner-badge span{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.partner-badge img{height:52px; width:auto}
@media (max-width: 480px){ .partner-badge{flex-direction:column; align-items:flex-start; gap:8px} .partner-badge img{height:40px} }
.delivered .card h3{font-size:24px; margin-bottom:6px}
.delivered .card p{color:var(--body); font-size:15px}
.cad-gallery{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin-top:16px}
.cad-gallery .cad{display:block; background:#fff; border:1px solid var(--line); padding:10px; text-decoration:none}
.cad-gallery .cad.dark-bg{background:#1B2129; border-color:#1B2129}
.cad-gallery .cad.dark-bg span{color:#C9CDD2}
.cad-gallery img{width:100%; height:320px; object-fit:contain}
.cad-gallery span{display:block; font-size:13px; color:var(--muted); margin-top:8px}
@media (max-width: 800px){ .cad-gallery{grid-template-columns:1fr} .cad-gallery img{height:auto} }

/* Work with us */
.recent{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:16px}
.recent figure{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--char)}
.recent img{width:100%; height:100%; object-fit:cover}
.recent figcaption{position:absolute; left:0; right:0; bottom:0; margin:0; background:rgba(26,31,28,.8); color:#fff; padding:8px 12px; font-size:13px}
@media (max-width: 720px){ .recent{grid-template-columns:1fr} .recent figure{aspect-ratio:4/3} }

/* Contact */
.contact{background:var(--yellow); color:var(--ink); padding:72px 0}
.contact .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:end}
.contact h2{color:var(--ink); font-size:clamp(44px, 6vw, 72px)}
.contact p{font-size:17px; margin-top:12px}
.contact .details{display:flex; flex-direction:column; gap:6px; font-size:17px; text-align:right}
.contact .details a{color:var(--ink); font-weight:600; text-decoration:none; border-bottom:2px solid transparent}
.contact .details a:hover{border-bottom-color:var(--ink)}
.contact .details .phone{font-size:28px; font-family:var(--display); font-weight:700}
@media (max-width: 800px){ .contact .wrap{grid-template-columns:1fr} .contact .details{text-align:left} }
footer{background:var(--char); color:#BDBDBD; font-size:14px; padding:24px 0}
footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* Division switch in header */
.nav .switch{border:2px solid var(--char); font-weight:600; margin-left:6px}
.nav .switch:hover{background:var(--char); color:#fff}
.nav a.current{background:#ECE8DD}
@media (max-width: 980px){ .nav .switch{margin:8px 0 0; text-align:center} }

/* Landing */
.landing-intro{background:var(--paper); padding:44px 0 32px}
.landing-intro h1{font-size:clamp(40px, 6vw, 76px); line-height:.95}
.landing-intro p{font-size:18px; color:var(--body); margin-top:14px; max-width:760px}
.landing-intro .loc{font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:12px}
.divisions{display:grid; grid-template-columns:repeat(2, minmax(0,1fr))}
.division{position:relative; min-height:620px; display:flex; align-items:flex-end; color:#fff; text-decoration:none; overflow:hidden; background:var(--char)}
.division img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.division::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,22,22,0.15) 0%, rgba(20,22,22,0.55) 45%, rgba(20,22,22,0.92) 100%)}
.division:hover img{transform:scale(1.04)}
.division .inner{position:relative; z-index:1; padding:44px clamp(24px, 4vw, 56px); max-width:600px}
.division .tag{display:inline-block; background:var(--yellow); color:var(--ink); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:6px 10px}
.division h2{color:#fff; font-size:clamp(40px, 4.6vw, 64px); margin:16px 0 14px}
.division p{color:#EDEDED; font-size:17px}
.division ul{margin:16px 0 26px; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; color:#fff; font-size:15px}
.division li{display:flex; gap:8px; align-items:center} .division li::before{content:""; width:8px; height:8px; background:var(--yellow)}
.division .go{display:inline-flex; align-items:center; gap:10px; background:var(--yellow); color:var(--ink); font-weight:600; padding:13px 22px; min-height:48px}
.division:hover .go{background:#E9B400}
.division + .division{border-left:4px solid var(--yellow)}
@media (max-width: 900px){ .divisions{grid-template-columns:1fr} .division{min-height:520px} .division + .division{border-left:0; border-top:4px solid var(--yellow)} }
.why .grid-3 > div{border-top:4px solid var(--yellow); padding-top:14px}
.why h3{font-size:26px; margin-bottom:8px}
.why p{color:var(--body)}

/* Machinery process */
.process{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 28px; counter-reset:s}
.process li{counter-increment:s; display:flex; gap:18px; background:#fff; border:1px solid var(--line); padding:20px}
.process li::before{content:counter(s); flex:0 0 46px; height:46px; background:var(--yellow); color:var(--ink); font:700 26px var(--display); display:flex; align-items:center; justify-content:center}
.process h3{font-size:23px; margin-bottom:6px}
.process p{color:var(--body); font-size:15px}
@media (max-width: 800px){ .process{grid-template-columns:1fr} }
.built{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:20px}
.built .stat b{font-size:30px}
@media (max-width: 720px){ .built{grid-template-columns:1fr} }
.app.nophoto{grid-template-columns:1fr}
.cad-gallery.single{grid-template-columns:1fr}
.cad-gallery.single img{height:440px}
@media (max-width: 800px){ .cad-gallery.single img{height:auto} }
.cad-gallery.three{grid-template-columns:repeat(3, minmax(0,1fr))}
.cad-gallery.three img{height:260px}
@media (max-width: 900px){ .cad-gallery.three{grid-template-columns:1fr} .cad-gallery.three img{height:auto} }
.partner-badge .sep{width:1px; align-self:stretch; background:#D8D3C4}
.partner-badge img.rt{height:56px}
.partners{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; margin-top:16px}
.partner{background:#fff; border:1px solid var(--line); border-top:4px solid var(--yellow); padding:24px; display:flex; flex-direction:column; gap:10px}
.partner .plogo{height:100px; display:flex; align-items:center}
.partner .plogo img{height:64px; width:auto}
.partner h3{font-size:24px}
.partner p{color:var(--body)}
@media (max-width: 720px){ .partners{grid-template-columns:1fr} }
@media (max-width: 480px){ .partner-badge .sep{display:none} }