/* ==================================================================
   AMPROTEQ · systems.css — the Systems section (Oct 2026):
   /systems overview, /systems/bess, /systems/pcs, /systems/mv-skid.
   Hairline lattices, mono labels, Jost figures; no pills, no glows.
================================================================== */

/* ---------- shared: header chain (how the energy leaves the box) ---------- */
.chain{display:flex; align-items:center; flex-wrap:wrap; gap:0; margin-top:22px; font-family:var(--fm); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink2)}
.chain span{padding:9px 13px 8px; border:1px solid var(--line2); border-radius:4px; background:rgba(255,255,255,.012); white-space:nowrap}
.chain span.k{color:var(--cyan); border-color:rgba(60,204,252,.38)}
.chain i{position:relative; width:34px; height:1px; background:var(--line3); flex:none}
.chain i::after{content:''; position:absolute; right:0; top:-3px; width:6px; height:6px; border-top:1px solid var(--line3); border-right:1px solid var(--line3); transform:rotate(45deg)}
@media(max-width:600px){.chain{font-size:9.5px}.chain i{width:18px}.chain span{padding:8px 9px 7px}}

/* ---------- shared: in-page jump bar under a hero ---------- */
.jump{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-top:clamp(34px,4vw,54px)}
.jump a{background:rgba(8,12,20,.82); backdrop-filter:blur(10px); padding:16px 18px 15px; display:flex; flex-direction:column; gap:5px; transition:background .4s}
.jump a:hover{background:var(--bg3)}
.jump a em{font-style:normal; font-family:var(--fm); font-size:9.5px; letter-spacing:.2em; color:var(--cyan)}
.jump a b{font-family:var(--fd); font-weight:500; font-size:16px; color:var(--ink); letter-spacing:-.005em}
.jump a span{font-family:var(--fm); font-size:10px; letter-spacing:.08em; color:var(--mut)}
@media(max-width:900px){.jump{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- /systems/bess · the product grid ---------- */
.fam{scroll-margin-top:calc(var(--navh) + 20px)}
.fam-h{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(26px,5vw,90px); align-items:end}
.fam-h .h2{max-width:17ch}
.fam-h .body{max-width:52ch}
.fam-n{display:flex; align-items:baseline; gap:14px; font-family:var(--fm); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--mut)}
.fam-n b{font-weight:500; color:var(--cyan)}
.fam-n s{text-decoration:none; color:var(--dim)}
@media(max-width:900px){.fam-h{grid-template-columns:1fr; align-items:start}}

.pgrid{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:clamp(30px,3.6vw,50px)}
.pgrid.g-ac{grid-template-columns:repeat(2,minmax(0,1fr))}
.pgrid.g-dc{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1180px){.pgrid.g-dc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.pgrid.g-ac,.pgrid.g-dc{grid-template-columns:1fr}}

.pc{background:var(--bg2); display:flex; flex-direction:column; min-width:0; transition:background .5s var(--e)}
.pc:hover{background:#0A101A}
.pc-ph{position:relative; aspect-ratio:16/10; overflow:hidden; background:#070b12; border-bottom:1px solid var(--line)}
.g-dc .pc-ph{aspect-ratio:4/3}
.pc-ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--e)}
.pc:hover .pc-ph img{transform:scale(1.035)}
.pc-ph::before{content:''; position:absolute; inset:auto 0 0 0; height:38%; z-index:1; pointer-events:none; background:linear-gradient(to top,rgba(8,12,20,.7),rgba(8,12,20,0))}
.pc-b{padding:clamp(22px,2.4vw,34px); display:flex; flex-direction:column; gap:18px; flex:1}
.g-dc .pc-b{padding:clamp(20px,1.8vw,26px); gap:16px}
.pc-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-family:var(--fm); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}
.pc-top b{font-weight:500; color:var(--ink); letter-spacing:.14em}
.pc-cap{font-family:var(--fd); font-weight:400; font-size:clamp(46px,4.8vw,76px); letter-spacing:-.04em; line-height:.92; color:var(--ink); font-variant-numeric:tabular-nums}
.g-dc .pc-cap{font-size:clamp(40px,3.5vw,56px)}
.pc-cap u{text-decoration:none; font-family:var(--fm); font-size:.24em; letter-spacing:.12em; color:var(--cyan); margin-left:8px; vertical-align:.32em}
.pc-d{font-size:14.5px; color:var(--mut); line-height:1.7; max-width:56ch}
.g-dc .pc-d{font-size:13.8px}
.pc-sp{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin:0}
.g-dc .pc-sp{grid-template-columns:repeat(2,minmax(0,1fr))}
.pc-sp>div{background:var(--bg2); padding:13px 14px 12px; min-width:0; transition:background .5s var(--e)}
.pc:hover .pc-sp>div{background:#0A101A}
.pc-sp dt{font-family:var(--fm); font-size:8.8px; letter-spacing:.17em; text-transform:uppercase; color:var(--dim)}
.pc-sp dd{margin:6px 0 0; font-family:var(--fd); font-size:16.5px; font-weight:500; color:var(--ink); letter-spacing:-.015em; font-variant-numeric:tabular-nums; line-height:1.25}
.pc-sp dd small{font-family:var(--fm); font-size:.62em; letter-spacing:.06em; color:var(--cyan); margin-left:3px; font-weight:400}
.pc-sp dd a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--line3); text-underline-offset:3px}
.pc-sp dd a:hover{color:var(--cyan)}
.g-dc .pc-sp dd{font-size:15px}
@media(max-width:520px){.pc-sp,.g-dc .pc-sp{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pc-cta{margin-top:auto; padding-top:4px; display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center}
.pc .dtabs{margin-top:0}
.pc .dt-pane{margin-top:16px; gap:18px}
.pc .dt-pane .pc-cta{padding-top:0}

.fam-note{display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px 18px; margin-top:22px; font-size:13.6px; color:var(--mut); line-height:1.7}
.fam-note b{font-family:var(--fm); font-weight:500; font-size:10px; letter-spacing:.2em; color:var(--cyan); text-transform:uppercase; padding-top:3px}
.fam-note a{color:var(--ink2); text-decoration:underline; text-decoration-color:var(--line3); text-underline-offset:3px}
.fam-note a:hover{color:var(--cyan)}

/* ---------- cross-links at the foot of a systems page ---------- */
.xlink{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.xlink a{background:var(--bg2); padding:clamp(24px,2.6vw,38px); display:flex; flex-direction:column; gap:10px; transition:background .45s}
.xlink a:hover{background:var(--bg3)}
.xlink em{font-style:normal; font-family:var(--fm); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan)}
.xlink b{font-family:var(--fd); font-weight:500; font-size:clamp(22px,2vw,30px); letter-spacing:-.02em; color:var(--ink)}
.xlink span{font-size:14px; color:var(--mut); line-height:1.65; max-width:52ch}
.xlink i{font-style:normal; margin-top:6px; font-family:var(--fm); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink2); transition:color .3s, transform .45s var(--e)}
.xlink a:hover i{color:var(--cyan); transform:translateX(4px)}
@media(max-width:760px){.xlink{grid-template-columns:1fr}}

/* ---------- /systems · the two-item overview ---------- */
.sys-hero{padding:calc(var(--navh) + clamp(60px,8vw,110px)) 0 clamp(30px,3.4vw,46px)}
.sys-hero .h1{font-size:clamp(40px,5.6vw,84px); max-width:15ch}
.sys-hero .hero-sub{max-width:58ch}
.sys2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.sys2>article{background:var(--bg2); display:flex; flex-direction:column; min-width:0}
.sys2-ph{position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:#070b12}
.sys2-ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--e)}
.sys2>article:hover .sys2-ph img{transform:scale(1.03)}
.sys2-ph.vis::after{bottom:auto; top:12px; right:12px}
.sys2-ph::before{content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top,var(--bg2) 0%,rgba(8,12,20,.35) 34%,rgba(8,12,20,0) 62%)}
.sys2-b{padding:0 clamp(24px,3vw,46px) clamp(26px,3vw,44px); margin-top:-56px; position:relative; z-index:2; display:flex; flex-direction:column; flex:1}
.sys2-k{display:flex; gap:14px; align-items:baseline; font-family:var(--fm); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--mut)}
.sys2-k b{color:var(--cyan); font-weight:500}
.sys2-b h2{margin-top:14px; font-size:clamp(30px,3.4vw,52px); font-weight:500; letter-spacing:-.03em; line-height:1.02}
.sys2-b h2 a{color:var(--ink); transition:color .3s}
.sys2-b h2 a:hover{color:var(--cyan-lt)}
.sys2-b>p{margin-top:16px; font-size:15px; color:var(--mut); line-height:1.72; max-width:52ch}
.sys2-l{margin-top:clamp(24px,2.6vw,34px); border-top:1px solid var(--line)}
.sys2-l a{display:grid; grid-template-columns:minmax(0,1fr) auto 22px; gap:16px; align-items:center; padding:20px 0 19px; border-bottom:1px solid var(--line); transition:padding .45s var(--e)}
.sys2-l a:hover{padding-left:8px}
.sys2-l a b{display:block; font-family:var(--fd); font-weight:500; font-size:clamp(18px,1.5vw,22px); color:var(--ink); letter-spacing:-.012em}
.sys2-l a span{display:block; margin-top:3px; font-size:13.4px; color:var(--mut); line-height:1.55}
.sys2-l a em{font-style:normal; font-family:var(--fm); font-size:11px; letter-spacing:.08em; color:var(--ink2); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.sys2-l a svg{width:18px; height:18px; color:var(--mut); transition:color .3s, transform .45s var(--e)}
.sys2-l a:hover svg{color:var(--cyan); transform:translateX(4px)}
.sys2-f{margin-top:auto; padding-top:24px; display:flex; flex-wrap:wrap; gap:10px 26px}
@media(max-width:900px){.sys2{grid-template-columns:1fr}.sys2-l a em{display:none}.sys2-l a{grid-template-columns:minmax(0,1fr) 22px}}
.sys-foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px 30px; align-items:center; margin-top:22px; padding:18px 0 0; font-size:13.6px; color:var(--mut)}
.sys-foot .btn-row{gap:10px 26px}

