/* Page overrides for /plc-scada-hmi/ (property-level diffs vs global.css + page-only rules, original order) */
h1,h2,h3,.display{font-family:'Saira Condensed','Saira',sans-serif;font-weight:600;line-height:1.04;letter-spacing:-.01em}
.nav-link:hover{color:var(--blue)}
.submenu-inner a:hover{background:var(--paper);color:var(--blue)}
.hero .lede{font-size:clamp(.95rem,1.55vw,1.17rem);color:var(--on-dark-body);max-width:46ch;font-weight:400;line-height:1.45}
.intro h2{font-size:clamp(1.9rem,3.5vw,2.9rem);font-weight:600;margin:.45em 0 .55em;color:var(--navy);max-width:16ch}
.intro p{color:var(--ink-muted);font-size:.95rem;margin-bottom:1.1em;max-width:54ch;line-height:1.5}
.family-figure{position:sticky;top:110px;margin-top:46px}
.values{margin-top:30px;border-top:1px solid var(--line)}
.value{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.gptw{display:inline-flex;align-items:center;gap:12px;margin-top:26px;font-family:'Saira',sans-serif;font-size:.86rem;letter-spacing:.04em;color:var(--navy);background:var(--paper);border:1px solid var(--line);padding:10px 16px;border-radius:3px}
.gptw b{color:var(--blue)}
@media(prefers-reduced-motion:reduce){
.btn,.unique,.ind{transition:none}
}
.hero .lede{max-width:50ch}
.hero-uniques .hu{font-size:clamp(1.15rem,2.1vw,1.75rem)}
.crumb{font-family:'Saira',sans-serif;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:6px}
.crumb a{color:var(--on-dark-muted)}
.crumb span{color:var(--blue-soft);margin:0 .5em}
/* Tighten the seam above the brand strip so the gap over the label matches the section's own rhythm */
.intro{padding-bottom:0}
.brands{padding:clamp(30px,3.5vw,42px) 0;background:#fff}
.brands .lbl{font-family:'Saira',sans-serif;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);text-align:center;margin-bottom:clamp(30px,3.5vw,42px)}
.brands .lbl b{color:var(--navy)}
.brand-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(26px,4vw,54px)}
.brand-row img{height:40px;width:auto;object-fit:contain}
.benefits{padding:clamp(72px,9vw,120px) 0;background:var(--paper)}
.ben-grid{display:grid;grid-template-columns:1.05fr .95fr;grid-template-rows:auto 1fr;column-gap:clamp(40px,6vw,72px)}
.ben-head{grid-column:1;grid-row:1;margin-bottom:clamp(26px,3vw,36px)}
.ben-list{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ben-figure{grid-column:2;grid-row:2;align-self:stretch}
.ben{background:#fff;border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:4px;padding:24px 24px 22px}
.ben h3{font-size:1.22rem;color:var(--navy);margin-bottom:.45em}
.ben p{color:var(--ink-muted);font-size:.88rem;line-height:1.5}
.ben-figure img{width:100%;height:100%;border-radius:4px;object-fit:cover;box-shadow:0 30px 60px -34px rgba(12,52,87,.5)}
@media(max-width:900px){
.ben-grid{grid-template-columns:1fr;grid-template-rows:none;gap:38px}
.ben-head,.ben-list,.ben-figure{grid-column:1;grid-row:auto}
}
@media(max-width:520px){
.ben-list{grid-template-columns:1fr}
}
.func{padding:clamp(72px,9vw,118px) 0;background:#fff}
/* SCADA Programming section — Option A: light paper background with white
   accent cards (matches the Benefits section on this page) instead of the bold
   full-navy slab. Scoped to this page via the page CSS bundle. */
.func.alt{background:var(--paper);position:relative;overflow:hidden}
.func.alt .wrap{position:relative;z-index:2}
.func.alt .section-head p{color:var(--ink-muted)}
/* text side of each row becomes a white card with a 3px blue top-accent */
.func.alt .frow > div:not(.frow-media){background:#fff;border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:4px;padding:clamp(24px,3vw,30px) clamp(24px,3vw,32px)}
.func-rows{display:flex;flex-direction:column;gap:clamp(40px,5vw,66px);margin-top:clamp(34px,4vw,52px)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,58px);align-items:center}
.frow:nth-child(even) .frow-media{order:2}
.frow-media{position:relative}
.frow-media img{width:100%;border-radius:4px;object-fit:cover;aspect-ratio:16/10;background:var(--line);box-shadow:0 30px 60px -34px rgba(12,52,87,.5)}
.fnum{font-family:'Saira Condensed',sans-serif;font-weight:700;font-size:1rem;letter-spacing:.14em;color:var(--blue);margin-bottom:10px}
.frow h3{font-size:clamp(1.4rem,2.5vw,1.95rem);color:var(--navy);margin-bottom:.4em}
.frow p{color:var(--ink-muted);font-size:.95rem;line-height:1.6;max-width:52ch}
@media(max-width:820px){
.frow{grid-template-columns:1fr;gap:24px}
.frow:nth-child(even) .frow-media{order:0}
}
.brands .lbl{font-size:1.17rem}
.brand-row-2{display:block;text-align:center;margin-top:clamp(30px,3.5vw,42px)}
.brand-row-2 img{display:inline-block;height:40px;width:auto;object-fit:contain;margin:0 30px;vertical-align:middle}
/* Per-logo optical sizing. The source files differ in internal padding and
   lettering style, so one shared 40px height makes the wordmarks look wildly
   different in size. These heights are tuned so each logo's main wordmark text
   lands at roughly the same cap height as Mitsubishi's (~12-13px). Matched on alt
   *prefix* so visual-editing stega markers appended to alt text don't break it.
   Re-tune if a logo file in Sanity is replaced. */
.brand-row img[alt^="ClearSCADA"]{height:60px}   /* small text beside a large icon */
.brand-row img[alt^="Citect"]{height:68px}       /* small text beside a large icon */
.brand-row-2 img[alt^="AVEVA"]{height:84px}      /* file is ~57% empty vertical margin */
.brand-row-2 img[alt^="Ignition"]{height:58px}   /* thin lowercase wordmark reads small */
/* Wonderware InTouch: tiny text and ~42% empty margin in the file. Negative
   margins cancel that padding so it doesn't inflate the row height. */
.brand-row-2 img[alt^="Wonderware"]{height:112px;margin-top:-24px;margin-bottom:-24px}
@media(max-width:1080px){
.menu-toggle span{transition:transform .2s ease,opacity .2s ease}
}
/* Section rhythm at the bottom of the page: white Functionality -> light paper
   SCADA (see above) -> dark navy CTA band (site default) -> darkest navy footer.
   The SCADA section carries the light treatment now, so the CTA band keeps its
   original dark gradient to stay distinct from both the paper section above and
   the footer below. */