.section-head-lead.home-lead-860 { max-width: 860px; }
.section-head-lead.home-lead-800 { max-width: 800px; }
.section-head-lead.home-lead-820 { max-width: 820px; }

.bento-cell.home-img-iec { background-image: url('/assets/iec-standard-book.webp?v=2'); background-position: 20% center; }
.bento-cell.home-img-substation { background-image: url('/assets/substation-engineer-storm.webp'); }
.bento-cell.home-img-risk { background-image: url('/assets/city-lightning-street.webp'); }
/* National rules band CTA: a white button with brand text, set on the blue wave wash. */
.btn.home-cta-white {
  --bs-btn-color: var(--color-primary);
  --bs-btn-bg: var(--color-bg);
  --bs-btn-border-color: var(--color-bg);
  --bs-btn-hover-color: var(--color-primary-hover);
  --bs-btn-hover-bg: var(--color-primary-soft);
  --bs-btn-hover-border-color: var(--color-primary-soft);
  --bs-btn-active-color: var(--color-primary-hover);
  --bs-btn-active-bg: var(--color-primary-soft);
  --bs-btn-active-border-color: var(--color-primary-soft);
}

.bento-cell.home-img-report { background-image: url('/assets/engineer-reviewing-report.webp'); }

.home-d0 { --d: 0; }
.home-d1 { --d: 1; }
.home-d2 { --d: 2; }

.home-w30 { --w: 30%; }
.home-w38 { --w: 38%; }
.home-w48 { --w: 48%; }
.home-w58 { --w: 58%; }
.home-w86 { --w: 86%; }
.home-w92 { --w: 92%; }

.home-sol-electrical { --bg: url('/assets/for-electrical-team.webp'); }
.home-sol-mep { --bg: url('/assets/for-mep-studio.webp'); }
.home-sol-lps { --bg: url('/assets/for-lps-install.webp'); }

.cx-key{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;line-height:1.3}
.cx-key-lx{color:var(--color-primary)}
.cx-key-xl{color:var(--color-text-muted)}
.cx-sw{display:inline-block;width:32px;height:0;flex:0 0 auto}
.cx-sw-lx{border-top:2px solid var(--color-primary)}
.cx-sw-xl{border-top:2px dashed var(--wui-text-4)}
.cx-num{font-size:13px;font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--color-primary)}
.cx-lx{white-space:nowrap}
.cx-nw{white-space:nowrap}

.cx-art{display:block;width:100%;height:auto;overflow:visible}
.cx-art .cx-g{fill:none;stroke:var(--wui-text-5);stroke-width:1}
.cx-art .cx-v{fill:none;stroke:var(--lxd-ink, var(--color-text-muted));stroke-width:2;stroke-linecap:round}
.cx-art .cx-x{fill:none;stroke:var(--color-danger);stroke-width:1.75;stroke-linecap:round}
.cx-art .cx-dash{fill:none;stroke:var(--wui-text-4);stroke-width:1.75;stroke-dasharray:5 4}
.cx-art .cx-dot{fill:var(--wui-text-5)}
.cx-art .cx-fx{font-size:12px;font-style:italic;font-weight:600;fill:var(--color-text-subtle)}
.cx-art .cx-tab{font-size:12px;font-weight:600;fill:var(--color-text-subtle)}
.cx-art .cx-tab-miss{fill:var(--wui-text-4)}
.cx-art .cx-bad-ring{fill:var(--color-danger-soft);stroke:var(--color-danger);stroke-width:2;stroke-dasharray:4 3}
.cx-art .cx-bad-line{fill:none;stroke:var(--color-danger);stroke-width:1.5;stroke-dasharray:3 3}
.cx-art .cx-arrow{fill:none;stroke:var(--wui-text-4);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.cx-art .cx-brush{fill:none;stroke:var(--lxd-ink, var(--color-text-muted));stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.cx-art .cx-note{fill:var(--color-warning-soft);stroke:var(--wui-text-4);stroke-width:1.5}
.cx-pin circle{fill:var(--bs-white);stroke:var(--color-danger);stroke-width:2}
.cx-pin text{font-size:14px;font-weight:700;fill:var(--color-danger-text)}

.sf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,4vw,64px);align-items:start;max-width:1240px;margin:0 auto}
.sf-label{margin:0 0 20px}
.sf-before{padding-top:32px}
.sf-art-wrap{margin:0 0 28px}
.sf-fails{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:14px 28px}
.sf-fails li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--color-text-muted)}
.sf-pin{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:2px solid var(--color-danger);background:var(--bs-white);color:var(--color-danger-text);font-size:13px;font-weight:700;display:grid;place-items:center;line-height:1;margin-top:-2px}
.sf-after{position:relative;border-radius:20px;padding:32px clamp(24px,3vw,40px) 36px;background:
  radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, transparent 60%),
  linear-gradient(180deg, var(--bs-white) 0%, var(--wui-primary-5) 100%)}
