/* ============================================================
   Industry: Electricians — page-specific styles.

   The page is built from the shared industry modules, so everything
   that belongs to the system (heads, ledgers, spines, sums, the Client
   Platform composition, the phone rules) comes from page-industry.css
   and is not repeated here. Only the two things unique to this page
   live in this file:

     1. the hero board scene (a labelled board for the managed plan,
        thrown one way at a time and resting complete)
     2. the schedule of circuits: every service in the trade's words
        and the customer's, on the page's one dark band

   Phone rules (<=640px) sit at the end. Nothing leaves the DOM.
   Prefix: el-
   ============================================================ */

/* ============================================================
   1. HERO — the board
   ============================================================ */
.el-board{position:relative;min-width:0}
.el-board-unit{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:30px 28px 22px;
  box-shadow:0 1px 2px rgba(18,33,47,.04),0 34px 70px -44px rgba(18,33,47,.55);
}
.el-board-face{position:relative;padding:26px 20px 20px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.el-board-face::before{content:"";position:absolute;left:20px;right:20px;top:19px;height:1px;background:var(--line)}

.el-ways{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1.3fr repeat(5,1fr)}
.el-way{position:relative;display:flex;flex-direction:column;align-items:center;gap:11px;padding:6px 4px 0;min-width:0}
.el-way + .el-way::before{content:"";position:absolute;left:0;top:2px;bottom:24px;width:1px;background:var(--line-2)}

.el-sw{
  position:relative;width:30px;height:52px;border-radius:6px;flex:none;
  background:var(--white);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(18,33,47,.06);
}
.el-sw::after{content:"";position:absolute;left:9px;right:9px;top:8px;height:2px;border-radius:2px;background:var(--line)}
.el-sw i{
  position:absolute;left:4px;right:4px;bottom:4px;height:22px;border-radius:4px;
  background:#C9CFD5;
  transition:transform .4s var(--ease-out),background-color .35s var(--ease);
}
.el-way em{
  font-style:normal;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:-0.015em;
  color:#A9B1B9;text-align:center;line-height:1.2;transition:color .35s var(--ease);
}
.el-way-main .el-sw{width:38px}
.el-way-main .el-sw::after{left:12px;right:12px}

/* the finished state is the default: no JavaScript, or reduced motion,
   shows the board complete. The "off" start state only exists once the
   scene has taken control (.is-live). */
.el-board:not(.is-live) .el-sw i,.el-way.on .el-sw i{transform:translateY(-22px);background:var(--ink)}
.el-board:not(.is-live) .el-way em,.el-way.on em{color:var(--ink)}
.el-board:not(.is-live) .el-way-main .el-sw i,.el-way-main.on .el-sw i{background:var(--orange)}

.el-board-label{
  margin:16px 0 0;text-align:center;font-family:var(--fh);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.el-board .ind-scene-cap span{max-width:46ch}

/* ============================================================
   2. THE SCHEDULE OF CIRCUITS (the page's one dark band)
   ============================================================ */
.ind-sec-el-circuits .eyebrow{color:var(--amber)}
.ind-sec-el-circuits .eyebrow::before{background:var(--amber)}
.ind-sec-el-circuits .ind-foot{color:var(--on-dark-muted)}
.ind-sec-el-circuits .ind-foot a{color:#fff}

.el-sched{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.18)}
.el-sched > li{
  display:grid;grid-template-columns:52px minmax(0,.9fr) minmax(0,1.25fr);
  gap:14px 28px;align-items:start;padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.el-sched-n{
  font-family:var(--fh);font-weight:800;font-size:13px;letter-spacing:.06em;
  color:var(--amber);font-variant-numeric:tabular-nums;padding-top:4px;
}
.el-sched-svc b{display:block;font-family:var(--fh);font-size:18px;font-weight:700;letter-spacing:-0.025em;line-height:1.25;color:#fff}
.el-sched-svc em{display:block;font-style:normal;margin-top:7px;font-size:14px;line-height:1.5;color:var(--on-dark-muted)}
.el-sched-q{list-style:none;margin:0;padding:2px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.el-sched-q li{
  display:inline-flex;align-items:center;gap:9px;padding:7px 13px 7px 11px;
  border:1px solid rgba(255,255,255,.18);border-radius:100px;background:rgba(255,255,255,.05);
  font-size:14px;line-height:1.3;color:var(--on-dark);
}
.el-sched-q li::before{
  content:"";width:12px;height:12px;flex:none;opacity:.85;
  background:no-repeat center/12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3B5C4' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.el-sched-foot{max-width:70ch}
.el-sched-links{margin-top:14px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1040px){
  .el-board-unit{padding:28px 24px 20px}
  .el-sched > li{grid-template-columns:46px minmax(0,1fr);gap:12px 20px}
  .el-sched-q{grid-column:2}
}
@media (max-width:720px){
  .el-ways{grid-template-columns:repeat(3,1fr);row-gap:24px}
  .el-way + .el-way::before{display:none}
  .el-board-face::before{left:12px;right:12px}
}

/* ---------- phones (<=640px): nothing leaves the DOM ---------- */
@media (max-width:640px){
  .el-board-unit{padding:22px 16px 16px;border-radius:14px}
  .el-board-face{padding:18px 12px 14px}
  .el-ways{grid-template-columns:repeat(3,1fr);row-gap:20px}
  .el-sw{width:27px;height:46px}
  .el-sw i{height:19px}
  .el-board:not(.is-live) .el-sw i,.el-way.on .el-sw i{transform:translateY(-19px)}
  .el-way-main .el-sw{width:33px}
  .el-way em{font-size:11px}
  .el-board-label{margin-top:13px;font-size:10.5px;letter-spacing:.14em}
  .el-board .ind-scene-cap span{max-width:none;font-size:13px}

  .ind-sec-el-circuits .ind-head-split h2{max-width:none}
  .el-sched > li{grid-template-columns:34px minmax(0,1fr);gap:8px 12px;padding:18px 0}
  .el-sched-n{padding-top:2px;font-size:12px}
  .el-sched-svc b{font-size:16.5px}
  .el-sched-svc em{margin-top:5px;font-size:13.5px}
  .el-sched-q{grid-column:2;gap:7px;padding-top:10px}
  .el-sched-q li{font-size:13px;padding:6px 11px 6px 9px;gap:7px}
  .el-sched-foot,.el-sched-links{font-size:14.5px}
}

@media (prefers-reduced-motion:reduce){
  .el-sw i,.el-way em{transition:none}
}


/* ============================================================
   PHONE, SECOND PASS (5 September 2026)

   The electricians page is the owner's quality benchmark and its
   desktop layout, copy, imagery and interactions are not to be
   touched. This block is phone-only and changes nothing above 640px.
   Measured at 390px the page ran to 19,614px with ninety-one elements
   under the system's 14.5px reading floor, most of them in the
   bespoke scheduling and consumer-unit sections. The interactive site
   plan keeps its full behaviour: it is the page's signature module,
   and collapsing it would break the live service picker.
   ============================================================ */
@media (max-width:640px){
  .el-sched-q li{font-size:14.5px;line-height:1.5;padding:7px 0}
  .el-sched-svc em{font-size:14.5px}
  .el-way em{font-size:13.5px;line-height:1.5}
  .el-sched-n{font-size:13px}
  .el-circuits li,.el-circuits p{font-size:14.5px;line-height:1.55}
  .el-sched,.el-circuits,.el-way{gap:16px}
  .ind-plan-foot{font-size:14.5px;margin-top:14px}
}