/* ---------- /systems/pcs ---------- */
.pcs-kpi{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-top:clamp(34px,4vw,54px)}
.pcs-kpi>div{background:var(--bg2); padding:18px 18px 16px}
.pcs-kpi b{display:block; font-family:var(--fd); font-weight:500; font-size:clamp(22px,2vw,30px); letter-spacing:-.025em; color:var(--ink); font-variant-numeric:tabular-nums}
.pcs-kpi b u{text-decoration:none; font-family:var(--fm); font-size:.42em; color:var(--cyan); margin-left:4px; letter-spacing:.06em}
.pcs-kpi span{display:block; margin-top:6px; font-family:var(--fm); font-size:9px; letter-spacing:.17em; text-transform:uppercase; color:var(--dim)}
@media(max-width:1000px){.pcs-kpi{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.pcs-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}

.arch{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.arch>figure{margin:0; background:var(--bg2); padding:clamp(22px,2.6vw,36px); display:flex; flex-direction:column; gap:18px}
.arch figcaption{display:flex; flex-direction:column; gap:8px}
.arch figcaption em{font-style:normal; font-family:var(--fm); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan)}
.arch figcaption b{font-family:var(--fd); font-weight:500; font-size:clamp(21px,1.8vw,27px); letter-spacing:-.018em; color:var(--ink)}
.arch figcaption span{font-size:14px; color:var(--mut); line-height:1.68; max-width:54ch}
.arch svg{width:100%; height:auto; display:block}
.arch svg .bx{fill:rgba(255,255,255,.015); stroke:var(--line3); stroke-width:1}
.arch svg .bx.k{stroke:rgba(60,204,252,.6); fill:rgba(60,204,252,.04)}
.arch svg .ln{stroke:var(--line3); stroke-width:1; fill:none}
.arch svg .fl{stroke:var(--cyan); stroke-width:1.4; fill:none; stroke-dasharray:3 9; animation:archFlow 1.6s linear infinite}
.arch svg .cl{stroke:rgba(150,190,255,.22); stroke-width:1}
.arch svg text{font-family:var(--fm); font-size:10px; letter-spacing:.04em; fill:var(--mut)}
.arch svg text.t{fill:var(--ink); font-size:11px}
.arch svg text.v{fill:var(--cyan)}
@keyframes archFlow{to{stroke-dashoffset:-24}}
@media (prefers-reduced-motion: reduce){.arch svg .fl{animation:none}}
@media(max-width:900px){.arch{grid-template-columns:1fr}}

.mods{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.mod{background:var(--bg2); padding:clamp(24px,2.8vw,40px); display:flex; flex-direction:column; gap:18px; scroll-margin-top:calc(var(--navh) + 20px)}
.mod-top{display:flex; justify-content:space-between; gap:14px; font-family:var(--fm); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}
.mod-top b{color:var(--cyan); font-weight:500}
.mod-cap{font-family:var(--fd); font-weight:400; font-size:clamp(50px,5vw,80px); letter-spacing:-.04em; line-height:.92; color:var(--ink); font-variant-numeric:tabular-nums}
.mod-cap u{text-decoration:none; font-family:var(--fm); font-size:.24em; letter-spacing:.12em; color:var(--cyan); margin-left:8px; vertical-align:.32em}
.mod>p{font-size:14.5px; color:var(--mut); line-height:1.7; max-width:56ch}
.mod dl{margin:0; border-top:1px solid var(--line)}
.mod dl>div{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:18px; padding:12px 0 11px; border-bottom:1px solid var(--line)}
.mod dt{font-size:13.4px; color:var(--mut)}
.mod dd{margin:0; font-family:var(--fm); font-size:12.4px; color:var(--ink); letter-spacing:.02em; font-variant-numeric:tabular-nums}
.mod dd small{display:block; margin-top:3px; color:var(--dim); font-size:10.5px}
@media(max-width:900px){.mods{grid-template-columns:1fr}}

.pair-tbl td:first-child a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--line3); text-underline-offset:3px}
.pair-tbl td:first-child a:hover{color:var(--cyan)}
.pair-tbl tr.grp td{font-family:var(--fm); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); background:rgba(60,204,252,.03)}

/* ---------- /systems/mv-skid: the APEX section is the page ---------- */
.apx.apx-page{padding-top:var(--navh)}
.apx-page .apx-top .crumbs{margin-bottom:18px; justify-content:center}

/* ---------- /systems/pcs: VECTOR cabinets with their datasheets (cards reuse .mod) ---------- */
.vec-ph{margin:calc(-1 * clamp(24px,2.8vw,40px)) calc(-1 * clamp(24px,2.8vw,40px)) 0; aspect-ratio:1200/1017; background:#05080d; overflow:hidden}
.vec-ph img{display:block; width:100%; height:100%; object-fit:cover}
.vec-cta{margin-top:auto; padding-top:6px}