.sf-flow{list-style:none;margin:0;padding:0;position:relative}
.sf-flow li{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:20px;padding:0 0 22px}
.sf-flow li:last-child{padding-bottom:0}
.sf-flow li::before{content:"";position:absolute;left:23px;top:0;bottom:0;border-left:2px solid var(--color-primary);transform-origin:top}
.sf-flow li:first-child::before{top:24px}
.sf-flow li:last-child::before{bottom:auto;height:24px}
.sf-node{position:relative;width:48px;height:48px;border-radius:50%;background:var(--bs-white);border:1.5px solid var(--color-primary);display:grid;place-items:center}
.sf-node .cx-num{position:absolute;top:-6px;right:-10px;background:var(--color-primary);color:var(--bs-white);border-radius:10px;padding:1px 6px;font-size:12px;line-height:16px}
.sf-txt{padding-top:2px}
.sf-demand{margin:0 0 3px;font-size:15px;font-weight:600;line-height:1.35;color:var(--lx-heading)}
.sf-lx{margin:0;font-size:15px;line-height:1.45;color:var(--color-text)}
.cx-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:991.98px){
  .sf{grid-template-columns:minmax(0,1fr)}
  .sf-before{padding-top:0}
  .sf-art-wrap{max-width:560px;margin-left:auto;margin-right:auto}
}
@media (max-width:575.98px){
  .sf-fails{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row;gap:12px}
  .sf-after{padding:24px 18px 28px;border-radius:16px}
  .sf-flow li{column-gap:14px}
}
/* On a phone the drawing's numbers are too small to read; the numbered list carries them. */
@media (max-width:575.98px){ .cx-pin{display:none} }

/* The Lumex line draws down only where motion is allowed; otherwise the finished line shows. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .sf-flow{view-timeline-name:--sf}
    .sf-flow li::before{animation:sf-draw linear both;animation-timeline:--sf;animation-range:entry var(--a) entry var(--z)}
    .sf-flow li:nth-child(1){--a:0%;--z:15%}
    .sf-flow li:nth-child(2){--a:11%;--z:26%}
    .sf-flow li:nth-child(3){--a:22%;--z:37%}
    .sf-flow li:nth-child(4){--a:33%;--z:48%}
    .sf-flow li:nth-child(5){--a:44%;--z:59%}
    .sf-flow li:nth-child(6){--a:55%;--z:70%}
    .sf-flow li:nth-child(7){--a:66%;--z:81%}
    .sf-flow li:nth-child(8){--a:77%;--z:92%}
    @keyframes sf-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  }
}

.lxd .hiw-pn { font-size: 14px; font-weight: 700; fill: var(--lxd-surface, var(--color-surface, #FFFFFF)); }
.hiw-foot { margin: clamp(28px, 3.4vw, 44px) 0 0; text-align: center; font-size: 15px; color: var(--color-text-muted); }
.hiw-foot a { font-weight: 500; }
/* On phones the crops shrink below their 320 viewBox, so their labels are set larger to stay at 12 px or more. */
@media (max-width: 575.98px) { .lxd.hiw-crop .lxd-a, .lxd.hiw-crop .lxd-s, .lxd.hiw-crop .lxd-k, .lxd.hiw-crop .lxd-m { font-size: 17px; } }

