/* Services page — electrical design 0.4–35 kV + ESCO. Builds on site.css (hero, dcard, step-no, matrix, cta-band). */

/* ---------- hero: dimmed photo, dot grid, animated single-line diagram ---------- */
.sv-hero{min-height:min(800px,100svh);justify-content:center}
.sv-hero .hero__media{top:-15%;bottom:-15%;will-change:transform}
.sv-hero .hero__media img{opacity:.18;filter:grayscale(35%);object-position:center 40%}
.sv-hero .hero__body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:center;padding-top:calc(var(--header-h) + clamp(32px,4vw,40px));padding-bottom:clamp(48px,5vw,64px)}
.sv-hero__title{font-size:clamp(42px,5.6vw,80px)}
:lang(mn) .sv-hero__title{font-size:clamp(36px,4.8vw,68px)}
.sv-hero .hero__content .lead{max-width:600px}

.sv-hero__diagram{width:100%;max-width:560px;justify-self:center}
.sv-sld{width:100%;height:auto;overflow:visible}
.sv-sld__lines{stroke:rgba(247,247,242,.85);stroke-width:2}
.sv-sld__bus{stroke:var(--spark);stroke-width:5}
.sv-sld__current{stroke:var(--spark);stroke-width:2.5}
.sv-sld__lamps{fill:var(--spark)}
.sv-sld__labels{fill:var(--on-dark-3);font-family:var(--f-mono);font-size:11px;letter-spacing:1.2px}
.sv-draw{stroke-dasharray:900;stroke-dashoffset:900;animation:svDraw 2.2s cubic-bezier(.6,0,.2,1) forwards}
.sv-fade{opacity:0;animation:svFade .8s ease forwards}
.sv-flow{stroke-dasharray:6 18;opacity:0;animation:svFade .6s ease 2.4s forwards,svFlow 1.1s linear 2.4s infinite}
.sv-pulse{animation:svPulse 2.4s ease-in-out infinite}
@keyframes svDraw{to{stroke-dashoffset:0}}
@keyframes svFade{to{opacity:1}}
@keyframes svFlow{to{stroke-dashoffset:-48}}
@keyframes svPulse{0%,100%{opacity:.35}50%{opacity:1}}

@media (max-width:1024px){
  .sv-hero{min-height:0}
  .sv-hero .hero__body{grid-template-columns:minmax(0,1fr);gap:clamp(32px,6vw,56px)}
  .sv-hero__diagram{width:100%;max-width:480px}
}
@media (max-width:560px){
  .sv-hero .btn-row .btn{flex:1 1 auto}
  .sv-hero__diagram{max-width:none;margin-inline:-6px}
  .sv-sld__labels{font-size:16px;letter-spacing:.5px}
}

