/* ============================================================
   MCE SERVICE PAGES, LIGHT DESIGN (2026-11-06), from the Marketing session's
   mock-ups. One sheet for every page-lsvc-*.php. Its own tokens (--ls-*), read
   by this sheet alone. A number in the panel is the number on screen: narrow
   screens SCALE a size with a multiplier, never replace it, and no clamp()
   touches anything the panel controls.
   ============================================================ */
:root{
  /* text sizes */
  --ls-h1:70px;--ls-lead:18px;--ls-eye:12px;--ls-btn-fs:16px;
  --ls-h2:44px;--ls-h2f:54px;--ls-h3:21px;--ls-txt:14px;
  /* colours */
  --ls-navy:#2B4055;--ls-ink:#34495E;--ls-body:#4F6376;--ls-mute:#718394;--ls-page:#F6F8FC;--ls-band:#EDF3F8;--ls-rule:#DFE5EC;
  --ls-b1:#4BAFE7;--ls-b2:#3A8DD2;--ls-b3:#1B5AC4;--ls-b4:#174DAC;
  --ls-btn:#0072CE;--ls-btn2:#03467C;--ls-blue:#0072CE;--ls-deep:#02263F;
  /* layout */
  --ls-wrap:1160px;--ls-sec:72px;--ls-r:18px;--ls-flow:7s;
  /* multipliers */
  --ls-h1-mul:1;--ls-h2-mul:1;--ls-sec-mul:1
}
@media(max-width:1280px){:root{--ls-h1-mul:calc(62 / 70)}}
@media(max-width:1080px){:root{--ls-h1-mul:calc(56 / 70);--ls-h2-mul:.86;--ls-sec-mul:.86}}
@media(max-width:767px){:root{--ls-h1-mul:calc(46 / 70);--ls-h2-mul:.74;--ls-sec-mul:.8}}
@media(max-width:400px){:root{--ls-h1-mul:calc(42 / 70);--ls-h2-mul:.7}}

@keyframes lsFlow{to{background-position:220% center}}
html{scroll-behavior:smooth}
#edWrap.lspage{background:var(--ls-page);color:var(--ls-ink);font-family:var(--font);font-size:16px;line-height:1.55;font-weight:400;overflow-x:clip}
#edWrap.lspage *{box-sizing:border-box}
#edWrap.lspage h1,#edWrap.lspage h2,#edWrap.lspage h3,#edWrap.lspage p{margin:0;font-family:inherit}
#edWrap.lspage a{color:inherit;text-decoration:none}
#edWrap.lspage [id]{scroll-margin-top:calc(var(--mce-hdr,60px) + 20px)}
#edWrap.lspage .ls-in{width:min(var(--ls-wrap),calc(100% - 48px));margin:0 auto;position:relative}
#edWrap.lspage a:focus-visible{outline:2px solid #8A6415;outline-offset:3px}
#edWrap.lspage .ls-sec{padding:calc(var(--ls-sec) * var(--ls-sec-mul)) 0}
#edWrap.lspage .ls-white{background:#fff}
#edWrap.lspage .ls-band{background:var(--ls-band)}