.hiwA-grid { display: grid; gap: 40px; }
.hiwA-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
.hiwA-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; }
.hiwA-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary);
  color: var(--color-bg); font-size: 14px; font-weight: 700; box-shadow: 0 0 0 3px var(--color-bg); position: relative; z-index: 1; }
.hiwA-step h3 { margin: 2px 0 6px; font-size: 20px; font-weight: 500; line-height: 1.3; color: var(--wui-text-heading); }
.hiwA-step p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-text-muted); max-width: 46ch; }
.hiwA-crop { grid-column: 1 / -1; margin: 0 0 16px; padding: 12px; border-radius: 20px;
  background: linear-gradient(160deg, var(--wui-primary-5), var(--color-bg) 80%); }
.hiwA-crop .lxd { width: 100%; max-width: 360px; margin: 0 auto; }
.hiwA-figure { display: none; margin: 0; }
.hiwA-plate { border-radius: 28px; padding: clamp(16px, 2vw, 28px);
  background: radial-gradient(120% 90% at 88% 6%, var(--wui-primary-20) 0%, var(--wui-primary-5) 46%, var(--color-bg) 92%); }
.hiwA-sheet { width: 100%; }
/* The sheet draws at about 0.85 of its viewBox in a 1140 container, so its labels are a size up. */
.lxd.hiwA-sheet .lxd-a, .lxd.hiwA-sheet .lxd-s, .lxd.hiwA-sheet .lxd-k, .lxd.hiwA-sheet .lxd-m { font-size: 15px; }
@media (min-width: 768px) and (max-width: 1199.98px) {
  .hiwA-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 40px; }
}
@media (min-width: 1200px) {
  .hiwA-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; align-items: center; }
  .hiwA-plate { padding: 12px; }
  .hiwA-figure { display: block; }
  .hiwA-crop { display: none; }
  /* The rail ties the list numbers to the pins on the drawing. */
  .hiwA-step:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: -32px; width: 2px;
    background: var(--wui-primary-30); }
}