/* ---------- process: five steps + CTA tile on a dark band with column guides ---------- */
.sv-process{position:relative;overflow:hidden;border-top:1px solid rgba(247,247,242,.1)}
.sv-process .wrap{position:relative}
.sv-guides{position:absolute;inset:0;max-width:var(--maxw);margin-inline:auto;padding-inline:calc(var(--gutter) - 4px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));pointer-events:none}
.sv-guides i{border-left:1px solid rgba(247,247,242,.06)}
.sv-guides i:nth-child(3){border-right:1px solid rgba(247,247,242,.06)}
.sv-process__head{display:flex;flex-direction:column;align-items:flex-start;gap:36px;margin-bottom:56px}
.h2.sv-bighead{font-size:clamp(38px,5.3vw,76px);line-height:1;letter-spacing:-.028em;max-width:1100px}
:lang(mn) .h2.sv-bighead{font-size:clamp(32px,4.5vw,64px);line-height:1.04}
.sv-bighead>span{display:block}
.bg-core .sv-bighead .dim{color:#6E6F6A} /* board uses a deeper grey; this one keeps 3:1 for large text */
.sv-tag{background:var(--spark);color:var(--core);padding:5px 10px;font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1.4}

.sv-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sv-steps__list{display:contents}
.sv-step{min-height:clamp(300px,33.4vw,480px);padding:36px clamp(24px,2.5vw,36px) 32px;gap:28px}
.sv-step__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.sv-step .step-no{line-height:1.1;color:var(--on-dark)}
.sv-step__ic{flex-shrink:0;transition:transform .3s}
.sv-step:hover .sv-step__ic{transform:translate(3px,3px)}
.sv-step .dcard__title{font-size:clamp(24px,2.5vw,36px);line-height:1.12;max-width:320px}
.sv-step__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.sv-step .dcard__text{max-width:300px}
.sv-step .dcard__mark{flex-shrink:0}

.sv-stepcta{display:flex;flex-direction:column;padding:36px clamp(24px,2.5vw,36px) 32px;border:1px solid rgba(255,204,0,.5);color:var(--on-dark);transition:background .3s,color .3s,border-color .3s}
.sv-stepcta:hover{background:var(--spark);border-color:var(--spark);color:var(--core)}
.sv-stepcta:focus-visible{outline-offset:-6px}
.sv-stepcta:hover:focus-visible{outline-color:var(--core)}
.sv-stepcta__arrow{font-family:var(--f-head);font-size:26px;font-weight:300;line-height:1.1}
.sv-stepcta__title{margin-top:auto;font-family:var(--f-head);font-size:clamp(24px,2.5vw,36px);font-weight:400;line-height:1.12;letter-spacing:-.015em;max-width:320px}
.sv-stepcta__more{margin-top:28px;display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase}

@media (max-width:1024px){
  .sv-steps,.sv-guides{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-guides i:nth-child(3){display:none}
  .sv-guides i:nth-child(2){border-right:1px solid rgba(247,247,242,.06)}
  .sv-step{min-height:clamp(280px,40vw,360px)}
}
@media (max-width:640px){
  .sv-process__head{gap:24px;margin-bottom:36px}
  .sv-steps,.sv-guides{grid-template-columns:minmax(0,1fr)}
  .sv-guides i:nth-child(2){display:none}
  .sv-guides i:nth-child(1){border-right:1px solid rgba(247,247,242,.06)}
  /* phone: compact numbered rows instead of tall tiles */
  .sv-step{min-height:0;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:10px;padding:24px 20px 26px}
  .sv-step__top{grid-row:1/span 2}
  .sv-step__ic,.sv-step .dcard__mark{display:none}
  .sv-step .step-no{font-size:22px}
  .sv-step .dcard__title{margin-top:0;font-size:24px}
  .sv-step .dcard__text{max-width:none}
  .sv-stepcta{padding:26px 20px 28px;margin-top:8px}
  .sv-stepcta__title{margin-top:28px;font-size:26px}
  .sv-stepcta__more{margin-top:18px}
}

/* ---------- scope of work: heading + drawing-board icon left, key/value matrix right ---------- */
.sv-scope{display:grid;grid-template-columns:360px minmax(0,1fr);grid-template-areas:"head ." "media matrix";column-gap:64px;align-items:start}
.sv-scope__head{grid-area:head;display:flex;flex-direction:column;gap:16px;margin-bottom:40px}
.sv-h2{font-size:clamp(32px,3.4vw,48px);line-height:1.08;letter-spacing:-.022em;font-weight:300}
.sv-scope__media{grid-area:media;display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:#121314;border-top:4px solid var(--spark);overflow:hidden}
.sv-scope__media img{width:100%;height:auto;transition:transform .6s var(--ease),filter .4s}
.sv-scope__media:hover img{transform:scale(1.05);filter:drop-shadow(0 0 18px rgba(255,204,0,.28))}
.sv-scope .matrix{grid-area:matrix;margin:0}
.sv-scope .matrix__row{grid-template-columns:minmax(150px,280px) minmax(0,1fr);gap:24px 40px}
.sv-scope .matrix__key{font-size:13px}
.sv-scope .matrix__val{margin:0;font-size:18px;font-weight:500}

@media (max-width:1024px){
  .sv-scope{grid-template-columns:minmax(0,1fr) clamp(160px,26vw,240px);grid-template-rows:auto auto;grid-template-areas:"head media" "matrix matrix";column-gap:32px;row-gap:48px}
  .sv-scope__head{align-self:end;margin-bottom:0}
  .sv-scope .matrix__row{grid-template-columns:minmax(150px,.36fr) minmax(0,1fr);gap:24px}
}
@media (max-width:640px){
  .sv-scope{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "media" "matrix";row-gap:28px}
  .sv-scope__media{aspect-ratio:16/10}
  .sv-scope__media img{width:min(260px,64%)}
  .sv-scope .matrix__row{grid-template-columns:minmax(0,1fr);gap:8px}
  .sv-scope .matrix__val{font-size:17px}
}

/* ---------- ESCO: dark band, intro + licence chip, three-step sequence ---------- */
.sv-esco{position:relative;overflow:hidden;isolation:isolate;margin-top:var(--sec);padding:clamp(64px,6.7vw,96px) 0}
.sv-esco__knot{position:absolute;right:-120px;top:-80px;width:min(560px,90vw);opacity:.08;z-index:-1;pointer-events:none}
.sv-esco__head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:end}
.sv-esco__intro{display:flex;flex-direction:column;gap:16px}
.sv-esco__body{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.sv-esco__body>p:first-child{font-size:18px;line-height:1.65;color:var(--on-dark-2)}
.sv-esco__chip{max-width:100%;border:1px solid var(--spark);color:var(--spark);padding:10px 14px;font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;line-height:1.5}
.sv-esco__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:56px}
.sv-esco__step{border-top:1px solid rgba(247,247,242,.2);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.sv-esco__no{font-family:var(--f-mono);font-size:13px;color:var(--spark)}
.sv-esco__title{font-family:var(--f-head);font-size:24px;font-weight:500;line-height:1.2;letter-spacing:-.01em}
.sv-esco__text{font-size:15px;line-height:1.6;color:var(--on-dark-2)}
@media (max-width:900px){
  .sv-esco__head{grid-template-columns:minmax(0,1fr);gap:28px}
  .sv-esco__steps{gap:28px;margin-top:48px}
}
@media (max-width:640px){
  .sv-esco__steps{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:40px}
  .sv-esco__body>p:first-child{font-size:17px}
}

/* ---------- brief CTA (yellow) ---------- */
.sv-brief{padding:clamp(32px,5vw,64px) clamp(24px,5vw,72px);gap:32px 48px}
.sv-brief .cta-band__text{flex:1 1 420px;max-width:660px;gap:12px}
.sv-brief .cta-band__title{font-size:clamp(30px,3.1vw,44px);line-height:1.05}
.sv-brief .cta-band__text p{font-size:17px}
.sv-brief__mail{font-weight:400!important;font-size:15px!important}
.sv-brief__mail a{font-weight:600;border-bottom:2px solid currentColor;padding-bottom:1px;overflow-wrap:anywhere}
.sv-brief__mail a:hover{border-bottom-color:transparent}
.sv-brief .cta-band__actions{flex-direction:row;flex-wrap:wrap;gap:12px}
@media (max-width:560px){.sv-brief .cta-band__actions{flex-direction:column}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .sv-draw{animation:none;stroke-dashoffset:0}
  .sv-fade,.sv-flow{animation:none;opacity:1}
  .sv-pulse{animation:none}
  .sv-hero .hero__media{transform:none!important}
}

/* ---------- QA 2026-10-15 ---------- */
/* no orphaned last words in headings ("Licensed energy service / company.") */
.page-services main :is(h1,h2,h3){text-wrap:balance}