/* =====================================================================================
   Switch Smart Electrical: services B (services hub, EV chargers, sockets and additions,
   heating controls, commercial). Linked only from those five pages, after site.css.
   1 drawing extras (.dgm)   2 energise states   3 services hub   4 figure layouts
   ===================================================================================== */

/* ------------------------------------------------------------------ 1 drawing extras */
.dgm .c-ink { stroke: var(--dg-ink); }
.dgm .c-l1 { stroke: var(--c-line); }                 /* L1 brown */
.dgm .c-l2 { stroke: var(--dg-ink); }                 /* L2 black */
.dgm .c-l3 { stroke: #8C9298; }                       /* L3 grey  */
.dgm .cab-xs { stroke-width: 2.2; }
.dgm .cab-m { stroke-width: 5; }
.dgm .swa { fill: none; stroke: var(--dg-dark); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.dgm .swa-in { fill: none; stroke: #6E737A; stroke-width: 1.4; stroke-dasharray: 2 5; stroke-linecap: butt; }
.dgm .hatch { opacity: .32; }
.dgm .fl-z0 { fill: rgba(17, 18, 20, .15); }
.dgm .fl-z1 { fill: rgba(17, 18, 20, .09); }
.dgm .fl-z2 { fill: rgba(17, 18, 20, .045); }
.dgm .fl-glass { fill: rgba(46, 92, 154, .08); }
.dgm .fl-board { fill: #E9E2D2; }
.dgm .fl-soil { fill: #EAE3D6; }
.dgm .tx-xs { font-size: 9px; letter-spacing: .06em; }
.dgm .tx-b { font-weight: 700; }
.dgm .tx-r { fill: var(--red); }
.dgm .ar { fill: var(--dg-ink); }
.dgm .heat { fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
:is(.theme-ink, .theme-ink2) .dgm { --dg-board: #2A2C31; }
:is(.theme-ink, .theme-ink2) .dgm .fl-z0 { fill: rgba(255, 255, 255, .14); }
:is(.theme-ink, .theme-ink2) .dgm .fl-z1 { fill: rgba(255, 255, 255, .08); }
:is(.theme-ink, .theme-ink2) .dgm .fl-z2 { fill: rgba(255, 255, 255, .04); }
@media (max-width: 640px) { .dgm .tx-xs { font-size: 11px; } }

/* ------------------------------------------------------------------ 2 energise states */
/* [data-energise] on an svg: .en groups switch on in turn after the draw-in (services-b.js).
   Default (no JS, reduced motion, final state) is ON: LEDs red, waves showing, cable hot. */
.dgm .en-led { fill: var(--red); transition: fill .25s; }
.dgm .en-ring { fill: none; stroke: var(--red); stroke-width: 1.6; transition: opacity .3s; }
.dgm .en-wave { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linecap: round; transition: opacity .35s; }
.dgm .en-glow { fill: var(--red); opacity: .16; transition: opacity .35s; }
[data-energise].is-armed .en:not(.is-on) .en-led { fill: var(--dg-paper); }
[data-energise].is-armed .en:not(.is-on) :is(.en-wave, .en-ring, .en-glow) { opacity: 0; }
[data-energise].is-armed .en:not(.is-on) .heat { stroke: var(--c-sheath); }
html.js:not(.ss-reduced) .dgm[data-draw]:not(.is-drawn) :is(.en-led) { fill-opacity: 0; }

/* icons on the services hub: one element lights when the card is hovered or focused */
.dgm--icon { overflow: visible; }
.dgm .ico-led { fill: var(--dg-paper); stroke: var(--dg-ink); stroke-width: 1; transition: fill .25s, filter .3s; }
.dgm .ico-fil { fill: none; stroke: var(--dg-ink); stroke-width: 1.6; stroke-linecap: round; opacity: .6; transition: stroke .25s, opacity .25s; }
.dgm .ico-ray { opacity: 0; transition: opacity .3s; }
.dgm .ico-heat { fill: none; stroke: var(--dg-ink); stroke-width: 2.2; stroke-linecap: round; transition: stroke .3s; }

/* ------------------------------------------------------------------ 3 services hub */
/* The nine ways: a card per service with a drawn icon on a drawing-sheet strip, the
   paragraph, and the paperwork it ends with. Hover lights the card LED and the icon. */
.svc-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
@media (max-width: 1079px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } }
.svc {
  position: relative; display: flex; flex-direction: column; height: 100%; border-radius: var(--r-3); overflow: hidden;
  background: var(--card); color: var(--text); text-decoration: none; box-shadow: 0 0 0 1px var(--rule);
  transition: box-shadow .3s var(--ease-out), transform .4s var(--ease-out);
}
a.svc:hover { box-shadow: 0 0 0 1.5px var(--text), var(--shadow-2); transform: translateY(-3px); }
a.svc:focus-visible { outline-offset: 4px; border-radius: var(--r-3); }
.svc__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--rule); font: 500 .75rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.svc__top b { font-weight: 500; color: var(--text); }
.svc__fig {
  display: grid; place-items: center; padding: 18px 18px 16px; border-bottom: 1px dashed var(--rule-2);
  background-color: var(--paper); background-image: var(--grid-paper); background-size: 16px 16px; background-position: -1px -1px;
}
.svc__fig .dgm { width: min(152px, 100%); }
.svc__body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: 18px 20px 18px; }
.svc__t { font: 680 1.375rem/1.15 var(--f-display); font-stretch: var(--display-stretch); letter-spacing: -.008em; }
.svc__d { font-size: .9375rem; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.svc__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 8px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--rule); font: 500 .75rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.svc__meta .dt { color: var(--text-3); }
.svc__meta .dd { color: var(--text); }
.svc__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; font-weight: 600; font-size: .9375rem; }
.svc__go svg { width: 17px; height: 17px; color: var(--red); transition: transform .3s var(--ease-out); }
a.svc:hover .svc__go svg { transform: translateX(4px); }
a.svc:is(:hover, :focus-visible) .svc__top .led { background: var(--red); box-shadow: 0 0 0 3px rgba(196, 18, 48, .14), 0 0 12px 1px var(--red-glow); }
a.svc:is(:hover, :focus-visible) .dgm .ico-led { fill: var(--red); filter: drop-shadow(0 0 3px rgba(196, 18, 48, .6)); }
a.svc:is(:hover, :focus-visible) .dgm .ico-fil { stroke: var(--red); opacity: 1; }
a.svc:is(:hover, :focus-visible) .dgm .ico-ray { opacity: .9; }
a.svc:is(:hover, :focus-visible) .dgm .ico-heat { stroke: var(--red); }
/* phones: icon beside the text to keep nine cards short */
@media (max-width: 640px) {
  .svc { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
  .svc__top { grid-column: 1 / -1; }
  .svc__fig { grid-column: 1; align-self: stretch; place-items: start center; padding: 18px 8px; border-bottom: 0; border-right: 1px dashed var(--rule-2); }
  .svc__fig .dgm { width: 78px; }
  .svc__body { grid-column: 2; padding: 16px 16px 16px; }
  .svc__t { font-size: 1.25rem; }
}
/* narrow phones: the mono values ("NOTIFIABLE") no longer fit beside their labels, so stack them */
@media (max-width: 379px) {
  .svc__meta { grid-template-columns: minmax(0, 1fr); gap: 1px 0; }
  .svc__meta .dd + .dt { margin-top: 7px; }
}

/* not sure what you need: two ways in, on ink */
.notsure__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 32px clamp(32px, 5vw, 88px); align-items: center; }
.notsure__head .h2 { margin-bottom: 18px; max-width: 14ch; }
.notsure__opts { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.opt {
  display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 22px 22px 20px; border-radius: var(--r-3);
  background: var(--ink-2); color: var(--on-ink); text-decoration: none; box-shadow: 0 0 0 1px var(--rule-ink-2);
  transition: box-shadow .3s var(--ease-out), transform .4s var(--ease-out), background-color .3s;
}
a.opt:hover { box-shadow: 0 0 0 1.5px var(--on-ink); transform: translateY(-3px); background: var(--ink-3); }
.opt__k { display: flex; align-items: center; gap: 9px; font: 500 .75rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-3); }
a.opt:is(:hover, :focus-visible) .led { background: var(--red); box-shadow: 0 0 0 3px rgba(196, 18, 48, .2), 0 0 12px 1px var(--red-glow); }
.opt__t { margin-top: 6px; font: 680 1.5rem/1.12 var(--f-display); font-stretch: var(--display-stretch); letter-spacing: -.01em; }
.opt__d { color: var(--on-ink-2); font-size: .9688rem; line-height: 1.55; }
.opt__go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.opt__go svg { width: 17px; height: 17px; color: var(--red-l); transition: transform .3s var(--ease-out); }
a.opt:hover .opt__go svg { transform: translateX(4px); }
@media (max-width: 999px) { .notsure__in { grid-template-columns: minmax(0, 1fr); } .notsure__head .h2 { max-width: 20ch; } }
@media (max-width: 560px) { .notsure__opts { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ 4 figure layouts */
/* three panels (the certificates): three across on wide screens; one per row below 900px,
   with the drawing beside its key while there is room */
.fig__panels--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fig__panels--3 .dgm { max-width: 300px; margin-inline: auto; }
@media (max-width: 899px) {
  .fig__panels--3 { grid-template-columns: minmax(0, 1fr); }
  .fig__panels--3 .fig__panel + .fig__panel { border-left: 0; padding-left: 0; border-top: 1px dashed var(--rule-2); padding-top: 18px; }
}
@media (min-width: 560px) and (max-width: 899px) {
  .fig__panels--3 .fig__panel { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 10px 24px; align-items: start; }
  .fig__panels--3 .fig__tag { grid-column: 1 / -1; }
}
.fig__panel .key { margin-top: 4px; }
.chart td small { display: block; color: var(--text-3); font-size: .8125rem; }
.sec-head--lf { margin-bottom: clamp(16px, 2vw, 28px); }
.svc-more { margin-top: clamp(24px, 3vw, 36px); }