#edWrap.lspage .ls-eye{color:var(--ls-blue);font-size:var(--ls-eye);font-weight:650;letter-spacing:.17em;text-transform:uppercase}
#edWrap.lspage .ls-flow{display:inline-block;color:transparent;-webkit-text-fill-color:transparent;background-image:linear-gradient(100deg,var(--ls-b1),var(--ls-b2),var(--ls-b3),var(--ls-b4),var(--ls-b3),var(--ls-b2),var(--ls-b1));background-size:240% auto;-webkit-background-clip:text;background-clip:text;animation:lsFlow var(--ls-flow) linear infinite;padding-bottom:.09em;margin-bottom:-.09em}
#edWrap.lspage .ls-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
#edWrap.lspage .ls-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1px solid transparent;border-radius:999px;font-size:var(--ls-btn-fs);font-weight:600;color:#fff;background-image:linear-gradient(135deg,var(--ls-btn),var(--ls-btn2));box-shadow:0 14px 30px rgba(0,114,206,.22);transition:transform .2s ease,background .2s ease}
#edWrap.lspage .ls-btn{position:relative;overflow:hidden}
#edWrap.lspage .ls-btn::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);background-size:250% 100%;background-position:120% 0;transition:background-position .7s ease}
#edWrap.lspage .ls-btn:hover{transform:translateY(-1px);box-shadow:0 18px 40px rgba(0,114,206,.32)}
#edWrap.lspage .ls-btn:hover::after{background-position:-20% 0}
#edWrap.lspage .ls-btn-2{color:var(--ls-navy);border-color:rgba(18,57,95,.16);background-image:none;background-color:#fff;box-shadow:none}
#edWrap.lspage .ls-btn-2::after{background-image:linear-gradient(105deg,transparent 35%,rgba(0,114,206,.12) 50%,transparent 65%)}
#edWrap.lspage .ls-btn-2:hover{border-color:rgba(0,114,206,.4);box-shadow:0 14px 30px rgba(18,57,95,.12)}

/* compact service header */
#edWrap.lspage .ls-hero{position:relative;overflow:hidden;padding:calc(58px * var(--ls-sec-mul)) 0 calc(70px * var(--ls-sec-mul));background:linear-gradient(180deg,#FCFDFF,#F3F7FB);border-bottom:1px solid rgba(18,57,95,.08)}
#edWrap.lspage .ls-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.38;background-image:linear-gradient(rgba(18,57,95,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(18,57,95,.08) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:linear-gradient(to bottom,black,transparent 84%);mask-image:linear-gradient(to bottom,black,transparent 84%)}
#edWrap.lspage .ls-crumb{color:var(--ls-mute);font-size:13px}
#edWrap.lspage .ls-crumb a:hover{color:var(--ls-navy)}
#edWrap.lspage .ls-crumb b{color:var(--ls-navy);font-weight:600}
#edWrap.lspage .ls-herogrid{display:grid;grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);gap:56px;align-items:center;margin-top:28px}
#edWrap.lspage .ls-h1{margin:0 0 20px;font-size:calc(var(--ls-h1) * var(--ls-h1-mul));font-weight:500;line-height:1.03;letter-spacing:-.04em;color:var(--ls-navy)}
#edWrap.lspage .ls-h1k{display:block;margin-bottom:14px;line-height:1.5}
#edWrap.lspage .ls-lead{max-width:620px;color:var(--ls-body);font-size:var(--ls-lead)}
#edWrap.lspage .ls-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
#edWrap.lspage .ls-chip{padding:8px 12px;border:1px solid rgba(18,57,95,.1);border-radius:999px;color:var(--ls-mute);background:rgba(255,255,255,.72);font-size:12px}

