/* Brand: Pantone 187 red, black, white only — no screens or tints */
  :root { --red:#C41230; --black:#000; --white:#fff; --wrap:1180px; }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:Inter,Arial,sans-serif;color:var(--black);background:var(--white);line-height:1.6;font-size:17px}
  a{color:inherit}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
  h1,h2,h3,.wordmark,.kicker,.svc-bar a,.btn{font-family:Michroma,"Eurostile Extended",Arial,sans-serif}

  /* ---------- top strip ---------- */
  .topline{background:var(--black);color:var(--white);font-size:13px}
  .topline .wrap{display:flex;justify-content:flex-end;gap:28px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
  .topline a{text-decoration:none}
  .topline a:hover{color:var(--red)}

  /* ---------- header ---------- */
  header.site{border-bottom:0;background:var(--white)}
  header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:26px;padding-bottom:26px}
  .brand{display:flex;align-items:center;gap:14px;text-decoration:none}
  .logo{display:block;height:86px;width:auto;image-rendering:-webkit-optimize-contrast}
  footer .logo{height:72px}
  .brand-mark{width:46px;height:46px;background:var(--red);display:grid;place-items:center;color:var(--white);font-family:Michroma,sans-serif;font-size:15px;letter-spacing:.04em}
  .wordmark{font-size:15px;line-height:1.25;letter-spacing:.06em;text-transform:uppercase}
  nav.main{display:flex;gap:30px;align-items:center}
  nav.main a{text-decoration:none;font-weight:600;font-size:15px}
  nav.main a:hover,nav.main a.active{color:var(--red)}
  nav.main .portal{border:1px solid var(--black);padding:8px 16px}
  nav.main .portal:hover{background:var(--black);color:var(--white)}


  /* red pinstripe: continues the logo's underline across the full header */
  header.site{position:relative;overflow:hidden;--logo-h:86px}
  header.site .logo{height:var(--logo-h)}
  .brand-pin{position:relative;display:block}
  .brand-pin .pin{position:absolute;left:calc(100% - 1px);top:calc(var(--logo-h) * 224 / 269);height:calc(var(--logo-h) * 6 / 269);width:100vw;background:var(--red);pointer-events:none}
  header.site nav.main{position:relative;z-index:1;background:var(--white);padding-left:10px}

  /* ---------- always-visible service bar ---------- */
  .svc-bar{background:var(--red)}
  .svc-bar .wrap{display:grid;grid-template-columns:repeat(8,1fr)}
  .svc-bar a{display:block;text-align:center;color:var(--white);text-decoration:none;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:15px 10px;border-right:1px solid var(--white)}
  .svc-bar a:first-child{border-left:1px solid var(--white)}
  .svc-bar a:hover{background:var(--black)}

  /* ---------- hero ---------- */
  .hero{padding:96px 0 84px;border-bottom:1px solid var(--black)}
  .hero .kicker{display:inline-block;color:var(--red);font-size:12px;letter-spacing:.16em;margin-bottom:26px}
  .hero h1{font-size:clamp(34px,5.4vw,66px);line-height:1.12;letter-spacing:.01em;max-width:15ch}
  .hero .lede{font-size:20px;max-width:640px;margin:30px 0 38px}
  .actions{display:flex;gap:16px;flex-wrap:wrap}
  .btn{display:inline-block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:17px 28px;border:2px solid var(--red)}
  .btn-primary{background:var(--red);color:var(--white)}
  .btn-primary:hover{background:var(--black);border-color:var(--black)}
  .btn-ghost{background:var(--white);color:var(--black);border-color:var(--black)}
  .btn-ghost:hover{background:var(--black);color:var(--white)}

  .creds{display:grid;grid-template-columns:repeat(4,1fr);margin-top:72px;border-top:1px solid var(--black)}
  .creds div{padding:20px 18px 0 0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
  .creds strong{display:block;font-family:Michroma,sans-serif;color:var(--red);font-size:22px;letter-spacing:.02em;margin-bottom:4px}

  /* ---------- services ---------- */
  section{padding:96px 0}
  .sec-head{max-width:720px;margin-bottom:52px}
  .sec-head .kicker{color:var(--red);font-size:12px;letter-spacing:.16em}
  .sec-head h2{font-size:clamp(26px,3.4vw,40px);line-height:1.2;margin:14px 0 18px}
  .sec-head p{font-size:18px}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
  .card{border:1px solid var(--black);padding:34px 30px 30px;display:flex;flex-direction:column;text-decoration:none;transition:border-color .15s}
  .card:hover{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
  .card .verb{font-family:Michroma,sans-serif;color:var(--red);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
  .card h3{font-size:21px;line-height:1.3;margin:12px 0 16px}
  .card ul{list-style:none;margin:0 0 24px;flex:1}
  .card li{padding:9px 0;border-top:1px solid var(--black);font-size:15.5px}
  .card li:last-child{border-bottom:1px solid var(--black)}
  .card .more{font-family:Michroma,sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
  .card:hover .more{color:var(--red)}

  /* ---------- why ---------- */
  .why{background:var(--black);color:var(--white)}
  .why .sec-head .kicker{color:var(--red)}
  .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--white)}
  .why-grid div{padding:30px 32px 0 0}
  .why-grid h3{font-size:16px;letter-spacing:.04em;margin-bottom:12px}
  .why-grid h3 span{color:var(--red);margin-right:10px}
  .why-grid p{font-size:16px}

  /* ---------- since band ---------- */
  .since .wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:64px;align-items:center}
  .since .year{font-family:Michroma,sans-serif;font-size:clamp(70px,11vw,150px);line-height:1;color:var(--red);letter-spacing:-.01em}
  .since .year small{display:block;font-size:14px;letter-spacing:.16em;color:var(--black);margin-top:14px}
  .since h2{font-size:clamp(24px,3vw,34px);line-height:1.25;margin-bottom:18px}
  .since p{font-size:17.5px;margin-bottom:14px}

  /* ---------- contact band ---------- */
  .cta{background:var(--red);color:var(--white);padding:76px 0}
  .cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
  .cta h2{font-size:clamp(24px,3.2vw,38px);line-height:1.2;max-width:18ch}
  .cta .phone{font-family:Michroma,sans-serif;font-size:clamp(22px,2.6vw,32px);text-decoration:none;display:block;margin-bottom:14px}
  .cta .btn{border-color:var(--white);background:var(--white);color:var(--red)}
  .cta .btn:hover{background:var(--black);border-color:var(--black);color:var(--white)}

  /* ---------- footer ---------- */
  footer{padding:64px 0 34px;font-size:15px}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:42px;border-bottom:1px solid var(--black)}
  footer h4{font-family:Michroma,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
  footer ul{list-style:none}
  footer li{margin-bottom:8px}
  footer a{text-decoration:none}
  footer a:hover{color:var(--red)}
  .legal{display:flex;justify-content:space-between;gap:16px;padding-top:24px;font-size:13px;flex-wrap:wrap}


  @media (max-width:900px){
    header.site{--logo-h:60px}
    footer .logo{height:60px}
    header.site .wrap{padding-top:16px;padding-bottom:16px}
    nav.main a:not(.portal){display:none}
    nav.main .portal{font-size:13px;padding:7px 12px}
    .cards,.why-grid{grid-template-columns:1fr}
    .creds{grid-template-columns:repeat(2,1fr)}
    .since .wrap{grid-template-columns:1fr;gap:28px}
    .foot-grid{grid-template-columns:1fr 1fr}
    section{padding:72px 0}
    .hero{padding:64px 0 60px}
  }
  @media (max-width:560px){
    .svc-bar .wrap{grid-template-columns:1fr}
    .svc-bar a{border-left:0!important;border-right:0;border-bottom:1px solid var(--white)}
    .foot-grid{grid-template-columns:1fr}
    .topline .wrap{justify-content:center;padding-top:6px;padding-bottom:6px}
    .topline span,.topline a[href^=mailto]{display:none}
  }

  /* ---------- inner pages ---------- */
  .page-hero{padding:72px 0 56px;border-bottom:1px solid var(--black)}
  .page-hero .kicker{display:inline-block;color:var(--red);font-size:12px;letter-spacing:.16em;margin-bottom:20px;font-family:Michroma,sans-serif}
  .page-hero h1{font-size:clamp(30px,4.4vw,52px);line-height:1.15;max-width:20ch}
  .page-hero .lede{font-size:19px;max-width:700px;margin-top:22px}
  .caps{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;border-top:1px solid var(--black)}
  .cap{padding:26px 0;border-bottom:1px solid var(--black)}
  .cap h3{font-size:17px;line-height:1.35;margin-bottom:8px}
  .cap h3::before{content:"";display:inline-block;width:10px;height:10px;background:var(--red);margin-right:12px;vertical-align:middle}
  .cap p{font-size:16px}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .prose p{margin-bottom:16px;font-size:17.5px}
  .prose h2{font-size:clamp(22px,2.6vw,30px);line-height:1.25;margin:0 0 18px}
  .facts{border-top:2px solid var(--black)}
  .facts div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--black)}
  .facts dt{font-weight:600}
  .facts dd{text-align:right}
  form.contact label{display:block;font-weight:600;margin-bottom:18px;font-size:15px}
  form.contact input,form.contact select,form.contact textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--black);font:inherit;background:var(--white);color:var(--black);border-radius:0}
  form.contact input:focus,form.contact select:focus,form.contact textarea:focus{outline:2px solid var(--red);outline-offset:1px}
  form.contact textarea{min-height:160px;resize:vertical}
  form.contact .row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
  form.contact button{cursor:pointer}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .notice{padding:16px 18px;border-left:4px solid var(--black);margin-bottom:24px;font-weight:600}
  .notice.ok{border-left-color:var(--red)}
  .notice.err{border-left-color:var(--red);color:var(--red)}
  .staging-bar{background:var(--black);color:var(--white);text-align:center;font-size:12px;letter-spacing:.08em;padding:6px}
  @media (max-width:900px){
    .caps,.split{grid-template-columns:1fr;gap:0 0}
    .split{gap:40px}
    form.contact .row{grid-template-columns:1fr}
  }

  /* ---------- platforms (Automation & Safety) ---------- */
  .platforms-sec{border-top:1px solid var(--black)}
  .platforms{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;border-top:2px solid var(--red)}
  .plat{padding:26px 24px 28px 0;border-bottom:1px solid var(--black)}
  .plat h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin-bottom:12px;line-height:1.4}
  .plat ul{list-style:none}
  .plat li{padding:6px 0;font-size:15.5px;line-height:1.4}
  .plat-note{margin-top:26px;font-size:16px}
  .plat-note a{color:var(--red);font-weight:600}

  /* ---------- Ignition feature (Automation & Safety) ---------- */
  .ignition-sec{border-top:1px solid var(--black)}
  .ign{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
  .ign-intro{border-left:6px solid var(--red);padding-left:28px}
  .ign-intro .kicker{color:var(--red);font-size:12px;letter-spacing:.16em}
  .ign-intro h2{font-size:clamp(26px,3.4vw,40px);line-height:1.2;margin:14px 0 18px}
  .ign-intro .lede{font-size:18px;margin-bottom:28px}
  .ign-list{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--red)}
  .ign-item{padding:22px 22px 22px 0;border-bottom:1px solid var(--black)}
  .ign-item h3{font-size:14px;letter-spacing:.04em;margin-bottom:8px;line-height:1.4}
  .ign-item p{font-size:15.5px;line-height:1.5}
  @media (max-width:900px){ .ign{grid-template-columns:1fr;gap:40px} }
  @media (max-width:560px){ .ign-list{grid-template-columns:1fr} }
  .ign-logo{display:block;width:220px;height:auto;margin:18px 0 6px}
  .ign-shots{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;margin-top:64px;align-items:end}
  .ign-shots figure{margin:0}
  .ign-shots img{display:block;width:100%;height:auto}
  .ign-shots figcaption{font-size:14px;margin-top:10px;padding-top:10px;border-top:1px solid var(--black)}
  .ign-credit{font-size:12.5px;margin-top:22px}
  @media (max-width:760px){ .ign-shots{grid-template-columns:1fr} }

  /* ---------- SCADA page ---------- */
  .ignition-sec.first{border-top:0}
  .ign-teaser{display:flex;justify-content:space-between;align-items:center;gap:40px;border-left:6px solid var(--red);padding-left:28px}
  .ign-teaser .kicker{color:var(--red);font-size:12px;letter-spacing:.16em}
  .ign-teaser h2{font-size:clamp(24px,3vw,34px);line-height:1.2;margin:12px 0 12px}
  .ign-teaser p{max-width:620px}
  .connects-sec,.steps-sec{border-top:1px solid var(--black)}
  .steps{list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(5,1fr);border-top:2px solid var(--red)}
  .steps li{counter-increment:step;padding:24px 22px 24px 0;border-bottom:1px solid var(--black)}
  .steps li::before{content:"0" counter(step);display:block;font-family:Michroma,sans-serif;color:var(--red);font-size:13px;letter-spacing:.1em;margin-bottom:10px}
  .steps h3{font-size:15px;margin-bottom:8px}
  .steps p{font-size:15.5px;line-height:1.5}
  .cta-band{border-top:1px solid var(--black)}
  .cta-inner{text-align:center;max-width:760px}
  .cta-inner h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:14px}
  .cta-inner p{font-size:18px;margin-bottom:28px}
  .plat a{color:inherit}
  @media (max-width:980px){ .steps{grid-template-columns:1fr 1fr} }
  @media (max-width:760px){ .ign-teaser{flex-direction:column;align-items:flex-start} .steps{grid-template-columns:1fr} }
  .tm-note-sec{padding:0 0 48px}
  .equip-sec{border-top:1px solid var(--black)}
  .equip-wrap{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
  .equip-photo{margin:0}
  .equip-photo img{display:block;width:100%;height:auto}
  .equip-photo figcaption{font-size:13px;margin-top:10px;padding-top:10px;border-top:1px solid var(--black)}
  .equip-list{grid-template-columns:1fr 1fr}
  @media (max-width:900px){ .equip-wrap{grid-template-columns:1fr;gap:36px} .equip-photo{max-width:440px} }
  @media (max-width:560px){ .equip-list{grid-template-columns:1fr} }
  .equip-sw{margin-top:26px;font-size:16px;border-left:6px solid var(--red);padding-left:18px}
  .cap p a{color:var(--red);font-weight:600;white-space:nowrap}

  /* ---------- service bar: six tabs ---------- */
  .svc-bar a{font-size:12px;letter-spacing:.05em;padding:15px 6px;display:flex;align-items:center;justify-content:center;min-width:0}
  @media (max-width:1380px){
    .svc-bar .wrap{grid-template-columns:repeat(4,1fr)}
    .svc-bar a{border-bottom:1px solid var(--white)}
    .svc-bar a:nth-child(4n+1){border-left:1px solid var(--white)}
  }
  @media (max-width:560px){
    .svc-bar .wrap{grid-template-columns:1fr 1fr}
    .svc-bar a{border-left:0!important;border-right:1px solid var(--white)}
    .svc-bar a:nth-child(2n){border-right:0}
  }
  .page-hero .creds{margin-top:44px}
  .equip-list4{grid-template-columns:repeat(4,1fr)}
  @media (max-width:900px){ .equip-list4{grid-template-columns:1fr 1fr} }
  @media (max-width:560px){ .equip-list4{grid-template-columns:1fr} }

  /* ---------- photo gallery ---------- */
  .gallery-sec{border-top:1px solid var(--black)}
  .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
  .gallery figure{margin:0}
  .gallery img{display:block;width:100%;height:auto}
  .gallery .g-tall img{height:460px;object-fit:cover;object-position:center top}
  .gallery .g-wide{grid-column:1 / -1}
  .gallery figcaption{font-size:14px;margin-top:10px;padding-top:10px;border-top:1px solid var(--black)}
  @media (max-width:900px){ .gallery{grid-template-columns:1fr 1fr} .gallery .g-tall:nth-child(3){grid-column:1 / -1} }
  @media (max-width:560px){ .gallery{grid-template-columns:1fr} .gallery .g-tall img{height:auto} }
  .platforms.four{grid-template-columns:repeat(4,1fr)}
  @media (max-width:900px){ .platforms.four{grid-template-columns:1fr 1fr} }
  @media (max-width:560px){ .platforms.four{grid-template-columns:1fr} }

  /* ---------- tagline ---------- */
  .topline .tagline{margin-right:auto;font-family:Michroma,sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
  .foot-tagline{font-family:Michroma,sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-top:14px}
  @media (max-width:560px){ .topline .tagline{width:100%;text-align:center;margin-right:0} }

  /* ---------- homepage: 8 service cards ---------- */
  .cards-4{grid-template-columns:repeat(4,1fr);gap:22px}
  .cards-4 .card{padding:28px 24px 24px}
  .cards-4 .card h3{font-size:18px}
  .card-cta{background:var(--red);border-color:var(--red);color:var(--white)}
  .card-cta .verb{color:var(--white)}
  .card-cta p{flex:1;font-size:15.5px;margin-bottom:24px}
  .card-cta:hover{background:var(--black);border-color:var(--black);box-shadow:none}
  .card-cta:hover .more{color:var(--white)}
  @media (max-width:1100px){ .cards-4{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .cards-4{grid-template-columns:1fr} }

  /* ---------- ECRA/ESA mark ---------- */
  .esa-block{display:flex;align-items:center;gap:16px;margin-top:32px}
  .esa-block img{height:84px;width:auto;display:block}
  .esa-block span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;line-height:1.4}
  .esa-block strong{display:block;font-family:Michroma,sans-serif;font-size:20px;letter-spacing:.02em;margin-top:2px}
  .esa-foot{margin-top:18px}
  .esa-foot img{height:64px}
  .esa-foot strong{font-size:16px}
  .card-cta li{border-color:var(--white)!important}

  /* service bar: eight tabs on one row needs a wider bar and tighter type */
  .svc-bar a{font-size:11px;letter-spacing:.02em;padding:14px 4px;line-height:1.35;overflow-wrap:normal;word-break:keep-all}
  @media (max-width:1380px){ .svc-bar a{font-size:12px;letter-spacing:.05em} }

/* ---------- v4: where we work, quote form, call bar ---------- */
.where{border-top:1px solid var(--black)}
.where-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.where-grid>div{border-top:4px solid var(--red);padding-top:18px}
.where-grid h3{font-size:18px;margin:0 0 10px}
.where-grid p{margin:0 0 12px}
.where-grid a{font-weight:600}
.field-hint{display:block;font-weight:400;font-size:13px;margin-top:6px}
form.contact input[type=file]{padding:10px;background:var(--white);cursor:pointer}
.notice a{color:inherit;font-weight:700}
.call-bar{display:none}
@media (max-width:820px){
  .where-grid{grid-template-columns:1fr}
  .call-bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:50;box-shadow:0 -2px 10px rgba(0,0,0,.25)}
  .call-bar a{display:block;text-align:center;padding:15px 8px;font-weight:700;font-size:15px;text-decoration:none;color:var(--white)}
  .call-bar .call{background:var(--red)}
  .call-bar .quote{background:var(--black)}
  body{padding-bottom:52px}
}
@media (max-width:1180px){ header.site nav.main{gap:18px} nav.main a{font-size:14px} }
@media print{ .call-bar{display:none} }