/* ==========================================================================
   BRIGHT WAVE ELECTRIC — service-page layer.
   Loads AFTER assets/css/site.css and only adds what a service page needs:
   the image hero, the long doc lists, the compare columns, the numbered
   process list, the 3-column cost table and the closing CTA band. Every
   colour, font and radius comes from the site.css tokens — nothing new.
   ========================================================================== */

/* ── breadcrumb ─────────────────────────────────────────────────────── */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:22px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute)}
.crumb a{color:var(--ink-mute);transition:color .22s var(--ease)}
.crumb .sep{color:var(--copper);opacity:.7}
.crumb [aria-current]{color:var(--copper)}

/* ── 01 · HERO (image up top, no form) ──────────────────────────────── */
.svc-hero{position:relative;z-index:2;display:grid;
  grid-template-columns:70px 1.32fr .98fr;gap:0 46px;align-items:start}
.svc-hero h1{font-size:clamp(31px,4.4vw,60px)}
.svc-hero .ip-shot{aspect-ratio:4/3.05}
.svc-shot{opacity:0;animation:fadeUp .95s var(--ease) 1.5s forwards}

/* ✓ checklist from the doc's hero list */
.svc-checks{columns:2;column-gap:34px;margin-top:28px;
  opacity:0;animation:fadeUp .9s var(--ease) 1.54s forwards}
.svc-checks li{position:relative;padding-left:26px;margin-bottom:11px;break-inside:avoid;
  font-size:14.2px;line-height:1.55;color:var(--ink-soft)}
.svc-checks li::before{content:"";position:absolute;left:3px;top:.34em;width:10px;height:6px;
  border-left:2px solid var(--copper);border-bottom:2px solid var(--copper);
  transform:rotate(-45deg)}

/* ── 02 · INTRO + QUOTE FORM ────────────────────────────────────────── */
.svc-intro{display:grid;grid-template-columns:1fr 1.02fr;gap:52px;align-items:start;
  margin-top:44px}

/* when the doc has no spare intro copy, the form stands on its own */
.svc-intro--form{grid-template-columns:minmax(0,760px);justify-content:center}

/* the closing "Schedule …" heading, moved beside the form: it sits in a
   half-width column, so it steps down from the full-width section headings */
.svc-ask-h2{font-size:clamp(24px,2.7vw,38px);margin-top:38px;margin-bottom:0}

/* ── long bullet lists straight from the doc ────────────────────────── */
.svc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;margin-top:28px}
.svc-list li{position:relative;padding:13px 0 13px 26px;border-bottom:1px solid var(--line-soft);
  font-size:14.6px;line-height:1.62;color:var(--ink-soft)}
.svc-list li::before{content:"";position:absolute;left:2px;top:1.42em;width:11px;height:2px;
  background:var(--copper)}

/* short factor list, rendered as the homepage's chip idiom */
.svc-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.svc-tags li{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:9px 15px;border:1px solid var(--line);color:var(--ink-soft)}

/* ── repair-vs-replace compare columns ──────────────────────────────── */
.svc-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:34px;align-items:start}
.svc-col{border:1px solid var(--line);background:var(--paper-2);padding:28px 26px 30px;height:100%}
.svc-col .svc-col-tag{font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--copper);margin-bottom:14px}
.svc-col>p{color:var(--ink-soft);font-size:15px;line-height:1.7}
.svc-col .spec{margin-top:20px}
.svc-col .spec li{padding:14px 0 14px 26px;font-size:14.4px}
.svc-col .spec li::before{top:22px}

/* ── numbered process list (one <li> = one doc bullet, unsplit) ─────── */
.svc-steps{counter-reset:st;margin-top:30px;border-top:2px solid var(--ink)}
.svc-steps li{counter-increment:st;position:relative;padding:20px 0 20px 60px;
  border-bottom:1px solid var(--line-soft);font-size:15px;line-height:1.72;color:var(--ink-soft)}
.svc-steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:23px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--copper)}
.svc-steps b{font-family:var(--grot);font-weight:700;text-transform:uppercase;font-size:13.5px;
  letter-spacing:-.006em;color:var(--ink)}

/* ── 3-column cost table ────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.costs--3{min-width:660px}
.costs--3 th:last-child,.costs--3 td:last-child{text-align:left}
.costs--3 td:first-child{width:23%}
.costs--3 td:nth-child(2){font-family:var(--mono);font-size:13.5px;color:var(--copper);
  white-space:nowrap;font-variant-numeric:tabular-nums;padding-right:26px;width:17%;
  vertical-align:baseline}
.costs--3 td:last-child{font-family:var(--body);font-size:14px;line-height:1.62;
  color:var(--ink-soft);white-space:normal}


/* ── inverted "urgent service" band (reuses the homepage .emg strip) ── */
.svc-emg{margin-top:0}
.svc-emg .kicker{margin-bottom:20px}
.svc-emg .kicker .num{color:var(--copper-bright)}
.svc-emg .kicker .rule{background:var(--line-lt)}
.svc-emg .kicker .lbl{color:#a79c88}
.svc-emg .h2{color:var(--paper);margin-bottom:20px}
.svc-emg .h2 .cop{color:var(--copper-bright)}
.svc-emg p{color:#c9c0ad;font-size:15.3px;line-height:1.72;max-width:62ch}
.svc-emg p+p{margin-top:15px}
.svc-emg .btn--primary{border-color:var(--copper-bright);color:var(--copper-bright)}

/* ── closing CTA band ───────────────────────────────────────────────── */
.svc-cta{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:start}
.svc-cta .body-p+.body-p{margin-top:18px}

/* ── responsive ─────────────────────────────────────────────────────── */
@media(max-width:1080px){
  .svc-hero{grid-template-columns:70px 1.2fr 1fr;gap:0 34px}
}
@media(max-width:980px){
  /* the image is the hook: on a phone it leads, then the copy */
  .svc-hero{grid-template-columns:1fr;gap:0}
  .svc-hero .rail{display:none}
  .svc-shot{order:-1;margin:0 0 40px}
  .svc-intro,.svc-cta{grid-template-columns:1fr;gap:38px}
  .svc-cols{grid-template-columns:1fr;gap:24px}
}
@media(max-width:760px){
  .svc-list{grid-template-columns:1fr;gap:0}
  .svc-checks{columns:1}
}
@media(max-width:700px){
  .svc-col{padding:24px 20px 26px}
  .svc-steps li{padding-left:0;padding-top:34px}
  .svc-steps li::before{top:14px}
  /* the cost table stacks into labelled rows instead of scrolling sideways */
  .costs--3{min-width:0}
  .costs--3 thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .costs--3 caption{padding-bottom:10px}
  .costs--3 tbody tr{display:block;padding:18px 0;border-bottom:1px solid var(--line)}
  .costs--3 td{display:block;border:0;padding:0 0 9px;width:auto!important}
  .costs--3 td:last-child{padding-bottom:0}
  .costs--3 td[data-l]::before{content:attr(data-l);display:block;font-family:var(--mono);
    font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);
    margin-bottom:6px}
}
@media(prefers-reduced-motion:reduce){
  .svc-shot,.svc-checks{opacity:1!important;transform:none!important}
}