/* the illustrated data hall. The buttons are radios and labels: no script needed. */
#edWrap.lspage .ls-mshell{position:relative;min-width:0;padding:18px;border:1px solid rgba(18,57,95,.11);border-radius:28px;background:rgba(255,255,255,.76);box-shadow:0 24px 70px rgba(18,57,95,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
#edWrap.lspage .ls-halltop{display:flex;flex-wrap:wrap;align-items:center;gap:0 5px;margin:2px 4px 14px;color:var(--ls-mute);font-size:12px}
#edWrap.lspage .ls-hallt{color:var(--ls-navy);font-weight:600}
#edWrap.lspage .ls-hallg{margin-left:auto}
#edWrap.lspage .ls-radio{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
#edWrap.lspage .ls-hall{display:block;width:100%;height:auto;border:1px solid rgba(18,57,95,.09);border-radius:20px;background:linear-gradient(180deg,#FBFDFF,#EEF4FA)}
#edWrap.lspage .ls-s1{stop-color:var(--ls-blue)}
#edWrap.lspage .ls-s2{stop-color:var(--ls-btn2)}
#edWrap.lspage .ls-s4{stop-color:var(--ls-blue)}
#edWrap.lspage .ls-floor{fill:url(#lsgFloor);stroke:rgba(18,57,95,.14);stroke-width:1.2}
#edWrap.lspage .ls-gl{stroke:rgba(18,57,95,.09);stroke-width:1}
#edWrap.lspage .ls-zone{fill:rgba(0,114,206,.07);stroke:rgba(0,114,206,.55);stroke-width:2;stroke-dasharray:8 7}
#edWrap.lspage .ls-pipe,#edWrap.lspage .ls-pipeb,#edWrap.lspage .ls-pow{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s ease,stroke-width .25s ease}
#edWrap.lspage .ls-pipe{stroke:var(--ls-blue);stroke-opacity:.72;stroke-width:9}
#edWrap.lspage .ls-pipeb{stroke:var(--ls-blue);stroke-opacity:.74;stroke-width:6}
/* Alicia, 2026-11-08: two power paths into the AI zone, A black and B red; the cooling loop is double-ended (both ends back at the plant) */
#edWrap.lspage .ls-pow{stroke:#1B1F24;stroke-width:8}
#edWrap.lspage .ls-powb{stroke:#D32F2F}
#edWrap.lspage .ls-node.ls-nodeb{stroke:#D32F2F;stroke-opacity:.6}
#edWrap.lspage .ls-node.ls-cnode{stroke:var(--ls-blue);stroke-opacity:.72}
#edWrap.lspage .ls-loop .ls-pipe,#edWrap.lspage .ls-loop .ls-pipeb{stroke-opacity:1}
#edWrap.lspage .ls-hang{stroke:var(--ls-blue);stroke-opacity:.35;stroke-width:1.5;stroke-dasharray:3 4}
#edWrap.lspage .ls-node{fill:#fff;stroke:var(--ls-deep);stroke-opacity:.38;stroke-width:2}
#edWrap.lspage .ls-rack{transition:opacity .25s ease,filter .25s ease}
#edWrap.lspage .ls-rf{fill:url(#lsgRack);stroke:rgba(18,57,95,.16)}
#edWrap.lspage .ls-rs{fill:#CBD8E7;stroke:rgba(18,57,95,.13)}
#edWrap.lspage .ls-rt{fill:#F8FBFE;stroke:rgba(18,57,95,.12)}
#edWrap.lspage .ls-rl{stroke:rgba(255,255,255,.48);stroke-width:1}
#edWrap.lspage .ls-rd{fill:#65E2A3}
#edWrap.lspage .ls-ai .ls-rf{fill:url(#lsgAi);stroke:rgba(2,38,63,.42)}
#edWrap.lspage .ls-ai .ls-rs{fill:#6F8FD7;stroke:rgba(2,38,63,.32)}
#edWrap.lspage .ls-ai .ls-rt{fill:#E8F7FF;stroke:rgba(2,38,63,.26)}
#edWrap.lspage .ls-ai .ls-rd{fill:#fff}
#edWrap.lspage .ls-call{fill:none;stroke:rgba(18,57,95,.28);stroke-width:1.2}
#edWrap.lspage .ls-lab{fill:var(--ls-navy);font-size:21px;font-weight:600;paint-order:stroke;stroke:#fff;stroke-width:6px;stroke-linejoin:round}
#edWrap.lspage .ls-lab2{fill:var(--ls-mute);font-size:19px}
#edWrap.lspage #lsV1:checked~.ls-hall .ls-rack:not(.ls-ai){opacity:.38}
#edWrap.lspage #lsV1:checked~.ls-hall .ls-ai{filter:drop-shadow(0 10px 12px rgba(2,38,63,.2))}
#edWrap.lspage #lsV2:checked~.ls-hall .ls-rack{opacity:.36}
#edWrap.lspage #lsV2:checked~.ls-hall .ls-ai{opacity:.78}
#edWrap.lspage #lsV2:checked~.ls-hall .ls-pow{stroke-width:12;filter:drop-shadow(0 5px 8px rgba(2,38,63,.24))}
#edWrap.lspage #lsV3:checked~.ls-hall .ls-rack{opacity:.42}
#edWrap.lspage #lsV3:checked~.ls-hall .ls-pipe,#edWrap.lspage #lsV3:checked~.ls-hall .ls-pipeb{stroke:var(--ls-blue);stroke-opacity:1;stroke-width:12;filter:drop-shadow(0 5px 8px rgba(0,114,206,.3))}
#edWrap.lspage .ls-mpanel{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:18px;margin-top:16px;align-items:stretch}
#edWrap.lspage .ls-syslist{display:flex;flex-wrap:wrap;gap:8px;align-content:start}
#edWrap.lspage .ls-sys{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid rgba(18,57,95,.12);border-radius:999px;color:var(--ls-mute);background:#fff;font-size:12px;font-weight:600;cursor:pointer}
#edWrap.lspage .ls-sys::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dot)}
#edWrap.lspage .ls-sys1{--dot:var(--ls-btn2)}
#edWrap.lspage .ls-sys2{--dot:var(--ls-deep)}
#edWrap.lspage .ls-sys3{--dot:var(--ls-blue)}
#edWrap.lspage #lsV1:checked~.ls-mpanel .ls-sys1,#edWrap.lspage #lsV2:checked~.ls-mpanel .ls-sys2,#edWrap.lspage #lsV3:checked~.ls-mpanel .ls-sys3{color:var(--ls-navy);border-color:rgba(0,114,206,.32);background:#EEF6FD}
#edWrap.lspage #lsV1:focus-visible~.ls-mpanel .ls-sys1,#edWrap.lspage #lsV2:focus-visible~.ls-mpanel .ls-sys2,#edWrap.lspage #lsV3:focus-visible~.ls-mpanel .ls-sys3{outline:2px solid #8A6415;outline-offset:2px}
#edWrap.lspage .ls-reads{min-height:104px;padding:16px;border:1px solid rgba(18,57,95,.1);border-radius:16px;background:rgba(246,248,252,.86)}
#edWrap.lspage .ls-read{display:none}
#edWrap.lspage #lsV1:checked~.ls-mpanel .ls-read1,#edWrap.lspage #lsV2:checked~.ls-mpanel .ls-read2,#edWrap.lspage #lsV3:checked~.ls-mpanel .ls-read3{display:block}
body.picking #edWrap.lspage .ls-read{display:block;margin-bottom:10px}
#edWrap.lspage .ls-readh{color:var(--ls-navy);font-size:15px;font-weight:600}
#edWrap.lspage .ls-readt{margin-top:6px;color:var(--ls-mute);font-size:12px;line-height:1.45}