/* The graphic field: one soft gradient surface, no card inside it. */
.lp { position:relative; display:flex; flex-direction:column; gap:18px; height:100%;
  padding:clamp(18px, 2.2vw, 28px);
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(150,31,255,.08), transparent 60%),
    radial-gradient(110% 70% at 0% 100%, rgba(47,80,228,.11), transparent 62%),
    linear-gradient(180deg, #F8FAFF 0%, #EEF2FE 100%); }
.lp-bar { display:flex; align-items:center; gap:10px; }
.lp-mark { width:32px; height:32px; flex:none; display:block; }
.lp-mark .lumi-mark { width:32px; height:32px; display:block; }
.lp-who { display:flex; flex-direction:column; min-width:0; flex:1; }
.lp-who b { font-size:15px; font-weight:600; color:#071437; line-height:1.25; }
.lp-status { font-size:13px; color:#4B5675; line-height:1.35; }
.lp-src { display:inline-block; font-size:12px; line-height:1.5; font-weight:600; color:#2440C4;
  background:#EAEEFC; border-radius:999px; padding:3px 9px; white-space:nowrap; }
.lp-src.ok { color:#067A52; background:#E7F7F0; }
.lp-src.draft { color:#9A5B00; background:#FFF3DC; }

/* Timeline states. Only transform and opacity move. */
.lp.lp-armed [data-at]:not(.is-in) { opacity:0; transform:var(--from, translateY(8px)); }
.lp .fx-sx { --from:scaleX(0); transform-origin:left center; transform-box:fill-box; }
.lp .fx-sy { --from:scaleY(0); transform-origin:center bottom; transform-box:fill-box; }
.lp .fx-pop { --from:scale(.82); transform-origin:center; transform-box:fill-box; }
.lp .fx-fade { --from:none; }
.lp [data-out].is-out { opacity:0 !important; }
.lp.lp-reset, .lp.lp-reset * { transition:none !important; }
/* Between loops the answers fade out, jump to the first frame and fade back in. */
.lp .lpb-talk { transition:opacity .26s ease; }
.lp.lp-fade .lpb-talk { opacity:0; }
.ai-feat.lp-seek { cursor:pointer; }
@media (prefers-reduced-motion: reduce) {
  .lp [data-at] { transform:none !important; }
}

/* Waiting line: three dots that only change opacity, shown while Lumi reads Sphera's figures. */
.lp-think { display:inline-flex; align-items:center; gap:4px; margin:4px 0 0; font-size:13px; color:#4B5675; }
.lp-think i { width:5px; height:5px; border-radius:50%; background:#2F50E4; }
.lp-think i:nth-child(3) { margin-right:6px; }
.lp:not(.lp-armed) .lp-think, .lp-done .lp-think { display:none; }
@media (prefers-reduced-motion: reduce) { .lp-think i { opacity:.6; } }
/* On narrow screens the status may take two lines; hold that room so the beats never shift the page. */
@media (max-width:575.98px) { .lp-status { min-height:2.7em; } }
@media (prefers-reduced-motion: no-preference) {
  .lp [data-at] { transition:opacity .42s cubic-bezier(.25,1,.5,1), transform .54s cubic-bezier(.22,1,.36,1); }
  .lp .fx-sx[data-at], .lp .fx-sy[data-at] { transition:opacity .2s linear, transform .6s cubic-bezier(.22,1,.36,1); }
  .lp-think i { animation:lp-dot 1.2s ease-in-out infinite; }
  .lp-think i:nth-child(2) { animation-delay:.15s; } .lp-think i:nth-child(3) { animation-delay:.3s; }
  @keyframes lp-dot { 0%, 100% { opacity:.25; } 50% { opacity:1; } }
}

.lpb-talk { display:grid; }
.lpb-talk > .lpb-turn { grid-area:1/1; align-self:start; position:relative; }
.lpb-turn > .lp-think { position:absolute; left:0; top:28px; }
.lpb-q { margin:0 0 6px; font-size:14px; font-weight:500; line-height:1.45; color:var(--color-text-muted); }
.lpb-q span { color:var(--color-primary); font-weight:600; margin-right:6px; }
.lpb-a { margin:0; font-size:16px; font-weight:500; line-height:1.5; color:var(--lx-heading); letter-spacing:-.005em; }
.lpb-a sub, .lpb-q sub { font-size:.72em; }
.lpb-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.lpb-doc-h { display:flex; align-items:center; gap:8px; margin:0 0 4px; font-size:13px; font-weight:600; color:var(--color-text-muted); }
.lpb-note { margin:8px 0 0; font-size:13px; color:var(--color-text-muted); }
.lpb { height:auto; }
.lpb-fig { display:block; width:100%; max-width:520px; height:auto; margin:auto auto 0; }
.lpb .fx-down { --from:scaleY(0); transform-origin:center top; transform-box:fill-box; }

/* Tones the house drawings kit does not define yet; the fallbacks are the widget palette. */
.lxd .lxd-i { fill:none; stroke:var(--lxd-accent, var(--color-primary, #2F50E4)); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.lxd .lxd-is { fill:var(--lxd-accent-soft, var(--color-primary-soft, #EBEEFD)); stroke:var(--lxd-accent, var(--color-primary, #2F50E4)); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.lxd .lxd-badf { fill:var(--lxd-bad-soft, #FDEBEC); stroke:var(--lxd-bad, #C42B2B); stroke-width:2; }
.lxd .lxd-badd { fill:var(--lxd-surface, var(--color-surface, #FFFFFF)); stroke:var(--lxd-bad, #C42B2B); stroke-width:2; stroke-dasharray:5 4; }
.lxd .lxd-okf { fill:var(--lxd-measure-soft, #E7F7F0); stroke:var(--lxd-measure, var(--color-success-text, #0E7531)); stroke-width:2; }