/* Electrification page (src/pages/services/electrification.html). Builder C. */

/* ---------- hero with a drawing in place of a photo ---------- */
.page-hero.has-art .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero-ill{width:100%;max-width:400px;justify-self:center}
.hero-ill svg{width:100%;height:auto;padding:0}
.hero-ill figcaption{margin-top:var(--sp-3);font-family:var(--f-label);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-3);text-align:center}
.panel-ill .encl{fill:var(--ink)}
.panel-ill text{font-family:var(--f-label);font-weight:700;font-size:14px;letter-spacing:.1em;fill:var(--on-dark);stroke:none}
.panel-ill text.dim{fill:var(--on-dark-3)}
.panel-ill text.or{fill:var(--orange)}
.panel-ill text.big{font-family:var(--f-head);font-weight:600;font-size:24px;letter-spacing:-.01em}

/* ---------- upgrade rows ---------- */
.upg-list{border-top:2px solid var(--text)}
.upg{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr) minmax(0,1fr);gap:var(--sp-5) clamp(24px,3.5vw,56px);padding-block:clamp(32px,4vw,52px);border-bottom:1px solid var(--mist-line);scroll-margin-top:calc(var(--header-h) + var(--sp-4))}
.upg-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4)}
.upg-n{font-family:var(--f-label);font-weight:700;font-size:12.5px;letter-spacing:.2em;color:var(--red)}
.upg-head .ill{height:96px;width:auto;padding:0}
.upg-head h3{font-size:clamp(22px,2vw,28px);font-weight:700;line-height:1.15;letter-spacing:-.02em;max-width:14ch}
.upg h4{font-family:var(--f-label);font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);margin-bottom:var(--sp-2)}
.upg-text p{font-size:16px;line-height:1.65;color:var(--text-2)}
.upg-text p + h4{margin-top:var(--sp-5)}
.upg-job h4{margin-bottom:var(--sp-3)}
.upg-job .text-link{margin-top:var(--sp-3)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .upg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .upg-head{grid-column:1 / -1;flex-direction:row;align-items:center;gap:var(--sp-5)}
  .upg-head .ill{height:72px}
  .upg-head h3{max-width:none}
}
@media (max-width:900px){
  .page-hero.has-art .wrap{grid-template-columns:minmax(0,1fr)}
  .hero-ill{justify-self:start;max-width:360px}
  .hero-ill figcaption{text-align:left}
}
@media (max-width:640px){
  .hero-ill{max-width:100%}
  .upg{grid-template-columns:minmax(0,1fr)}
  .upg-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-2) var(--sp-4);align-items:center}
  .upg-n{grid-column:1 / -1}
  .upg-head .ill{height:56px}
  .upg-head h3{font-size:22px}
}