/* AI Upgrade & Retrofit (2026-11-08): the hero photo, air- and liquid-cooled halls side by side (it replaced the phased diagram). */
#edWrap.lsrf .ls-rfphoto{margin:0}
#edWrap.lsrf .ls-rfimg{display:block;border-radius:24px;overflow:hidden;background:#E8F1F8;box-shadow:0 30px 70px rgba(2,38,63,.16);aspect-ratio:1.5}
#edWrap.lsrf .ls-rfcap{margin-top:12px;color:var(--ls-mute);font-size:13px;line-height:1.45}
#edWrap.lsrf .ls-rfimg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
@media(max-width:1024px){#edWrap.lsrf .ls-rfimg{aspect-ratio:1.79}}

/* sections */
#edWrap.lspage .ls-head{max-width:860px;margin-bottom:34px}
#edWrap.lspage .ls-h2{margin-top:10px;font-size:calc(var(--ls-h2) * var(--ls-h2-mul));font-weight:500;line-height:1.08;letter-spacing:-.035em;color:var(--ls-navy)}
#edWrap.lspage .ls-sub{margin-top:14px;color:var(--ls-mute)}
#edWrap.lspage .ls-num{color:var(--ls-blue);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--ls-eye);font-weight:750}
#edWrap.lspage .ls-h3{font-size:var(--ls-h3);font-weight:500;line-height:1.15;color:var(--ls-navy)}
#edWrap.lspage .ls-txt{color:var(--ls-mute);font-size:var(--ls-txt)}
#edWrap.lspage .ls-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#edWrap.lspage .ls-out{min-height:220px;padding:24px;border:1px solid var(--ls-rule);border-radius:var(--ls-r);background:var(--ls-page)}
#edWrap.lspage .ls-out .ls-h3{margin:48px 0 10px}
#edWrap.lspage .ls-rev{display:grid;grid-template-columns:minmax(0,1fr);gap:34px}
#edWrap.lspage .ls-revcopy{max-width:820px}
#edWrap.lspage .ls-revlist{border-top:1px solid var(--ls-rule)}
#edWrap.lspage .ls-revi{display:grid;grid-template-columns:52px 160px minmax(0,1fr);gap:20px;padding:24px 0;border-bottom:1px solid var(--ls-rule)}
#edWrap.lspage .ls-revi .ls-h3{font-size:calc(var(--ls-h3) - 1px)}
#edWrap.lspage .ls-steps{max-width:860px}
#edWrap.lspage .ls-step{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:22px;padding-bottom:34px}
#edWrap.lspage .ls-step:last-child{padding-bottom:0}
#edWrap.lspage .ls-step::after{content:"";position:absolute;left:24px;top:52px;bottom:6px;width:1px;background:var(--ls-rule)}
#edWrap.lspage .ls-step:last-child::after{display:none}
#edWrap.lspage .ls-stepn{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(0,114,206,.24);border-radius:50%;color:var(--ls-blue);background:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:750}
#edWrap.lspage .ls-step .ls-h3{margin:2px 0 8px;font-size:calc(var(--ls-h3) + 1px)}
#edWrap.lspage .ls-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
#edWrap.lspage .ls-list{display:grid;gap:12px;margin-top:22px}
#edWrap.lspage .ls-item{padding:18px;border:1px solid var(--ls-rule);border-radius:calc(var(--ls-r) * .89);background:rgba(255,255,255,.82)}
#edWrap.lspage .ls-itemh{font-size:16px;font-weight:600;line-height:1.3;color:var(--ls-navy)}
#edWrap.lspage .ls-faq{max-width:840px}
#edWrap.lspage .ls-prose{max-width:860px}
#edWrap.lspage .ls-prose .ls-head{margin-bottom:18px}
#edWrap.lspage .ls-para{margin-top:16px;color:var(--ls-body);font-size:calc(var(--ls-txt) + 2px);line-height:1.65}
#edWrap.lspage .ls-more{margin-top:16px}
#edWrap.lspage .ls-g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
#edWrap.lspage .ls-g3>.ls-item,#edWrap.lspage .ls-g4>.ls-item{background:#fff}
#edWrap.lspage .ls-relk{color:var(--ls-blue);transition:color .2s ease}
#edWrap.lspage .ls-relk:hover{color:#8A6415}
#edWrap.lspage .ls-faqi{padding:22px 0;border-top:1px solid var(--ls-rule)}
#edWrap.lspage .ls-h3b{margin-bottom:8px;font-size:calc(var(--ls-h3) - 2px);font-weight:500;line-height:1.2;color:var(--ls-navy)}
#edWrap.lspage .ls-faqa{color:var(--ls-mute);font-size:var(--ls-txt)}
/* FAQ as the hub's hover-to-open cards (Why MCE), WITH the hub's plus sign (Alicia, 2026-11-09: first "without plus signs",
   then "you do need a plus sign, otherwise wont know there is more to read"); it turns to an x when the card opens.
   Two independent columns so a card opening moves only its own column; front.js opens on hover. */
#edWrap.lspage .ls-accs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;align-items:start}
#edWrap.lspage .ls-acccol{display:grid;gap:14px;min-width:0}
#edWrap.lspage .ls-acc{padding:0;border:1px solid var(--ls-rule);border-radius:var(--ls-r);background:rgba(246,248,252,.82);box-shadow:0 14px 40px rgba(18,57,95,.06);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
#edWrap.lspage .ls-acc[open]{border-color:var(--ls-blue);box-shadow:0 14px 40px rgba(18,57,95,.1)}
#edWrap.lspage .ls-acc>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px}
#edWrap.lspage .ls-acc>summary::-webkit-details-marker{display:none}
#edWrap.lspage .ls-acc .ls-h3b{margin:0;font-size:calc(var(--ls-txt) + 2px);font-weight:700;line-height:1.3;letter-spacing:normal;text-align:left}
#edWrap.lspage .ls-pm{flex:none;color:var(--ls-blue);font-size:22px;font-weight:600;line-height:1;transition:transform .2s ease} /* the hub's .hp-pm, on this family's blue */
#edWrap.lspage .ls-acc[open] .ls-pm{transform:rotate(45deg)}
#edWrap.lspage .ls-acc>.ls-faqa{margin:0;padding:0 20px 20px;font-size:calc(var(--ls-txt) - 1px)}
@media(max-width:900px){#edWrap.lspage .ls-accs{grid-template-columns:minmax(0,1fr)}}

/* closing */
#edWrap.lspage .ls-final{padding:calc(84px * var(--ls-sec-mul)) 0;background:linear-gradient(135deg,#EEF5FC,#fff);border-top:1px solid rgba(18,57,95,.08)}
#edWrap.lspage .ls-h2f{max-width:720px;margin:10px 0 16px;font-size:calc(var(--ls-h2f) * var(--ls-h2-mul));font-weight:500;line-height:1.05;letter-spacing:-.04em;color:var(--ls-navy)}
#edWrap.lspage .ls-finalp{max-width:620px;color:var(--ls-body)}

@media(max-width:1080px){
  #edWrap.lspage .ls-herogrid,#edWrap.lspage .ls-two,#edWrap.lspage .ls-g3{grid-template-columns:minmax(0,1fr)}
  #edWrap.lspage .ls-g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  #edWrap.lspage .ls-mshell{width:100%;max-width:760px}
  #edWrap.lspage .ls-out{min-height:0}
  #edWrap.lspage .ls-out .ls-h3{margin-top:28px}
}
@media(max-width:680px){
  #edWrap.lspage .ls-in{width:calc(100% - 32px)}
  #edWrap.lspage .ls-mpanel,#edWrap.lspage .ls-g4{grid-template-columns:minmax(0,1fr)}
  #edWrap.lspage .ls-mshell{padding:12px 12px 14px}
  #edWrap.lspage .ls-lab,#edWrap.lspage .ls-call{display:none}
  #edWrap.lspage .ls-revi{grid-template-columns:40px minmax(0,1fr);gap:6px 12px}
  #edWrap.lspage .ls-revi .ls-txt{grid-column:2}
  #edWrap.lspage .ls-step{grid-template-columns:52px minmax(0,1fr);gap:14px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #edWrap.lspage .ls-flow{animation:none}
  #edWrap.lspage *{transition:none!important}
}
/* AI Upgrade & Retrofit only: headlines break evenly, never one word alone on a line (the live AI Readiness page is left as approved) */
#edWrap.lsrf :is(.ls-h2,.ls-h2f){text-wrap:balance}