/* Automation pages (English and French), scrolling design.
   1. The hero stays in place and the next sections slide up over it, like layered panels.
   2. A live-looking HMI operator screen rises and tilts into place as you scroll to it. */

/* ---------- 1. Layered scrolling ---------- */
.hero { position: sticky; top: 0; z-index: 0; min-height: calc(100vh - 60px); min-height: calc(100svh - 60px); display: flex; align-items: center; }
/* while the next panel covers it, the hero text fades and lifts a little (--p goes 0 to 1, set by automation-v2.js) */
.hero .wrap { opacity: calc(1 - var(--p, 0) * 1.3); transform: translateY(calc(var(--p, 0) * -70px)) scale(calc(1 - var(--p, 0) * .04)); transform-origin: left center; }
.hero::before { transform: scale(calc(1 + var(--p, 0) * .06)); }
/* the photo fades out once it is mostly covered, so the living background takes over behind the glass panels */
.hero { opacity: clamp(0, calc(1.7 - var(--p, 0) * 1.7), 1); }
main > section:not(.hero) { position: relative; z-index: 1; }

/* ---------- Living background and glass panels ---------- */
/* the control network canvas (drawn by automation-v2.js) sits behind everything; it dims itself behind the text column */
.bg-live { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
/* Light industrial theme: after the photo and the HMI screen, the page is light "control cabinet grey" (like RAL 7035 electrical
   cabinets) with crisp white panels, dark text and blue accents. The header, the HMI screen, the equipment screen, the top bar of
   the quote panel, the Lab card and the footer stay dark, like screens and displays mounted on a light cabinet. */
body { background: #dfe5ec; }
main > section:not(.hero) {
  --ink: #142133; --muted: #475769; --line: #c4ceda; --panel: #ffffff; --panel-2: #eef2f6; --blue: #1f6fe0; --blue-soft: #1a5cc2;
  color: var(--ink); background: rgba(236,240,245,.82); }
main > section.alt:not(.hmi-section) { background: rgba(226,232,240,.88); border-color: #cfd8e3; }
/* dark islands inside the light page keep the dark colours */
.screen, .console-bar, .cross-card, footer { --ink: #f6f8fa; --muted: #c6d0dc; --line: #364659; --blue: #3d8bff; --blue-soft: #9cc4ff; color: var(--ink); }
footer { position: relative; z-index: 1; background: #1b2533; }
/* white panels with a soft shadow, so they clearly stand off the grey page */
.card, .project, .fact, .next, .contact { background: #fff; border: 1px solid #cdd6e1; box-shadow: 0 1px 2px rgba(20,33,51,.06), 0 8px 24px rgba(20,33,51,.08); }
.card { background: repeating-linear-gradient(90deg, rgba(20,33,51,.012) 0 1px, transparent 1px 3px), linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%); }
.card:hover { border-color: rgba(31,111,224,.55); box-shadow: 0 2px 4px rgba(20,33,51,.06), 0 16px 40px rgba(20,33,51,.14); }
.card::after { opacity: .7; } /* the corner screws, a little lighter on the white door */
.pilot { box-shadow: 0 0 0 3px #c9d1db, 0 0 0 4px #9aa6b4, 0 0 8px rgba(61,220,132,.55); } /* steady green, never reacts */
.icon { color: #1f6fe0; background: rgba(31,111,224,.08); border-color: rgba(31,111,224,.25); }
main > section:not(.hero) .note { color: #8a5a00; } /* gold notes, darkened so they read on light */
/* "Send it again": the files must be attached again. An orange warning box with a "!" and an orange outline on the
   file fields, both pulsing three times when the page opens so the eye goes straight to them */
#files-again:not([hidden]) { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 14px; border: 2px solid #e07b00; border-radius: 10px;
  background: #ffe8c7; color: #3d2200 !important; font-weight: 700; font-size: .95rem; line-height: 1.4; animation: needs-file 1.1s ease-in-out 3; }
#files-again::before { content: "!"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e07b00; color: #fff; font-weight: 800; }
#quote input[type="file"].needs-file { border: 2px solid #e07b00; background: #fff3e0; box-shadow: 0 0 0 4px rgba(224,123,0,.3); animation: needs-file 1.1s ease-in-out 3; }
@keyframes needs-file { 50% { box-shadow: 0 0 0 8px rgba(224,123,0,.45); } }
@media (prefers-reduced-motion: reduce) { #files-again:not([hidden]), #quote input[type="file"].needs-file { animation: none; } }
.portrait, .shot { color: #5a6a7e; background: repeating-linear-gradient(45deg, #eef2f6 0 14px, #e6ebf1 14px 28px); border-color: #b9c4d2; }
/* equipment: a real dark HMI screen on the light page */
.screen { background: linear-gradient(135deg, #1e2c40 0%, #2a3c55 100%); border-color: #3a4d68; box-shadow: 0 14px 40px rgba(20,33,51,.22); } /* steel-blue gradient instead of flat dark */
.screen-bar { background: rgba(14,22,34,.45); }
.screen .chips li { background: rgba(255,255,255,.07); border-color: rgba(156,196,255,.3); }
.chips li { color: #eef3f9; }
.screen .hint { color: #c6d0dc; }
.screen .note { color: #f5b041 !important; }
/* quote: dark top bar (with the status light), white form below with clear fields */
.console { background: #fff; border-color: #cdd6e1; box-shadow: 0 2px 4px rgba(20,33,51,.06), 0 22px 60px rgba(20,33,51,.16); }
.console-bar { background: #1b2533; border-bottom-color: #1b2533; }
#quote input, #quote textarea, #quote select, #quote .file-remove { background: #f7f9fc; color: var(--ink); border: 1px solid #a9b6c6; }
#quote input:hover, #quote textarea:hover, #quote select:hover { border-color: #7f8fa4; }
#quote input:focus, #quote textarea:focus, #quote select:focus { background: #fff; border-color: #1f6fe0; box-shadow: 0 0 0 3px rgba(31,111,224,.2); }
#quote label { color: #22324a; }
#quote .count.near { color: #8a5a00; }
#err, .field-err { color: #c62828; }
input.invalid { border-color: #d93636 !important; box-shadow: 0 0 0 3px rgba(217,54,54,.15); }
/* A required field left empty (or a wrong email): thick red outline, light red background and a red label;
   the message under the form becomes a red box with a "!" */
#quote input.missing, #quote select.missing, #quote textarea.missing, #quote input.invalid { border: 2px solid #d32f2f !important; background: #fff4f4 !important; box-shadow: 0 0 0 4px rgba(211,47,47,.2) !important; }
#quote label.missing { color: #b71c1c !important; }
#err:not(:empty) { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 12px 14px; border: 2px solid #d32f2f; border-radius: 10px; background: #fdecec; color: #7f1010 !important; font-weight: 700; font-size: .95rem; line-height: 1.4; }
#err:not(:empty)::before { content: "!"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #d32f2f; color: #fff; font-weight: 800; }
.field-err:not(:empty) { margin-top: 4px; color: #b71c1c !important; font-weight: 700; }
#quote .btn:not(.solid), #contact .btn:not(.solid) { color: #1a5cc2; }
.next .num, legend .num { background: #1f6fe0; }
/* the first panel has rounded top corners and a shadow, so it reads as a sheet sliding over the photo; it stays dark so the screen stands out */
main > section.hmi-section { } /* the live demo is a normal light section (it now comes after the services) */
/* dark at the top (behind the title) and fading to the light page at the bottom, so there is no hard dark/light edge */
.hmi-section .hmi-note { color: #33445a; }
/* where the dark HMI panel meets the light page: a soft fade instead of a hard edge */
main > section.hmi-section + section { box-shadow: none; }

/* ---------- Services: the title stays in place while the cards scroll past ---------- */
@media (min-width: 900px) {
  .svc-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 48px; align-items: start; }
  .svc-head { position: sticky; top: 110px; }
  .svc-head .sub { margin-bottom: 0; }
  .svc-layout .services-grid { grid-template-columns: 1fr 1fr; }
  .svc-layout .services-grid .card, .svc-layout .services-grid .card:nth-child(n+4) { grid-column: auto; }
  .svc-layout .services-grid .card:last-child { grid-column: 1 / -1; }
  .svc-layout .card { padding: 28px 26px 26px; min-height: 200px; }
}

/* ---------- Reveal on scroll (classes added by automation-v2.js) ---------- */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease) var(--d, 0ms), transform .8s var(--ease) var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- 2. HMI operator screen ---------- */
.hmi-section { padding-top: clamp(56px, 6vw, 84px); overflow: hidden; }
.hmi-head { max-width: 640px; }
.hmi-stage { --r: 0; margin-top: 28px; perspective: 1600px; }
.hmi-screen { position: relative; border-radius: 14px; overflow: hidden; background: #070b11; border: 1px solid #22324a;
  box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 6px #0d131c, 0 0 0 7px #263040, 0 0 60px rgba(61,139,255,.12);
  transform-origin: 50% 100%;
  transform: translateY(calc((1 - var(--r)) * 90px)) rotateX(calc((1 - var(--r)) * 22deg)) scale(calc(.9 + var(--r) * .1));
  opacity: calc(.35 + var(--r) * .65); will-change: transform; }
.hmi-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* faint screen glare and scan lines */
  background: linear-gradient(115deg, rgba(255,255,255,.05), transparent 38%), repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px); }
.hmi-bar { display: flex; align-items: center; gap: 18px; padding: 10px 18px; background: #0c131d; border-bottom: 1px solid #1c2a3d;
  font: 600 .78rem "Barlow", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8fa3bd; }
.hmi-bar .t { color: #dce7f5; }
.hmi-run { display: inline-flex; align-items: center; gap: 8px; color: var(--led); }
.hmi-run i { width: 9px; height: 9px; border-radius: 50%; background: var(--led); box-shadow: 0 0 8px rgba(61,220,132,.9); animation: led 2.4s ease-in-out infinite; }
.hmi-clock { margin-left: auto; font-variant-numeric: tabular-nums; color: #dce7f5; }
.hmi-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; padding: 14px; }
.hmi-mimic, .hmi-card { background: #0a1119; border: 1px solid #1a2738; border-radius: 10px; }
.hmi-mimic svg { display: block; width: 100%; height: auto; }
.hmi-side { display: grid; gap: 10px; align-content: start; }
.hmi-reads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hmi-card { padding: 10px 12px; }
.hmi-card .k { display: block; color: #7d90a8; font: 600 .68rem "Barlow", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.hmi-card .v { display: block; margin-top: 2px; color: #e8f0fa; font: 700 1.35rem "Barlow Condensed", sans-serif; font-variant-numeric: tabular-nums; }
.hmi-card .v small { font-size: .7em; color: #8fa3bd; margin-left: 2px; }
.hmi-card .bar { display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: #1a2738; overflow: hidden; }
.hmi-card .bar b { display: block; height: 100%; width: 50%; border-radius: 2px; background: linear-gradient(90deg, #3d8bff, #9cc4ff); transition: width .8s ease; }
.hmi-trend svg { display: block; width: 100%; height: 96px; }
.hmi-trend svg polyline { vector-effect: non-scaling-stroke; } /* the chart stretches to the card: keep the pens the same thickness */
/* trend legend: one colour per pen, with its live value */
.hmi-pens { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 4px 0 6px; font: 500 .74rem "Barlow", sans-serif; color: #4a5566; }
.hmi-pens > span { white-space: nowrap; }
.hmi-pens i { display: inline-block; width: 12px; height: 3px; margin-right: 5px; border-radius: 2px; vertical-align: middle; background: var(--c); }
.hmi-pens b { color: #1b2533; font-weight: 700; }
.hmi-scale { display: block; margin-top: 4px; font: 500 .68rem "Barlow", sans-serif; color: #7a8594; }
.hmi-foot { margin: 0 14px 14px; }
.hmi-foot table { width: 100%; border-collapse: collapse; font: 500 .82rem "Barlow", sans-serif; color: #b8c6d8; }
.hmi-foot td { padding: 7px 10px; border-top: 1px solid #16222f; }
.hmi-foot td:first-child { width: 80px; color: #7d90a8; font-variant-numeric: tabular-nums; }
.hmi-foot td:last-child { text-align: right; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; }
.chip.ok { background: rgba(61,220,132,.14); color: #6ee7a6; }
.chip.warn { background: rgba(255,176,32,.16); color: #ffc65c; }
.chip.info { background: rgba(61,139,255,.16); color: #9cc4ff; }
.hmi-note { margin: 14px 0 0; color: var(--muted); font-size: .8rem; text-align: right; }

/* moving parts of the process picture */
.flow { stroke-dasharray: 10 14; animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -24; } }
.impeller { transform-box: fill-box; transform-origin: center; animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hmi-paused .flow, .hmi-paused .impeller, .hmi-paused .belt-box, .hmi-paused .hmi-run i { animation-play-state: paused; }

@media (max-width: 860px) {
  .hmi-body { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hero { position: relative; opacity: 1; } /* no sticky hero: it scrolls away normally */
  .hero .wrap, .hero::before { transform: none; opacity: 1; }
  .hmi-stage { --r: 1 !important; }
  .flow, .impeller, .belt-box, .hmi-run i { animation: none; }
}

/* ---------- The other side of Roibex (card at the end of the page, before the footer) ---------- */
.crosslink { padding-top: 24px; }
.cross-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); overflow: hidden; border-radius: 16px; text-decoration: none; color: var(--ink);
  background: rgba(13,19,27,.75); border: 1px solid rgba(156,196,255,.18); box-shadow: 0 24px 60px rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .3s ease, transform .3s ease; }
.cross-card:hover, .cross-card:focus-visible { border-color: rgba(233,169,75,.55); transform: translateY(-3px); }
.cross-img { min-height: 220px; background: url("/images/LabPicture.jpeg") center / cover no-repeat; transition: transform .8s ease; }
.cross-card:hover .cross-img { transform: scale(1.04); }
.cross-text { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 32px 36px; }
.cross-k { font: 600 .74rem "Barlow", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.cross-t { margin: 0; color: #f2bd6a; font-size: clamp(1.8rem, 3vw, 2.4rem); } /* the Lab's warm gold, so it reads as the other side */
.cross-d { color: #d3dbe6; max-width: 46ch; }
.cross-go { margin-top: 6px; font: 600 .85rem "Barlow", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #f2bd6a; }
.cross-go span { display: inline-block; transition: transform .3s ease; }
.cross-card:hover .cross-go span { transform: translateX(5px); }
@media (max-width: 700px) {
  .cross-card { grid-template-columns: 1fr; }
  .cross-img { min-height: 160px; }
  .cross-text { padding: 22px 20px 24px; }
}
@media (prefers-reduced-motion: reduce) { .cross-card, .cross-img, .cross-go span { transition: none; } .cross-card:hover, .cross-card:hover .cross-img { transform: none; } }
/* hero text stays readable now that the photo shade is lighter */
.hero .kicker, .hero .tagline, .hero .lead { text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 2px 18px rgba(0,0,0,.5); }
.contact .status, .contact-status { color: #12823f; } /* the green "Available" light, darker so it reads on white */
.contact .status .led, .contact-status .led { background: #1fae5b; box-shadow: 0 0 6px rgba(31,174,91,.7); }
.cross-card { background: linear-gradient(135deg, #2b1b12 0%, #4a2b19 60%, #6e3517 100%); border-color: rgba(233,169,75,.4); box-shadow: 0 18px 50px rgba(43,27,18,.3); } /* Roibex Lab colours: espresso to copper */
.cross-card .cross-k { color: #e8c9a6; }
.cross-card .cross-d { color: #f3e6d6; }
/* Operator screen (Line 1 overview) in the light "high-performance HMI" style (ISA-101) that modern plants use:
   light grey background, equipment in calm greys, and colour only where it means something (liquid, running, alarms) */
.hmi-screen { background: #f4f6f9; border-color: #c4ceda; box-shadow: 0 30px 70px rgba(20,33,51,.22), 0 0 0 6px #dfe5ec, 0 0 0 7px #b9c4d1; }
.hmi-screen::after { background: linear-gradient(115deg, rgba(255,255,255,.35), transparent 38%); }
.hmi-bar { background: #fff; border-bottom-color: #d5dde7; color: #475769; }
.hmi-bar .t, .hmi-clock { color: #142133; }
.hmi-run { color: #15803d; }
.hmi-run i { background: #22a05a; box-shadow: 0 0 6px rgba(34,160,90,.6); }
.hmi-mimic { background: #eef1f5; border-color: #d5dde7; }
.hmi-card { background: #fff; border-color: #d5dde7; }
.hmi-card .k { color: #5a6a7e; }
.hmi-card .v { color: #142133; }
.hmi-card .v small { color: #475769; }
.hmi-card .bar { background: #dfe5ec; }
.hmi-card .bar b { background: linear-gradient(90deg, #1f6fe0, #5a9af0); }
.hmi-foot table { color: #142133; }
.hmi-foot td { border-top-color: #dfe5ec; }
.hmi-foot td:first-child { color: #5a6a7e; }
.hmi-screen .chip.ok { background: #dcfce7; color: #15803d; }
.hmi-screen .chip.warn { background: #fef3c7; color: #92400e; }
.hmi-screen .chip.info { background: #dbeafe; color: #1d4ed8; }
/* the cases on the conveyor are moved by automation-v2.js (so the belt can stop for a jam) */
/* Equipment experience in the same light HMI style: white panel, light steel header, light grey status buttons */
.screen { --ink: #142133; --muted: #475769; --line: #c4ceda; color: var(--ink); background: #fff; border-color: #c4ceda; box-shadow: 0 1px 2px rgba(20,33,51,.06), 0 10px 30px rgba(20,33,51,.1); }
.screen-bar { background: #eef1f5; border-bottom: 1px solid #d5dde7; color: #475769; }
.screen-bar h3 { color: #142133; }
.screen .status { color: #15803d; }
.screen .status .led { background: #22a05a; box-shadow: 0 0 6px rgba(34,160,90,.6); }
.screen .chips li { background: #f4f6f9; border-color: #c4ceda; color: #142133; }
.screen .chips .led { background: #1f6fe0; box-shadow: none; }
.screen .hint { color: #475769; }
.screen .note { color: #8a5a00 !important; }
/* Two separate status lights in the top bar: the mixing tanks and the conveyor */
.hmi-bar { flex-wrap: wrap; row-gap: 6px; }
.hmi-run.alarm { color: #b91c1c; }
.hmi-run.alarm i { background: #dc2626; box-shadow: 0 0 8px rgba(220,38,38,.7); animation: hmi-blink 1s steps(1, end) infinite; }
@keyframes hmi-blink { 50% { opacity: .2; } }
.hmi-screen .chip.alarm { background: #fee2e2; color: #b91c1c; }
/* Case jam on the conveyor (automation-v2.js moves the cases): the broken case is crushed and outlined in red; drag it off, then Reset */
.belt-box.broken { fill: #a8763f; stroke: #dc2626; stroke-width: 2.5; stroke-dasharray: 5 3; cursor: grab; touch-action: none; }
.belt-box.broken.held { cursor: grabbing; }
.belt-box.broken:focus-visible { outline: none; stroke: #1f6fe0; stroke-width: 3; }
.belt-box.gone { opacity: 0; transition: opacity .45s ease; pointer-events: none; }
/* the open flap of the case that jams; red dashed with its case once the jam is detected */
.belt-flap { pointer-events: none; fill: #c4904f; stroke-width: 1; stroke-linejoin: round; } /* a shade darker than the case: the inside of the flap */
.belt-flap.broken { stroke: #dc2626; stroke-width: 1.5; }
.belt-flap.gone { opacity: 0; transition: opacity .45s ease; }
.hmi-mimic { position: relative; }
.hmi-alarm { position: static; margin: 12px 14px 0; /* under the tabs, so it shows on both screens */ display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px;
  background: #fff1f1; border: 1px solid #f2b8b8; border-left: 4px solid #dc2626; border-radius: 6px; box-shadow: 0 6px 18px rgba(20,33,51,.12); }
.hmi-alarm[hidden] { display: none; }
/* the alarm banner sits at the bottom of the screen, under the event list (moved there by automation-v2.js), so showing it
   never pushes the pictures down */
.hmi-alarm { margin: 0 14px 14px; }
.hmi-alarm.in-conv { margin: 10px 0 0 !important; } /* conveyor screen: between the picture and the readings */
.hmi-alarm p { flex: 1; margin: 0; color: #7f1d1d; font: 600 .82rem/1.35 "Barlow", sans-serif; }
.hmi-alarm.ok { background: #f0fdf4; border-color: #b7e4c7; border-left-color: #22a05a; }
.hmi-alarm.ok p { color: #14532d; }
.hmi-reset { flex: none; min-height: 36px; padding: 0 16px; border: 1px solid #1f6fe0; border-radius: 4px; background: #1f6fe0; color: #fff;
  font: 700 .78rem "Barlow", sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.hmi-reset:hover { background: #1a5cc2; }
.hmi-reset:focus-visible { outline: 3px solid rgba(31,111,224,.45); outline-offset: 2px; }
@media (max-width: 640px) {
  .hmi-alarm { flex-wrap: wrap; gap: 8px; margin: 0 10px 10px; }
  .hmi-alarm p { flex-basis: 100%; font-size: .78rem; }
  .hmi-reset, .hmi-goto { width: 100%; }
}
/* Photo-eye PE-201 on the conveyor */
.pe .pe-beam { stroke: #22a05a; opacity: .7; }
.pe .pe-led { fill: #22a05a; }
.pe.blocked .pe-beam { stroke: #e0a100; }
.pe.blocked .pe-led { fill: #f0b400; }
.pe.fault .pe-beam { stroke: #dc2626; opacity: 1; }
.pe.fault .pe-led { fill: #dc2626; animation: hmi-blink 1s steps(1, end) infinite; }
/* Caustic preparation screen: valves green when open and light grey when closed, pump green while it runs, pipes only
   show moving liquid while something flows through them */
.hmi-pic .valve { fill: #e6eaef; stroke: #6b7889; transition: fill .3s, stroke .3s; }
.hmi-pic .valve.open { fill: #3ddc84; stroke: #1d6b3f; }
.hmi-pic .pump { fill: #e6eaef; stroke: #3f4b5b; stroke-width: 2.5; transition: fill .3s; }
.hmi-pic .pump.on { fill: #3ddc84; stroke: #1d6b3f; }
.hmi-pic .flow { opacity: 0; transition: opacity .4s; }
.hmi-pic .flow.on { opacity: 1; }
.hmi-pic.caustic .liq { stroke: #7c5cd6; }
.hmi-reads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* CIP step bar: the step running, the next one, and each condition to get there (tick when met, amber while waiting) */
.hmi-step { grid-column: 1 / -1; padding: 10px 12px; border: 1px solid #d5dde7; border-radius: 6px; background: #fff; }
.hmi-step p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; color: #142133; font: 700 .95rem "Barlow", sans-serif; }
.hmi-step p b { padding: 2px 8px; border-radius: 4px; background: #1f6fe0; color: #fff; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.hmi-step p em { margin-left: auto; color: #5a6a7e; font: 600 .78rem "Barlow", sans-serif; font-style: normal; }
.hmi-step .w { padding: 2px 9px; border-radius: 999px; background: #fff3dc; color: #8a5a00; font: 600 .78rem "Barlow", sans-serif; }
.hmi-step .w.ok { background: #e6f6ee; color: #1f7a4a; }
/* reading boxes: green at their setpoint, amber while the step is waiting for it */
.hmi-card.sp, .hmi-card.to-sp { position: relative; border-width: 1px; border-left-width: 4px; padding: 9px 11px 9px 8px; transition: background .4s, border-color .4s; }
.hmi-card.sp { border-left-color: #4cc483; background: #f7fcf9; } /* only the left bar and the tick are coloured, the rest stays like the other cards */
.hmi-card.to-sp { border-left-color: #ebb53a; background: #fffcf4; }
/* a shape as well as a colour: a tick once reached, a pulsing dot while waiting */
.hmi-card.sp::after, .hmi-card.to-sp::after { content: ""; position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 50%; }
.hmi-card.sp::after { content: "\2713"; background: #3aae6f; color: #fff; font: 700 11px/16px "Barlow", sans-serif; text-align: center; }
.hmi-card.to-sp::after { width: 10px; height: 10px; top: 11px; right: 11px; background: #e5a62a; box-shadow: 0 0 0 0 rgba(229,166,42,.5); animation: sp-wait 1.4s ease-out infinite; }
@keyframes sp-wait { to { box-shadow: 0 0 0 7px rgba(229,166,42,0); } }
@media (prefers-reduced-motion: reduce) { .hmi-card.to-sp::after { animation: none; } }
@media (max-width: 640px) {
  .hmi-step { padding: 8px 10px; }
  .hmi-step p em { margin-left: 0; flex-basis: 100%; }
}
.hmi-card .sp { display: block; margin-top: 1px; color: #5a6a7e; font: 600 .66rem "Barlow", sans-serif; letter-spacing: .06em; }
/* Two HMI screens with tabs: CIP prep and Conveyor C-201 */
.hmi-tabs { display: flex; gap: 4px; padding: 8px 14px 0; background: #fff; border-bottom: 1px solid #d5dde7; }
.hmi-tabs button { position: relative; min-height: 38px; padding: 0 16px; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; background: none;
  color: #475769; font: 700 .76rem "Barlow", sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; margin-bottom: -1px; }
.hmi-tabs button:hover { color: #142133; background: #f4f6f9; }
.hmi-tabs button[aria-selected="true"] { color: #142133; background: #f4f6f9; border-color: #d5dde7; box-shadow: inset 0 3px 0 #1f6fe0; }
.hmi-tabs button:focus-visible { outline: 3px solid rgba(31,111,224,.45); outline-offset: -3px; }
.hmi-tabs button.alarm { color: #b91c1c; }
.hmi-tabs button.go { background: #dc2626; border-color: #b91c1c; color: #fff; animation: tab-alarm 1.2s ease-in-out infinite; } /* jam on the CIP screen: the tab itself is the way to the conveyor */
.hmi-tabs button.go:hover { background: #b91c1c; color: #fff; }
.hmi-tabs button.go::after { background: #fff; }
@keyframes tab-alarm { 50% { background: #f04444; } }
@media (prefers-reduced-motion: reduce) { .hmi-tabs button.go { animation: none; } }
.hmi-tabs button.alarm::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: #dc2626; vertical-align: 1px; animation: hmi-blink 1s steps(1, end) infinite; }
.hmi-pane[hidden] { display: none !important; }
.hmi-goto { flex: none; min-height: 36px; padding: 0 16px; border: 1px solid #dc2626; border-radius: 4px; background: #fff; color: #b91c1c;
  font: 700 .78rem "Barlow", sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.hmi-goto:hover { background: #fee2e2; }
.hmi-goto[hidden], .hmi-reset[hidden] { display: none; }
#pane-conv { padding: 14px; }
.hmi-conv-reads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.hmi-pe-state { font-size: 1.1rem !important; }
.hmi-pe-state.pass { color: #a16207 !important; }
.hmi-pe-state.jam { color: #b91c1c !important; }
/* Phones: the process picture keeps a readable size and swipes sideways inside its frame */
@media (max-width: 640px) {
  .hmi-tabs { padding: 6px 8px 0; }
  .hmi-tabs button { flex: 1; padding: 0 8px; font-size: .68rem; letter-spacing: .06em; }
  .hmi-mimic { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hmi-mimic .hmi-pic { min-width: 0; max-width: none; } /* its width is set by the zoom slider */
  #pane-conv { padding: 10px; }
  .hmi-conv-reads { grid-template-columns: 1fr 1fr; }
  .hmi-conv-reads .hmi-card:first-child { grid-column: 1 / -1; } /* cases palletized across, then the three motors and PE-201A two by two */
  .hmi-conv-pic .pe text { font-size: 10px; }
  .hmi-conv-pic .mtr .mtr-lbl { font-size: 12px; } /* the drawing shrinks to the phone, so its names start bigger */
}

/* the pump's outlet nozzle and the steam valve's actuator take the same colour as the pump and the valve */
.hmi-pic .pump-nozzle { fill: #e6eaef; stroke: #3f4b5b; stroke-width: 1.5; transition: fill .3s; }
.hmi-pic .pump.on + .pump-nozzle { fill: #3ddc84; stroke: #1d6b3f; }
.hmi-pic .fcv-act { fill: #e6eaef; stroke: #6b7889; transition: fill .3s; }
.hmi-pic .valve.open ~ .fcv-act { fill: #3ddc84; stroke: #1d6b3f; }
/* Phones: a small hint that the process picture swipes sideways (it stays at the left edge while the picture moves) */
.hmi-swipe { display: none; }
@media (max-width: 640px) {
  .hmi-swipe { display: block; position: sticky; left: 0; width: min(100%, calc(100vw - 72px)); margin: 0; padding: 6px 0 8px; text-align: center;
    color: #1f6fe0; font: 700 .72rem "Barlow", sans-serif; letter-spacing: .06em; transition: opacity .4s; }
  .hmi-swipe.done { opacity: 0; }
}

/* Phones: a zoom slider under the process picture (smallest = the whole screen, largest = big and readable, swipe sideways) */
.hmi-zoom { display: none; }
@media (max-width: 640px) {
  .hmi-zoom { display: flex; align-items: center; gap: 10px; margin: -6px 4px 0; color: #475769; font: 700 1rem "Barlow", sans-serif; }
  .hmi-zoom input { flex: 1; min-height: 32px; accent-color: #1f6fe0; }
  #process { overflow-anchor: none; } /* the page doesn't jump while the picture changes size */
  #pane-cip .hmi-mimic { touch-action: pan-x pan-y; } /* two-finger pinch zooms the picture instead of the page */
}
/* Phones: the picture frame keeps one height whatever the zoom, so the section never changes size;
   zoomed out, the picture sits in the middle of the frame; zoomed in, move around it with a finger */
@media (max-width: 640px) {
  #pane-cip .hmi-mimic { display: flex; flex-direction: column; height: var(--frame-h, 336px); overflow-x: auto; overflow-y: hidden; } /* sideways only: up/down swipes scroll the page */
  #pane-cip .hmi-mimic .hmi-pic { flex: none; align-self: flex-start; margin: auto 0; }
  #pane-cip .hmi-swipe { flex: none; }
}
/* During a jam the conveyor picture takes the touch (no page scrolling), and the jammed case is easy to hit */
.hmi-conv-pic.jammed { touch-action: none; }
.hmi-conv-pic, .hmi-conv-pic * { -webkit-tap-highlight-color: transparent; } /* no blue square when a finger taps the picture */
.belt-box.broken { stroke-width: 3; paint-order: stroke; }
/* the packer and the palletizer are buttons (press to stop or restart them); red while stopped by the operator */
.hmi-conv-pic text { pointer-events: none; }
/* phones: the spiral lifting the cases from C-201 up to C-202 (the back of each turn behind the cases, the front over them) */
.hmi-conv-pic .spiral { pointer-events: none; }
.hmi-conv-pic .spiral.back { fill: #8f9aa8; stroke: #6b7685; stroke-width: 1; }
.hmi-conv-pic .spiral.front { fill: #c9d1db; stroke: #6b7685; stroke-width: 1; }
.hmi-conv-pic .spiral .edge { fill: #9aa6b4; } /* the outer side of the belt on the front of each turn */
/* conveyor motors M-201 and M-202: green while running, light grey when stopped, black outline like the pump on the CIP screen */
.hmi-conv-pic .mtr circle { fill: #e6eaef; stroke: #111; stroke-width: 1.2; transition: fill .3s; }
.hmi-conv-pic .mtr.on circle { fill: #3ddc84; }
.hmi-conv-pic .mtr text { fill: #111; font: 700 8px "Barlow", sans-serif; }
.hmi-conv-pic .mtr .mtr-lbl { fill: #263241; font: 600 9px "Barlow", sans-serif; }
.hmi-conv-pic .mach { cursor: pointer; transition: fill .2s, stroke .2s; }
.hmi-conv-pic .mach:hover { fill: #d3e3fa; }
.hmi-conv-pic .mach.stopped { fill: #fde2e2; stroke: #dc2626; }
.hmi-conv-pic .mach:focus-visible { outline: none; stroke: #1f6fe0; stroke-width: 3; }
/* Black outlines on the main shapes of the operator screen, so they stand out clearly (also when a phone repaints the colours) */
#hmi-l1 { stroke: #1a4fa0; stroke-width: 1.5; } /* edge in a darker shade of the liquid (dark blue for water) */
.hmi-pic.caustic #hmi-l1 { stroke: #4b2fa0; } /* dark purple for the caustic solution */
.hmi-pic .valve, .hmi-pic .valve.open { stroke: #111; }
.hmi-pic .pump, .hmi-pic .pump.on, .hmi-pic .pump-nozzle, .hmi-pic .pump.on + .pump-nozzle { stroke: #111; }
.hmi-pic .fcv-act, .hmi-pic .valve.open ~ .fcv-act { stroke: #111; }
#hmi-t1 { fill: #111; stroke: none; } /* tank level: plain black numbers */
.hmi-conv-pic g[font-weight="600"] text:not([font-weight="400"]) { fill: #111; } /* PACKER, PALLETIZER in black */
/* the liquid moving in the pipes gets a thin black edge */
.hmi-pic .flow.on { filter: drop-shadow(0 0 .6px #111) drop-shadow(0 0 .6px #111); }

/* Valves: two triangles, filled green (open) or grey (closed), with a clean black outline */
.hmi-pic .valve, .hmi-pic .valve.open { stroke: #000; stroke-width: 1.1; stroke-linejoin: miter; }
/* Samsung Internet in dark mode only (class added by automation-v2.js): white instead of black, so its repainting shows them dark */
.samsung-dark .hmi-pic .valve, .samsung-dark .hmi-pic .valve.open,
.samsung-dark .hmi-pic .pump, .samsung-dark .hmi-pic .pump.on, .samsung-dark .hmi-pic .pump-nozzle, .samsung-dark .hmi-pic .pump.on + .pump-nozzle,
.samsung-dark .hmi-pic .fcv-act, .samsung-dark .hmi-pic .valve.open ~ .fcv-act { stroke: #fff; }
.samsung-dark #hmi-t1, .samsung-dark .hmi-pic text[fill="#111"], .samsung-dark .hmi-conv-pic g[font-weight="600"] text:not([font-weight="400"]) { fill: #fff; }
.samsung-dark .hmi-pic .flow.on { filter: drop-shadow(0 0 .6px #fff) drop-shadow(0 0 .6px #fff); }
/* thinner black outlines on the pump and the steam valve's actuator, like the valves */
.hmi-pic .pump { stroke-width: 1.3; }
.hmi-pic .pump-nozzle, .hmi-pic .fcv-act { stroke-width: 1.1; }
/* pipes are dark steel grey (in the page), so the light grey closed valves and the green open ones stand out */

/* the section right after the photo slides over it like a sheet: rounded top corners and a shadow */
main > .hero + section { border-radius: 28px 28px 0 0; box-shadow: 0 -24px 60px rgba(0,0,0,.45); border-top: 1px solid rgba(255,255,255,.5); }
/* "What we do" cards are plain information (they don't open anything), so no hover lift, pointer or glowing light;
   one "Request a quote" button sits under the heading instead */
.card, .card:hover { transform: none; cursor: default; }
.card:hover { border-color: #cdd6e1; box-shadow: 0 1px 2px rgba(20,33,51,.06), 0 8px 24px rgba(20,33,51,.08); }
.svc-cta { margin-top: 22px; }
@media (max-width: 899px) { .svc-cta { margin: 4px 0 22px; } }