/* ==========================================================================
   S P Alectricals — BOS & EPC services
   Requires css/sp-core.css.

   FOURTH frame on the site. The devices that make it its own thing:

     home      centred headings, card grids, product cutouts
     about     editorial prose, hairline lists, a vertical timeline
     projects  full-cover photo hero, capacity-scaled zig-zag rows, filter
     services  a real SCOPE TABLE, and a sticky panel that holds still while
               the components scroll past it

   A services page is a contract description, so the page is shaped like one:
   the table states, per stage, what we do and what the client receives. No
   other page on the site uses a table or a sticky panel.
   ========================================================================== */

.sv{
  --rule:#E4E7EC;
  background:#fff;
}
.sv h1,.sv h2{font-weight:300;letter-spacing:-.024em;line-height:1.14;color:var(--ink)}
.sv h3{font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.sv h1 em,.sv h2 em{font-weight:500;font-style:normal;color:var(--green-dk)}
.sv-lab{display:block;font-family:var(--b);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-dk);margin-bottom:13px}

/* ============================================================== OPENER */
/* A split opener: the promise on the left, a plant we built on the right.
   Projects owns the full-bleed photo band, so this one is a contained plate. */
.sv-top{background:linear-gradient(180deg,#EFF8F1 0%,#F6FBF7 100%);
  border-bottom:1px solid var(--m-line);
  padding:clamp(26px,3.2vw,44px) 0 clamp(34px,4vw,52px)}
.sv-crumb{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--m-muted);
  margin-bottom:clamp(22px,2.8vw,34px);flex-wrap:wrap}
.sv-crumb a{color:var(--m-muted)}
.sv-crumb a:hover{color:var(--green-dk)}
.sv-crumb span{opacity:.45}
.sv-crumb em{font-style:normal;color:var(--ink);font-weight:600}
.sv-top-grid{display:grid;gap:clamp(26px,3.2vw,52px);align-items:center}
@media(min-width:900px){.sv-top-grid{grid-template-columns:1.05fr .95fr}}
.sv-top h1{font-size:clamp(30px,4.2vw,50px);line-height:1.1;letter-spacing:-.026em;
  margin:0;max-width:16ch;text-wrap:balance}
.sv-top p{margin-top:18px;font-size:clamp(15.5px,1.5vw,17.5px);color:var(--m-muted);
  max-width:50ch;line-height:1.65}
/* 1080x1050 native, rendered around 520px — a downscale at every breakpoint */
.sv-top-fig{margin:0;border-radius:22px;overflow:hidden;
  box-shadow:0 2px 6px rgba(17,24,39,.08), 0 30px 62px -26px rgba(17,24,39,.42)}
.sv-top-fig img{width:100%;height:100%;object-fit:cover;aspect-ratio:5/4;display:block}

/* ========================================================= SCOPE TABLE */
/* The page's signature. A real table, because the content is genuinely
   tabular: four stages, each with work performed and a deliverable. */
.sv-sec{padding:clamp(48px,5.4vw,78px) 0}
.sv-sec--tint{background:var(--m-wash)}
.sv-head{max-width:640px;margin-bottom:clamp(26px,3vw,40px)}
.sv-head h2{font-size:clamp(26px,3.2vw,38px);max-width:18ch}
.sv-head p{margin-top:12px;font-size:15.5px;color:var(--m-muted);line-height:1.62}

.sv-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--rule);border-radius:18px;background:#fff}
.sv-table{width:100%;min-width:680px;border-collapse:collapse;text-align:left}
.sv-table caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.sv-table th{font-family:var(--b);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-dk);background:var(--m-card);
  padding:14px 22px;border-bottom:1px solid var(--m-line);vertical-align:middle}
