/* Meridian — bespoke sections (harvest-back candidates)
   Character: industrial signage. Dark plate hero, index boards, data-plate details. */

/* ── dark plate hero: nav + massive signage type on ink ── */
.plate{background:var(--ink);color:#B9C0CA;position:relative;overflow:hidden}
.plate::before{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;
  background-image:linear-gradient(#5B6B85 1px,transparent 1px),
    linear-gradient(90deg,#5B6B85 1px,transparent 1px);
  background-size:28px 28px}
.plate > *{position:relative}
.nav-d{padding:22px 0}
.nav-d .inner{display:flex;justify-content:space-between;align-items:center}
.nav-d .logo{font-family:var(--display);font-weight:700;font-size:19px;color:#fff;
  font-variation-settings:"wdth" 116;text-transform:uppercase;letter-spacing:.02em}
.nav-d ul{display:flex;gap:var(--s3);align-items:center;list-style:none;margin:0;padding:0}
.nav-d a{color:#B9C0CA;font-weight:600;font-size:14.5px}
.nav-d a:hover{color:#fff}
.nav-d .btn{padding:11px 18px;font-size:14px}
@media (max-width:800px){.nav-d ul{gap:var(--s2)} .nav-d ul li:not(:last-child){display:none}}

.plate-hero{padding:calc(var(--s5)) 0 var(--s6);position:relative}
.plate-hero h1{color:#fff;font-size:clamp(46px,8.5vw,96px);line-height:.95;
  letter-spacing:0;max-width:12ch;margin-bottom:var(--s4)}
.plate-hero h1 .amp{color:#7B96FF}
.plate-bottom{max-width:620px;margin-top:var(--s4)}
.plate-bottom .sub{font-size:19px;color:#B9C0CA;max-width:30em;margin-bottom:var(--s3)}

/* the circuit: brand linework instead of stock photography */
.circuit{position:absolute;right:0;top:0;height:100%;width:min(46vw,560px);
  pointer-events:none;z-index:0}
.circuit svg{width:100%;height:100%}
.circuit .c-p{fill:none;stroke:#5F79E8;stroke-width:2;stroke-linecap:round}
.circuit .c-d{fill:#7B96FF}
.circuit .c-pad{fill:none;stroke:#7B96FF;stroke-width:2}
.plate-hero .container{position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){
  .circuit .c-p[pathLength]{stroke-dasharray:1;stroke-dashoffset:1;
    animation:trace 1.1s cubic-bezier(.3,.8,.3,1) forwards}
  .circuit .c-p:nth-of-type(2){animation-delay:.15s}
  .circuit .c-p:nth-of-type(3){animation-delay:.3s}
  .circuit .c-p:nth-of-type(4){animation-delay:.45s}
  .circuit .c-p:nth-of-type(5){animation-delay:.6s}
  @keyframes trace{to{stroke-dashoffset:0}}
  .circuit .c-d,.circuit .c-pad{opacity:0;animation:node-in .4s ease-out 1.2s forwards}
  @keyframes node-in{to{opacity:1}}
}
@supports (offset-path: path("M0 0 L1 1")){
  @media (prefers-reduced-motion:no-preference){
    .circuit .c-pulse{fill:#fff;
      offset-path:path("M600,60 H424 Q404,60 404,80 V200 Q404,220 384,220 H248");
      animation:current 3.6s ease-in-out 2s infinite}
    @keyframes current{0%{offset-distance:0%;opacity:0}12%{opacity:1}
      88%{opacity:1}100%{offset-distance:100%;opacity:0}}
  }
}
@media (max-width:780px){.circuit{display:none}}

/* the nameplate: crew credentials as an equipment data plate */
.nameplate{background:var(--ink);color:#B9C0CA;border-radius:8px;
  padding:var(--s4);position:relative;max-width:480px;
  box-shadow:0 26px 60px -28px rgba(10,15,30,.6)}
.nameplate::before{content:"";position:absolute;inset:0;border:2px solid #7B96FF;
  border-radius:8px;transform:translate(11px,11px);z-index:-1}
.nameplate .np-head{display:flex;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:#8E97A5;border-bottom:1px solid #2E3644;padding-bottom:12px;margin-bottom:var(--s3)}
.nameplate .big{font-family:var(--display);font-variation-settings:"wdth" 116;
  text-transform:uppercase;font-weight:800;color:#fff;
  font-size:clamp(46px,6vw,72px);line-height:1;font-variant-numeric:tabular-nums}
.nameplate .cap{font-size:14px;color:#8E97A5;margin-top:6px;max-width:24em}
.nameplate .rows{margin-top:var(--s3);border-top:1px solid #2E3644}
.nameplate .r{display:flex;justify-content:space-between;gap:12px;padding:10px 0;
  border-bottom:1px solid #2E3644;font-family:var(--mono);font-size:12.5px;color:#8E97A5}
.nameplate .r b{color:#fff;font-weight:500}

/* spec readout: the data plate */
.specline{display:flex;flex-wrap:wrap;gap:8px 0;border-top:1px solid #2E3644;
  border-bottom:1px solid #2E3644;padding:12px 0;margin:0 0 var(--s4);
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:#8E97A5}
.specline span{padding:0 16px;border-left:1px solid #2E3644}
.specline span:first-child{border-left:none;padding-left:0}
.specline b{color:#fff;font-weight:500}
@media (max-width:800px){
  .plate-bottom{grid-template-columns:1fr}
  .specline span{border-left:none;padding:0 16px 0 0}
}

/* ── service index: an equipment list, not cards ── */
.svc-index{border-top:1px solid var(--line)}
.svc-ix{display:grid;grid-template-columns:52px minmax(0,1fr) auto 20px;gap:var(--s3);
  align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line);
  color:inherit;transition:transform .18s cubic-bezier(.3,.8,.3,1)}
.svc-ix:hover{transform:translateX(6px);text-decoration:none}
.svc-ix .n{font-family:var(--mono);font-size:12px;color:var(--accent)}
.svc-ix .t{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.svc-ix .t h3{font-size:19px;margin:0;white-space:nowrap}
.svc-ix .t p{margin:0;font-size:13.5px;color:var(--muted)}
.svc-ix .from{font-family:var(--mono);font-size:13.5px;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.svc-ix .arr{font-size:16px;color:var(--accent);transition:transform .18s cubic-bezier(.3,.8,.3,1)}
.svc-ix:hover .arr{transform:translateX(4px)}
main a.svc-ix{background-image:none}
@media (max-width:640px){.svc-ix{grid-template-columns:38px 1fr auto;row-gap:3px}
  .svc-ix .t{flex-direction:column;gap:2px}.svc-ix .arr{display:none}}

/* ── the panel board: prices as a breaker panel ── */
.board{border:2px solid var(--ink);border-radius:8px;background:var(--surface);
  max-width:760px;overflow:hidden}
.board-head{display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;background:var(--ink);color:var(--ground);
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.board-head .amp{color:var(--accent-soft)}
.breaker{display:grid;grid-template-columns:44px 1fr auto;gap:var(--s3);
  align-items:center;padding:16px 20px;border-top:1px solid var(--line)}
.breaker:hover{background:var(--surface-2)}
.breaker .sw{width:34px;height:18px;border:1.6px solid var(--ink);border-radius:4px;position:relative}
.breaker .sw::before{content:"";position:absolute;inset:2px 50% 2px 2px;
  background:var(--muted);border-radius:2px;transition:inset .18s cubic-bezier(.3,.8,.3,1),background .18s}
.breaker:hover .sw::before{inset:2px 2px 2px 50%;background:var(--accent)}
.breaker .job b{display:block;color:var(--ink);font-weight:700}
.breaker .job span{font-size:13.5px;color:var(--muted)}
.breaker .amt{font-family:var(--mono);font-size:14.5px;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.board-foot{padding:13px 20px;border-top:2px solid var(--ink);
  font-family:var(--mono);font-size:12px;color:var(--muted)}
.board-foot em{color:var(--accent);font-style:normal;font-weight:700}
@media (max-width:600px){
  .breaker{grid-template-columns:34px 1fr;row-gap:4px}
  .breaker .amt{grid-column:2;text-align:left}
}

/* ── process: tight horizontal strip ── */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);
  border-top:2px solid var(--ink);padding-top:var(--s4)}
.proc .p-item .n{font-family:var(--mono);font-size:13px;color:var(--accent);display:block;margin-bottom:8px}
.proc .p-item h3{font-size:17px;margin:0 0 6px}
.proc .p-item p{margin:0;font-size:14px;color:var(--muted)}
@media (max-width:800px){.proc{grid-template-columns:1fr 1fr}}
@media (max-width:500px){.proc{grid-template-columns:1fr}}

/* ── dark quote plate ── */
.quote-d{background:var(--ink);padding:calc(var(--s6)*1.1) 0}
.quote-d blockquote{margin:0;font-family:var(--display);font-weight:600;
  font-variation-settings:"wdth" 108;font-size:clamp(24px,3.6vw,40px);line-height:1.15;
  color:#fff;max-width:24em}
.quote-d .who{display:block;margin-top:var(--s3);font-family:var(--mono);
  font-size:13px;color:#8E97A5}
.quote-d .who b{color:#B9C0CA;font-weight:500}