.sv-table td{padding:22px;border-bottom:1px solid var(--rule);vertical-align:top}
.sv-table tr:last-child td{border-bottom:0}
.sv-table tbody tr:hover{background:var(--m-wash)}
/* stage column: the number carries it, the name sits under */
.sv-stage{width:1%;white-space:nowrap}
.sv-stage b{display:block;font-family:var(--h);font-size:26px;font-weight:300;
  color:var(--green-dk);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.sv-stage span{display:block;margin-top:9px;font-family:var(--h);font-size:15px;
  font-weight:600;color:var(--ink);letter-spacing:-.012em;max-width:15ch;white-space:normal}
.sv-does{font-size:14.5px;color:var(--body,#3F4658);line-height:1.65;max-width:56ch}
.sv-gets{width:26%}
.sv-gets ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sv-gets li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink)}
.sv-gets svg{width:14px;height:14px;color:var(--green-dk);flex:none;margin-top:3px}
.sv-scroll-hint{display:none;margin-top:10px;font-size:12px;color:var(--m-muted)}
@media(max-width:760px){ .sv-scroll-hint{display:block} }

/* ========================================================= STICKY SPLIT */
/* The definition panel holds still while the components move past it. */
.sv-split{display:grid;gap:clamp(26px,3.4vw,54px);align-items:start}
@media(min-width:960px){.sv-split{grid-template-columns:.82fr 1.18fr}}
@media(min-width:960px){ .sv-sticky{position:sticky;top:106px} }
.sv-def{background:linear-gradient(165deg,var(--m-card),var(--m-card-2));
  border:1px solid var(--m-line);border-radius:20px;padding:clamp(22px,2.6vw,30px)}
.sv-def h3{font-size:19px;font-weight:500;letter-spacing:-.018em}
.sv-def p{margin-top:10px;font-size:14.5px;color:var(--m-muted);line-height:1.62}
.sv-def-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.sv-def-list li{display:flex;gap:11px;align-items:flex-start}
.sv-def-list svg{width:15px;height:15px;color:var(--green-dk);flex:none;margin-top:4px}
.sv-def-list b{display:block;font-family:var(--h);font-size:14.5px;font-weight:600;color:var(--ink)}
.sv-def-list span{display:block;margin-top:2px;font-size:12.5px;color:var(--m-muted);line-height:1.5}

/* the four in-house components, as wide rows with the cutout on a mint plate */
.sv-parts{display:grid;gap:12px}
.sv-part{display:grid;grid-template-columns:132px 1fr;gap:20px;align-items:center;
  background:#fff;border:1px solid var(--border);border-radius:18px;padding:14px 18px 14px 14px;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease)}
.sv-part:hover{transform:translateX(4px);border-color:rgba(41,126,50,.4);
  box-shadow:0 2px 4px rgba(17,24,39,.05), 0 18px 40px -20px rgba(17,24,39,.28)}
.sv-part-im{width:132px;height:104px;border-radius:13px;display:grid;place-items:center;
  padding:10px;overflow:hidden;background:linear-gradient(165deg,var(--m-card),#F5FBF7)}
.sv-part-im img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  mix-blend-mode:multiply}
/* bc.jpg is a photograph, not a white-background cutout */
.sv-part-im--photo{padding:0}
.sv-part-im--photo img{max-width:none;width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.sv-part h3{font-size:16px;font-weight:600}
.sv-part p{margin-top:4px;font-size:13.5px;color:var(--m-muted);line-height:1.55}
.sv-part-go{display:inline-flex;align-items:center;gap:7px;margin-top:9px;
  font-size:12.5px;font-weight:600;color:var(--green-dk)}
.sv-part-go svg{width:13px;height:13px;transition:transform .22s var(--ease)}
.sv-part:hover .sv-part-go svg{transform:translateX(4px)}

/* =============================================================== PROSE */
/* The prose used to sit alone with an empty right half. WE2.jpg is 1600x797
   and shows the range we actually manufacture, which is exactly what this
   section is claiming. */
.sv-work{display:grid;gap:clamp(26px,3.4vw,54px);align-items:center}
@media(min-width:940px){.sv-work{grid-template-columns:1.02fr .98fr}}
.sv-work-fig{margin:0;border-radius:20px;overflow:hidden;border:1px solid var(--m-line);
  box-shadow:0 2px 6px rgba(17,24,39,.06), 0 26px 56px -26px rgba(17,24,39,.34)}
.sv-work-fig img{width:100%;object-fit:cover;aspect-ratio:16/10;display:block}
.sv-work-fig figcaption{padding:13px 17px;background:var(--m-card);
  font-size:12.5px;color:var(--m-muted);border-top:1px solid var(--m-line)}
.sv-prose{max-width:60ch;font-size:16.5px;line-height:1.72;color:var(--body,#3F4658)}
.sv-prose p+p{margin-top:16px}
.sv-prose strong{color:var(--ink);font-weight:600}
.sv .sv-lede{font-family:var(--h);font-size:clamp(18px,2vw,22px);font-weight:400;
  line-height:1.5;color:var(--ink);letter-spacing:-.014em;margin-bottom:18px}

/* ============================================================== ON SITE */
/* A plain four-across strip. Projects owns the zig-zag, so this stays a band. */
.sv-band{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.sv-band{grid-template-columns:repeat(4,1fr)}}
.sv-shot{position:relative;margin:0;border-radius:16px;overflow:hidden;background:var(--m-card)}
.sv-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .55s var(--ease)}
.sv-shot:hover img{transform:scale(1.05)}
.sv-shot figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:30px 14px 12px;
  background:linear-gradient(to top, rgba(8,37,20,.88), rgba(8,37,20,.55) 55%, transparent)}
.sv-shot b{display:block;font-family:var(--h);font-size:13.5px;font-weight:600;color:#fff;
  line-height:1.3}
.sv-shot span{display:block;margin-top:3px;font-size:11.5px;color:#C9DECF}

@media(prefers-reduced-motion:reduce){
  .sv-part,.sv-shot img{transition:none}
}