/* =====================================================================
   Business Systems Implementation page (loads after bpa.css)
   Scroll-linked: elements read --p (0 → 1) set by bsi.js from the scroll position.
   ===================================================================== */
main>section{overflow-x:clip}
.tagline{display:inline-flex;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--turq-d)}
.ah-cta .ln{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--turq)}
.ah-cta .ln svg{width:14px;height:14px}
html.sl-on .rv,html.sl-on .rv.in{transition:none!important;opacity:clamp(0,calc(.05 + var(--p,1) * 1.2),1);transform:translate3d(0,calc((1 - var(--p,1)) * 70px),0)}
html.sl-on .rv.sr-l,html.sl-on .rv.sr-l.in{transform:translate3d(calc((1 - var(--p,1)) * -110px),0,0)}
html.sl-on .rv.sr-r,html.sl-on .rv.sr-r.in{transform:translate3d(calc((1 - var(--p,1)) * 110px),0,0)}
html.sl-on .rv.sr-z,html.sl-on .rv.sr-z.in{transform:scale(calc(.88 + var(--p,1) * .12))}
html.sl-on .sec-head{transform:translate3d(0,calc((1 - var(--p,1)) * 40px),0);opacity:clamp(0,calc(.1 + var(--p,1) * 1.3),1)}
html.sl-on .bs-hero .ah-viz{transform:translate3d(0,calc(var(--hp,0) * -70px),0) scale(calc(1 - var(--hp,0) * .06))}
html.sl-on .bs-hero .ah-l{transform:translate3d(0,calc(var(--hp,0) * 40px),0);opacity:calc(1 - var(--hp,0) * .7)}

/* ---------- 1. Hero illustration ---------- */
.bs-hx{display:block;width:100%;height:auto;font-family:inherit}
.bh-sh rect{fill:rgba(255,255,255,.08);stroke:rgba(127,198,221,.55);stroke-width:1.3}
.bh-sh path{stroke:rgba(127,198,221,.3);stroke-width:1}
.bh-sh{animation:bhSh 6s ease-in-out infinite}
.bh-sh.s1{animation-delay:.4s}.bh-sh.s2{animation-delay:.8s}
@keyframes bhSh{0%,100%{opacity:1}50%{opacity:.6}}
.bh-t{font-size:12px;font-weight:800;fill:#CDE9F2}
.bh-p{fill:none;stroke:rgba(127,198,221,.55);stroke-width:2;stroke-dasharray:1 7;stroke-linecap:round}
.bh-sys{fill:#fff}
.bh-m rect{fill:#F1F8FA;stroke:#D3E1E7}
.bh-mi{fill:var(--navy)}
.bh-mt{font-size:12.5px;font-weight:800;fill:var(--navy)}
.bh-m{animation:bhM 6s ease infinite}
.bh-m.m1{animation-delay:1.5s}.bh-m.m2{animation-delay:3s}.bh-m.m3{animation-delay:4.5s}
@keyframes bhM{0%,20%{opacity:1}8%{opacity:1}10%,18%{filter:drop-shadow(0 0 0 transparent)}}
.bh-m rect{animation:bhMr 6s ease infinite;animation-delay:inherit}
.bh-m.m0 rect{animation-delay:0s}.bh-m.m1 rect{animation-delay:1.5s}.bh-m.m2 rect{animation-delay:3s}.bh-m.m3 rect{animation-delay:4.5s}
@keyframes bhMr{0%,4%{fill:#F1F8FA;stroke:#D3E1E7}8%,20%{fill:rgba(91,251,194,.3);stroke:#5BFBC2}26%,100%{fill:#F1F8FA;stroke:#D3E1E7}}
.bh-team{fill:rgba(255,255,255,.08);stroke:rgba(127,198,221,.55);stroke-width:1.3}
.bh-av circle{fill:var(--mint)}
.bh-av.a1 circle{fill:#7FC6DD}.bh-av.a2 circle{fill:#E3EEF2}
.bh-dot{fill:var(--mint);stroke:var(--navy);stroke-width:2;filter:drop-shadow(0 0 5px rgba(91,251,194,.9))}
@media (prefers-reduced-motion:reduce){.bh-sh,.bh-m,.bh-m rect{animation:none}.bh-dot{display:none}}

/* ---------- 2. Signs: spreadsheet ---------- */
.bs-signs{background:var(--white)}
.xs{border-radius:18px;background:#fff;border:1px solid #CFDDE3;box-shadow:0 40px 80px -56px rgba(16,43,70,.6);overflow:hidden}
.xs-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#EEF4F6;border-bottom:1px solid #CFDDE3}
.xs-dots{display:flex;gap:6px}.xs-dots i{width:10px;height:10px;border-radius:50%;background:#C6D6DD}.xs-dots i:first-child{background:var(--mint)}
.xs-fx{font-size:.78rem;font-weight:800;font-style:italic;color:#7A8D97}
.xs-cell{flex:1;height:22px;border-radius:6px;background:#fff;border:1px solid #D7E3E8}
.xs-cols{display:grid;grid-template-columns:42px minmax(0,36fr) minmax(0,64fr);background:#F5F9FA;border-bottom:1px solid #D7E3E8;font-size:.74rem;font-weight:800;color:#7A8D97}
.xs-cols span{padding:6px 14px;border-right:1px solid #E3ECF0;text-align:center}
.xs-rows{list-style:none;margin:0;padding:0}
.xs-r{position:relative;display:grid;grid-template-columns:42px minmax(0,36fr) minmax(0,64fr);border-bottom:1px solid #E3ECF0;transition:background .35s}
.xs-gut{background:#F5F9FA;border-right:1px solid #E3ECF0}
.xs-a{display:flex;align-items:center;gap:12px;padding:16px 16px;border-right:1px solid #E3ECF0}
.xs-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#EAF4F7;color:var(--turq);transition:background .35s,color .35s}
.xs-ic svg{width:19px;height:19px}
.xs-a h3{margin:0;font-size:1.02rem;font-weight:800;letter-spacing:-.01em;color:var(--navy)}
.xs-b{margin:0;padding:16px 18px;font-size:.92rem;line-height:1.6;color:#000;align-self:center}
.xs-r.on{background:rgba(91,251,194,.12)}
.xs-r.on::after{content:"";position:absolute;inset:-1px 0 -1px 42px;border:2.5px solid var(--turq);border-radius:4px;pointer-events:none}
.xs-r.on .xs-ic{background:var(--navy);color:var(--mint)}
.xs-tabs{display:flex;align-items:center;gap:4px;padding:8px 12px;background:#EEF4F6}
.xs-tabs i{width:70px;height:20px;border-radius:6px 6px 0 0;background:#DDE8EC}
.xs-tabs i.on{background:#fff;box-shadow:0 -2px 0 var(--mint) inset}
.xs-tabs b{margin-left:6px;color:#7A8D97;font-weight:800}
@media (max-width:760px){.xs-cols{display:none}.xs-r{grid-template-columns:1fr}.xs-gut{display:none}.xs-a{border-right:0;padding-bottom:4px}.xs-b{padding-top:4px;padding-left:68px}.xs-r.on::after{inset:-1px 0}}

/* ---------- 3. Services: app windows ---------- */
.aw{display:grid;gap:20px}
@media (min-width:900px){.aw{grid-template-columns:1fr 1fr;gap:24px}}
.aw-w{display:flex;flex-direction:column;border-radius:20px;background:#fff;border:1px solid #D3E1E7;overflow:hidden;box-shadow:0 30px 60px -46px rgba(16,43,70,.6);transition:transform .35s var(--ease),box-shadow .35s}
.aw-w:hover{transform:translateY(-5px);box-shadow:0 36px 70px -44px rgba(16,43,70,.65)}
html.sl-on .aw-w.rv{transform:translate3d(0,calc((1 - var(--p,1)) * (60px + var(--i) * 20px)),0)}
.aw-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:linear-gradient(120deg,#1D6A90,#102B46);color:#fff}
.aw-dots{display:flex;gap:5px}.aw-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3)}
.aw-app{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--mint);color:var(--navy)}
.aw-app svg{width:16px;height:16px}
.aw-bar b{font-size:1.05rem;font-weight:800;letter-spacing:-.01em}
.aw-ui{padding:18px 18px 4px;background:linear-gradient(180deg,#F3FAFB,#fff)}
.aw-w>p{margin:0;padding:12px 20px 22px;font-size:.93rem;line-height:1.65;color:#000}
.ui-erp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ui-mod{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;border-radius:12px;background:#fff;border:1px solid #DCE7EC;font-size:.78rem;font-weight:800;color:var(--navy);text-align:center}
.ui-mod i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--navy);color:var(--mint)}
.ui-mod i svg{width:17px;height:17px}
.ui-crm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ui-col{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;background:#EEF5F8}
.ui-col b{font-size:.76rem;font-weight:800;color:var(--navy)}
.ui-col span{height:22px;border-radius:7px;background:#fff;border:1px solid #DCE7EC;position:relative}
.ui-col span::before{content:"";position:absolute;left:8px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--mint)}
.ui-col:nth-child(2) span::before{background:var(--turq)}.ui-col:nth-child(3) span::before{background:var(--navy)}
.ui-acc{display:grid;gap:8px}
.ui-row{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center;padding:8px 12px;border-radius:10px;background:#fff;border:1px solid #DCE7EC}
.ui-row b{font-size:.8rem;font-weight:800;color:var(--navy)}
.ui-row span{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--turq),var(--mint));width:calc(var(--w) * var(--p,1))}
.ui-hr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ui-tile{display:flex;align-items:center;gap:10px;padding:14px 12px;border-radius:12px;background:#fff;border:1px solid #DCE7EC}
.ui-tile i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(91,251,194,.3);color:var(--navy)}
.ui-tile i svg{width:17px;height:17px}
.ui-tile b{font-size:.8rem;font-weight:800;color:var(--navy);line-height:1.25;min-width:0}
@media (max-width:520px){.ui-erp{grid-template-columns:repeat(2,minmax(0,1fr))}.ui-hr{grid-template-columns:1fr}.ui-crm{grid-template-columns:1fr}.ui-row{grid-template-columns:96px 1fr}}
.aw-note{margin:22px 0 0;padding:16px 20px;border-radius:16px;background:#fff;border:1px solid var(--line);font-size:.96rem;line-height:1.65;color:#000}
.aw-note a{font-weight:800;color:var(--turq);text-decoration:none;border-bottom:2px solid rgba(91,251,194,.8)}
.aw-note a:hover{color:var(--navy)}

/* ---------- 4. In practice: canvas + track ---------- */
.bs-ip{background:var(--white)}
.cv{border-radius:28px;padding:clamp(16px,2.4vw,26px);background:linear-gradient(180deg,#F3FAFB,#fff);border:1px solid var(--line)}
.cv-stage{position:relative;margin-top:10px;aspect-ratio:720/300;border-radius:20px;background:#EAF4F7;overflow:hidden}
.cv-s{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:translateY(14px) scale(.98);transition:opacity .5s var(--ease),transform .5s var(--ease);font-family:inherit}
.cv-s.on{opacity:1;transform:none}
.c-card{fill:#fff;stroke:#D3E1E7;stroke-width:1.4}
.c-row{fill:#F3F8FA;stroke:#DCE7EC}
.c-h{font-size:15px;font-weight:800;fill:var(--navy)}
.c-t{font-size:13px;font-weight:800;fill:var(--navy)}
.c-hw{font-size:15px;font-weight:800;fill:#fff}
.c-hw2{font-size:12.5px;font-weight:800;fill:#CDE9F2}
.c-cap{font-size:12.5px;font-weight:800;fill:#4F6370}
.c-ok{fill:var(--mint)}.c-no{fill:#fff;stroke:#B8CCD4;stroke-width:1.5}
.c-okt{fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.c-sheet{fill:#fff;stroke:#C9D9E0;stroke-width:1.4}
.c-gl{stroke:#DCE7EC;stroke-width:1.2}
.c-top{fill:var(--navy)}
.c-in{fill:#fff;stroke:#C9D9E0}
.c-r-ok{fill:#F7FAFB;stroke:#E3ECF0}
.c-r-dup{fill:#FFF3E6;stroke:#F3C99A}
.c-r-miss{fill:#FFF3E6;stroke:#F3C99A}
.c-bar{fill:var(--navy)}.c-bar2{fill:#C9D9E0}
.c-gap{fill:none;stroke:#C4610C;stroke-width:1.6;stroke-dasharray:4 3}
.c-flag{font-size:11.5px;font-weight:800;fill:#C4610C}
.c-ar{fill:none;stroke:var(--turq);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.c-ln{fill:none;stroke:var(--turq);stroke-width:2.4;stroke-dasharray:1 7;stroke-linecap:round}
.c-dot{fill:var(--mint);stroke:var(--navy);stroke-width:2}
.c-dark{fill:var(--navy)}
.c-dr{fill:rgba(255,255,255,.1)}
.c-av0{fill:var(--mint)}.c-av1{fill:#7FC6DD}.c-av2{fill:#E3EEF2}
.c-colb{fill:rgba(255,255,255,.08);stroke:rgba(127,198,221,.35)}
.c-cardm{fill:#fff}
.cv-track{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
@media (min-width:1000px){.cv-track{grid-template-columns:repeat(6,minmax(0,1fr));gap:0;position:relative}
  .cv-track::before{content:"";position:absolute;left:8%;right:8%;top:17px;height:3px;border-radius:2px;background:#D3E1E7}
  .cv-track::after{content:"";position:absolute;left:8%;top:17px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--turq),var(--mint));width:calc(var(--tp,0) * 84%)}}
.cv-t button{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border:0;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--navy)}
@media (min-width:1000px){.cv-t{text-align:center;padding:0 6px}.cv-t button{flex-direction:column;gap:10px;text-align:center;padding:0}}
.cv-dot{position:relative;z-index:1;flex:none;width:36px;height:36px;border-radius:50%;background:#fff;border:3px solid #C9D9E0;transition:border-color .35s,background .35s,box-shadow .35s}
.cv-t.done .cv-dot{border-color:var(--turq);background:var(--turq)}
.cv-t.on .cv-dot{border-color:var(--navy);background:var(--mint);box-shadow:0 0 0 6px rgba(91,251,194,.3)}
.cv-t b{font-size:.92rem;font-weight:800;line-height:1.3;color:#4F6370;transition:color .3s}
.cv-t.on b{color:var(--navy)}
.cv-t p{margin:4px 0 0 58px;font-size:.88rem;line-height:1.55;color:#000;display:none}
.cv-t.on p{display:block}
@media (min-width:1000px){.cv-t p{margin:8px 0 0;font-size:.84rem}}
.cv-t button:focus-visible{outline:2.5px solid var(--turq);outline-offset:3px;border-radius:10px}
@media (min-width:1000px){html.sl-on .cv-wrap{height:calc(100vh * 2.6)}html.sl-on .cv-wrap .cv{position:sticky;top:calc(var(--nav-h) + 20px)}html.sl-on .cv-wrap .cv.rv{opacity:1;transform:none}}
@media (min-width:1000px) and (max-height:860px){.cv-stage{aspect-ratio:720/250}}
@media (prefers-reduced-motion:reduce){.cv-s{transition:none}}

/* ---------- 5. Outcomes: dashboard widgets ---------- */
.bs-out{position:relative;color:#fff;background:linear-gradient(150deg,#0E2A45 0%,#0B2038 55%,#081829 100%)}
.bs-out .clabel{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.bs-out .h2{color:#fff}
.bs-out .lede{color:rgba(255,255,255,.8)}
.wg{display:grid;gap:14px}
@media (min-width:700px){.wg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.wg{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto}.wg-c.w0{grid-row:1/3;display:flex;flex-direction:column;justify-content:center}}
.wg-c{padding:20px 22px;border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12)}
html.sl-on .wg-c.rv{transform:translate3d(0,calc((1 - var(--p,1)) * (50px + var(--i) * 18px)),0)}
.wg-c h3{margin:0;font-size:1.1rem;font-weight:800;letter-spacing:-.015em;color:#fff}
.wg-c p{margin:10px 0 0;font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.82)}
.wg-vis{margin-top:14px}
.wg-v{display:block;width:100%;max-width:200px;height:auto}
.wg-c.w0 .wg-v{max-width:190px;margin:10px auto}
.wg-trk{fill:none;stroke:rgba(255,255,255,.12);stroke-width:14}
.wg-arc{fill:none;stroke:var(--mint);stroke-width:14;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,1) * .86)}
.wg-in{fill:rgba(91,251,194,.12)}
.wg-av0{fill:var(--mint)}.wg-av1{fill:#7FC6DD}.wg-av2{fill:#E3EEF2}.wg-av3{fill:#5BFBC2;opacity:.6}
.wg-box{fill:rgba(255,255,255,.1);stroke:rgba(127,198,221,.6)}
.wg-lnk{fill:none;stroke:var(--mint);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,1))}
.wg-node{fill:var(--mint)}
.wg-b{fill:var(--turq);transform-box:fill-box;transform-origin:bottom;transform:scaleY(calc(.1 + var(--p,1) * .9))}
.wg-b:nth-child(4){fill:var(--mint)}
.wg-ln{fill:none;stroke:var(--mint);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,1))}

/* ---------- 6. Industries: horizontal photo accordion ---------- */
.bs-ind{background:var(--white)}
.ha{display:flex;gap:10px;height:440px}
.ha-p{position:relative;flex:1;min-width:0;border-radius:22px;overflow:hidden;cursor:pointer;background:var(--navy);transition:flex .7s var(--ease)}
.ha-p.on{flex:4.4}
.ha-p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.ha-p.on img{transform:scale(1.03)}
.ha-p::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,32,56,.15) 0%,rgba(11,32,56,.85) 100%);transition:background .5s}
.ha-p:not(.on)::after{background:linear-gradient(180deg,rgba(11,32,56,.55),rgba(11,32,56,.85))}
.ha-v{position:absolute;left:50%;bottom:22px;z-index:1;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);font-size:1rem;font-weight:800;color:#fff;white-space:nowrap;transition:opacity .4s}
.ha-p.on .ha-v{opacity:0}
.ha-c{position:absolute;left:26px;right:26px;bottom:24px;z-index:1;opacity:0;transform:translateY(14px);transition:opacity .45s .15s,transform .45s .15s var(--ease)}
.ha-p.on .ha-c{opacity:1;transform:none}
.ha-c h3{margin:0;font-size:1.4rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.ha-c h3::before{content:"";display:block;width:40px;height:4px;margin-bottom:12px;border-radius:2px;background:var(--mint)}
.ha-c p{margin:8px 0 0;max-width:52ch;font-size:.98rem;line-height:1.6;color:rgba(255,255,255,.92)}
.ha-p:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
@media (max-width:899px){.ha{flex-direction:column;height:auto}.ha-p,.ha-p.on{flex:none;height:auto;min-height:260px}.ha-v{display:none}.ha-c{opacity:1;transform:none;position:absolute}.ha-p::after{background:linear-gradient(180deg,rgba(11,32,56,.1) 20%,rgba(11,32,56,.9) 100%)!important}}
@media (prefers-reduced-motion:reduce){.ha-p,.ha-p img,.ha-c{transition:none}}

/* ---------- 7. Your next step ---------- */
.bs-next{padding-block:clamp(28px,4vw,44px);background:var(--white)}
.nx{display:grid;gap:20px;align-items:center;padding:clamp(22px,3vw,34px);border-radius:28px;background:linear-gradient(120deg,#DDFBEF 0%,#C9F5E5 50%,#BDEFE0 100%);border:1px solid #9FEAD0}
@media (min-width:900px){.nx{grid-template-columns:auto 1fr auto;gap:30px}}
.nx-ic{position:relative;width:120px;height:120px}
.nx-ic i{position:absolute;display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--navy);color:var(--mint);box-shadow:0 14px 26px -14px rgba(16,43,70,.6);animation:nxF 6s ease-in-out infinite;animation-delay:calc(var(--i) * -1.5s)}
.nx-ic i:nth-child(1){left:0;top:0}.nx-ic i:nth-child(2){right:0;top:0;background:#fff;color:var(--navy)}.nx-ic i:nth-child(3){left:0;bottom:0;background:#fff;color:var(--turq)}.nx-ic i:nth-child(4){right:0;bottom:0}
.nx-ic svg{width:24px;height:24px}
@keyframes nxF{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.nx .clabel{background:rgba(255,255,255,.6)}
.nx h2{margin:10px 0 0;font-size:clamp(1.4rem,2.5vw,2rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--navy)}
.nx p{margin:6px 0 0;font-size:1rem;line-height:1.6;color:#0B2038}
@media (max-width:899px){.nx-ic{display:none}}
@media (prefers-reduced-motion:reduce){.nx-ic i{animation:none}}

/* ---------- 8. Approach: plan that ticks off ---------- */
.pl-w{display:grid;gap:26px;align-items:start}
@media (min-width:1000px){.pl-w{grid-template-columns:minmax(0,36fr) minmax(0,64fr);gap:50px}.pl-h{position:sticky;top:calc(var(--nav-h) + 50px)}}
.pl{position:relative;padding:12px 26px 12px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 34px 70px -50px rgba(16,43,70,.6)}
.pl-bar{height:6px;margin:12px 0 6px;border-radius:3px;background:#E3ECF0;overflow:hidden}
.pl-bar i{display:block;height:100%;width:calc(var(--lp,1) * 100%);border-radius:3px;background:linear-gradient(90deg,var(--turq),var(--mint))}
.pl-l{list-style:none;margin:0;padding:0}
.pl-i{display:grid;grid-template-columns:auto auto 1fr;gap:16px;align-items:start;padding:20px 0;border-bottom:1px dashed #D3E1E7}
.pl-i:last-child{border-bottom:0}
.pl-chk{display:grid;place-items:center;width:30px;height:30px;margin-top:9px;border-radius:9px;border:2px solid #B8CCD4;background:#fff;transition:background .35s,border-color .35s}
.pl-chk svg{width:18px;height:18px;fill:none;stroke:var(--navy);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .45s var(--ease)}
.pl-i.done .pl-chk{background:var(--mint);border-color:var(--mint)}
.pl-i.done .pl-chk svg{stroke-dashoffset:0}
.pl-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#EAF4F7;color:var(--turq);transition:background .35s,color .35s}
.pl-i.done .pl-ic{background:var(--navy);color:var(--mint)}
.pl-ic svg{width:22px;height:22px}
.pl-i h3{margin:4px 0 0;font-size:1.1rem;font-weight:800;color:var(--navy)}
.pl-i p{margin:6px 0 0;font-size:.92rem;line-height:1.62;color:#000}
@media (max-width:520px){.pl{padding:10px 16px}.pl-i{grid-template-columns:auto 1fr}.pl-ic{display:none}}
@media (prefers-reduced-motion:reduce){.pl-chk svg{transition:none}}

/* ---------- 9. Why: fanned cards ---------- */
.bs-why{background:var(--white)}
.fn{display:grid;gap:18px}
@media (min-width:900px){.fn{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding:20px 0}}
.fn-c{position:relative;padding:28px 26px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 34px 60px -40px rgba(16,43,70,.55)}
.fn-c.c1{background:linear-gradient(150deg,#1D6A90,#102B46);border-color:transparent;color:#fff}
.fn-c.c1 h3{color:#fff}.fn-c.c1 p{color:rgba(255,255,255,.86)}
.fn-c.c1 .fn-ic{background:var(--mint);color:var(--navy)}
@media (min-width:900px){
  .fn-c.c0{transform:translate3d(calc((1 - var(--p,1)) * 105%),calc((1 - var(--p,1)) * 20px),0) rotate(calc((1 - var(--p,1)) * -7deg))}
  .fn-c.c2{transform:translate3d(calc((1 - var(--p,1)) * -105%),calc((1 - var(--p,1)) * 20px),0) rotate(calc((1 - var(--p,1)) * 7deg))}
  .fn-c.c1{z-index:2;transform:translateY(calc((1 - var(--p,1)) * -10px))}
}
.fn-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--navy);color:var(--mint)}
.fn-ic svg{width:26px;height:26px}
.fn-c h3{margin:18px 0 0;font-size:1.2rem;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.fn-c p{margin:10px 0 0;font-size:.95rem;line-height:1.65;color:#000}

/* ---------- 10. Technology: laptop launcher ---------- */
.lp{display:grid;gap:30px;align-items:center}
@media (min-width:1000px){.lp{grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:50px}}
.lp-tx .sec-head{margin-bottom:0}
.lp-note{margin:18px 0 0;padding-left:16px;border-left:4px solid var(--mint);font-size:.98rem;line-height:1.65;color:#000}
.lp-dev{max-width:640px;width:100%;margin:0 auto}
.lp-scr{padding:18px;border-radius:20px 20px 6px 6px;background:#0E2A45;border:10px solid #1C3550;box-shadow:0 40px 70px -40px rgba(16,43,70,.7)}
.lp-base{height:16px;margin:0 -6%;border-radius:0 0 18px 18px;background:linear-gradient(180deg,#C9D6DC,#A9BBC4)}
.lp-g{list-style:none;margin:0;padding:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-radius:12px;background:radial-gradient(120% 140% at 0% 0%,#1D6A90 0%,#102B46 60%)}
.lp-a{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 8px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);text-align:center;transition:background .3s,transform .3s var(--ease)}
.lp-a:hover{background:rgba(91,251,194,.14);transform:translateY(-3px)}
html.sl-on .lp-a{opacity:clamp(0,calc((var(--p,1) - var(--i) * .08) * 3),1)}
.lp-a span{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:linear-gradient(140deg,#5BFBC2,#1B7699);color:var(--navy)}
.lp-a span svg{width:24px;height:24px}
.lp-a b{font-size:.9rem;font-weight:800;color:#fff;line-height:1.25;min-width:0;overflow-wrap:anywhere}
@media (max-width:520px){.lp-g{grid-template-columns:repeat(2,minmax(0,1fr))}.lp-scr{padding:10px;border-width:7px}}

/* ---------- 11. After go-live ---------- */
.bs-agl{background:var(--white)}
.sg{display:grid;gap:30px;align-items:stretch}
@media (min-width:1000px){.sg{grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:50px}}
.sg-ph{margin:0;min-height:320px;border-radius:28px;overflow:hidden;box-shadow:0 34px 60px -40px rgba(16,43,70,.6)}
.sg-ph img{width:100%;height:100%;object-fit:cover}
.sg-tx .sec-head{margin-bottom:0}
.sg-lead{margin:18px 0 8px;font-size:1rem;font-weight:800;color:var(--navy)}
.sg-l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sg-l li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:12px 14px;border-radius:14px;background:#F6FBFC;border:1px solid var(--line)}
.sg-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--navy);color:var(--mint)}
.sg-ic svg{width:19px;height:19px}
.sg-l p{margin:0;font-size:.93rem;line-height:1.55;color:#000}
.sg-l b{color:var(--navy)}
.sg-note{margin:14px 0 0;font-size:.92rem;line-height:1.6;color:#33485A}
.sg-link{display:inline-flex;margin-top:12px;font-weight:800;color:var(--turq);text-decoration:none;border-bottom:2px solid rgba(91,251,194,.8)}
.sg-link:hover{color:var(--navy)}

/* ---------- 12. FAQ ---------- */
.fp{display:grid;gap:30px;align-items:start}
@media (min-width:1000px){.fp{grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:50px}.fp-ph{position:sticky;top:calc(var(--nav-h) + 40px)}}
.fp-ph{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 34px 60px -40px rgba(16,43,70,.6)}
.fp-ph img{width:100%;height:100%;object-fit:cover}
@media (max-width:999px){.fp-ph{aspect-ratio:16/9}}
.fp-l.faqs{border-top:0;display:grid;gap:10px}
.fp-i.faq{border-bottom:0;border-radius:16px;background:#fff;border:1px solid var(--line);transition:border-color .3s,box-shadow .3s}
.fp-i.faq.is-open{border-color:var(--turq);box-shadow:0 20px 40px -32px rgba(16,43,70,.5)}
.fp-i .faq-q{padding:16px 20px;font-size:1rem}
.fp-i .faq-a>p{padding:0 20px;font-size:.94rem;color:#000}
.fp-i.is-open .faq-a{padding-bottom:18px}

/* ---------- 13. Let's talk: animated gradient border ---------- */
.bs-close{background:var(--white)}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.lt{position:relative;padding:3px;border-radius:32px;background:conic-gradient(from var(--ang),#5BFBC2,#1B7699,#102B46,#1B7699,#5BFBC2);animation:ltSpin 7s linear infinite}
@keyframes ltSpin{to{--ang:360deg}}
.lt-in{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(34px,5vw,60px) 24px;border-radius:29px;background:radial-gradient(120% 140% at 50% 0%,#1D6A90 0%,#102B46 55%,#0B2038 100%);color:#fff}
.lt .clabel{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.lt h2{margin:14px 0 0;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;letter-spacing:-.035em;line-height:1.15;color:#fff;max-width:22ch}
.lt p{margin:12px 0 24px;font-size:1.02rem;line-height:1.6;color:rgba(255,255,255,.86);max-width:52ch}
@media (prefers-reduced-motion:reduce){.lt{animation:none}}
.bh-mt{font-size:12px}
@media (max-width:1100px){.ui-tile{flex-direction:column;text-align:center;gap:8px;padding:12px 8px}}

/* =====================================================================
   Mobile: long sections become swipeable rows or tap-to-open lists
   ===================================================================== */
.sw-dots{display:none}
@media (max-width:760px){
  .fn,.ha{display:grid!important;grid-auto-flow:column;grid-auto-columns:86%;grid-template-columns:none!important;grid-template-rows:none!important;gap:14px!important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -20px;padding:4px 20px 8px;scroll-padding:0 20px;height:auto!important}
  .fn::-webkit-scrollbar,.ha::-webkit-scrollbar{display:none}
  .fn>*,.ha>*{scroll-snap-align:start}
  html.sl-on .aw-w.rv,html.sl-on .wg-c.rv{transform:none!important;opacity:1!important}
  .fn-c{transform:none!important}
  .wg-c.w0{grid-row:auto!important}
  .ha-p,.ha-p.on{min-height:360px;flex:none}
  .ha-p img{transform:none!important}
  .sw-dots{display:flex;justify-content:center;gap:7px;margin-top:12px}
  .sw-dots i{width:8px;height:8px;border-radius:50%;background:#C9D9E0;transition:width .3s,background .3s}
  .sw-dots i.on{width:22px;border-radius:4px;background:var(--turq)}
  .bs-out .sw-dots i{background:rgba(255,255,255,.25)}.bs-out .sw-dots i.on{background:var(--mint)}
  /* approach: tap a step to read it */
  .pl-i{cursor:pointer;align-items:center}
  .pl-i>div{position:relative;padding-right:28px}
  .pl-i>div::after{content:"";position:absolute;right:4px;top:10px;width:9px;height:9px;border-right:2.5px solid var(--turq);border-bottom:2.5px solid var(--turq);transform:rotate(45deg);transition:transform .3s}
  .pl-i.open>div::after{transform:rotate(-135deg);top:14px}
  .pl-i p{display:none}
  .pl-i.open p{display:block}
  .pl-chk{margin-top:0}
  .pl-i{padding:16px 0}
  /* shorter photos */
  .sg-ph{min-height:0;aspect-ratio:16/9}
  .fp-ph{aspect-ratio:16/8}
  .xs-b{font-size:.88rem}
}
@media (max-width:760px){
  .xs-r{cursor:pointer}
  .xs-a{position:relative;padding-right:40px}
  .xs-a::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2.5px solid var(--turq);border-bottom:2.5px solid var(--turq);transform:rotate(45deg);transition:transform .3s}
  .xs-r.open .xs-a::after{transform:rotate(-135deg);margin-top:-2px}
  .xs-b{display:none}
  .xs-r.open .xs-b{display:block}
  .xs-a{padding:14px 40px 14px 14px}
}

/* =====================================================================
   All screens: long sections are kept compact (one item open at a time)
   ===================================================================== */
/* services: one application window with tabs */
.awt{display:grid;gap:18px}
@media (min-width:900px){.awt{grid-template-columns:minmax(0,30fr) minmax(0,70fr);gap:24px;align-items:start}}
.awt-tabs{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.awt-tabs{grid-template-columns:1fr}}
.awt-tabs button{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:#fff;font:inherit;text-align:left;cursor:pointer;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.awt-tabs button:hover{border-color:var(--turq);transform:translateX(3px)}
.awt-tabs button[aria-selected="true"]{background:var(--navy);border-color:var(--navy)}
.awt-tabs button:focus-visible{outline:2.5px solid var(--turq);outline-offset:2px}
.awt-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#EAF4F7;color:var(--turq);transition:background .3s,color .3s}
.awt-ic svg{width:19px;height:19px}
.awt-tabs button[aria-selected="true"] .awt-ic{background:var(--mint);color:var(--navy)}
.awt-tabs b{min-width:0;font-size:.95rem;font-weight:800;line-height:1.3;color:var(--navy)}
.awt-tabs button[aria-selected="true"] b{color:#fff}
.awt-win{border-radius:20px;background:#fff;border:1px solid #D3E1E7;overflow:hidden;box-shadow:0 30px 60px -46px rgba(16,43,70,.6)}
.awt-win .aw-bar{padding:12px 16px}
.awt-ps{display:grid}
.awt-p{grid-area:1/1;visibility:hidden;opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s .4s}
.awt-p.is-on{visibility:visible;opacity:1;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.awt-head{display:flex;align-items:center;gap:12px;padding:18px 20px 0}
.awt-head h3{margin:0;font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.awt-head .aw-app{width:36px;height:36px;border-radius:11px}
.awt-p .aw-ui{margin-top:12px}
.awt-p>p{margin:0;padding:14px 20px 22px;font-size:.96rem;line-height:1.7;color:#000}
@media (prefers-reduced-motion:reduce){.awt-p{transition:none}}
/* signs: closed rows show one line; the row in focus opens */
.xs-r{cursor:pointer}
.xs-b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#4F6370;transition:color .3s}
.xs-r.open .xs-b{white-space:normal;color:#000}
.xs-r:focus-visible{outline:2.5px solid var(--turq);outline-offset:-2px}
@media (max-width:760px){.xs-b{white-space:normal}}
/* approach: steps open as they are reached; others show their title */
.pl-i{cursor:pointer;align-items:center}
.pl-i p{display:none}
.pl-i.open p{display:block}
.pl-i>div{position:relative;padding-right:30px}
.pl-i>div::after{content:"";position:absolute;right:6px;top:12px;width:9px;height:9px;border-right:2.5px solid var(--turq);border-bottom:2.5px solid var(--turq);transform:rotate(45deg);transition:transform .3s}
.pl-i.open>div::after{transform:rotate(-135deg);top:16px}
.pl-chk{margin-top:0}
.pl-i{padding:16px 0}
.pl-i:focus-visible{outline:2.5px solid var(--turq);outline-offset:2px;border-radius:10px}
/* in practice: shorter scroll distance */
@media (min-width:1000px){html.sl-on .cv-wrap{height:calc(100vh * 1.8)}}
/* services: on desktop the window stays on screen and the scroll moves through the four tabs */
@media (min-width:900px){
  html.sl-on .awt-wrap{height:calc(100vh * 1.7)}
  html.sl-on .awt-wrap .awt{position:sticky;top:calc(var(--nav-h) + 40px)}
  html.sl-on .awt-wrap .awt.rv{opacity:1;transform:none}
}
@media (max-width:560px){.awt-tabs button{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}.awt-tabs b{font-size:.88rem;overflow-wrap:anywhere}}

/* ---------- In practice v2: fuller stage — step details beside the picture ---------- */
.cv-stage{aspect-ratio:auto!important;display:grid;gap:0;min-height:0;border-radius:22px;overflow:hidden;background:radial-gradient(120% 140% at 0% 0%,#1D6A90 0%,#102B46 55%,#0B2038 100%);position:relative}
.cv-stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(127,198,221,.18) 1px,transparent 1.2px);background-size:24px 24px;pointer-events:none}
@media (min-width:900px){.cv-stage{grid-template-columns:minmax(0,34fr) minmax(0,66fr)}}
.cv-info{position:relative;display:grid;padding:clamp(20px,2.6vw,32px)}
.cv-i{grid-area:1/1;align-self:center;opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease);visibility:hidden}
.cv-i.on{opacity:1;transform:none;visibility:visible}
.cv-iic{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--mint);color:var(--navy)}
.cv-iic svg{width:26px;height:26px}
.cv-i h3{margin:18px 0 0;font-size:clamp(1.35rem,2.2vw,1.75rem);font-weight:800;letter-spacing:-.03em;line-height:1.2;color:#fff}
.cv-i p{margin:12px 0 0;font-size:1rem;line-height:1.7;color:rgba(255,255,255,.88)}
.cv-art{position:relative;aspect-ratio:720/300;margin:clamp(12px,1.6vw,20px);border-radius:18px;background:linear-gradient(160deg,#EEF6F9,#DDEEF3)}
@media (min-width:900px){.cv-art{margin:20px 20px 20px 0;align-self:center}}
.cv-art .cv-s{position:absolute;inset:0}
.c-cap{fill:#4F6370}
@media (min-width:1000px) and (max-height:860px){.cv-art{aspect-ratio:720/280}}
.cv-t p{display:none!important}
@media (prefers-reduced-motion:reduce){.cv-i{transition:none}}

/* ---------- Services v3: fuller window — text beside a rich preview ---------- */
.awt{align-items:stretch!important}
.awt-win{display:flex;flex-direction:column}
.awt-ps{flex:1}
.awt-p{display:grid;gap:0;align-items:stretch}
@media (min-width:1000px){.awt-p{grid-template-columns:minmax(0,42fr) minmax(0,58fr)}}
.awt-txt{padding:22px 22px 8px;display:flex;flex-direction:column;justify-content:center}
.awt-head{padding:0!important}
.awt-txt p{margin:14px 0 0;font-size:.98rem;line-height:1.72;color:#000}
.awt-prev{margin:14px;padding:16px;border-radius:18px;background:radial-gradient(120% 140% at 0% 0%,#1D6A90 0%,#102B46 60%,#0B2038 100%);display:flex;align-items:center}
.mu{width:100%}
.mx-bar{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.22);width:var(--w)}
.mx-bar:first-of-type{background:linear-gradient(90deg,var(--mint),rgba(91,251,194,.4))}
/* ERP: four modules around a hub */
.mu-erp{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px 46px}
.mu-erp::before{content:"";position:absolute;left:25%;right:25%;top:25%;bottom:25%;border:2px dashed rgba(91,251,194,.45);border-radius:14px}
.mu-hub{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--mint);color:var(--navy);box-shadow:0 0 0 6px rgba(91,251,194,.2)}
.mu-hub svg{width:22px;height:22px}
.mu-mod{position:relative;z-index:1;display:grid;gap:8px;padding:14px;border-radius:14px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14)}
.mu-mod i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(91,251,194,.16);color:var(--mint)}
.mu-mod i svg{width:17px;height:17px}
.mu-mod b{font-size:.86rem;font-weight:800;color:#fff}
/* CRM: pipeline */
.mu-crm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}
.mu-col{display:grid;gap:8px;padding:10px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.mu-col b{font-size:.78rem;font-weight:800;color:var(--mint);min-width:0}
.mu-card{display:flex;align-items:center;gap:8px;padding:10px 8px;border-radius:10px;background:#fff}
.mu-card .mx-bar{background:#C9D9E0!important;flex:1}
.av0,.av1,.av2{flex:none;display:block;width:16px;height:16px;border-radius:50%}
.av0{background:var(--mint)}.av1{background:#7FC6DD}.av2{background:var(--navy)}
/* Accounting: ledger + donut */
.mu-acc{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.mu-led{display:grid;gap:8px}
.mu-row{display:grid;grid-template-columns:104px 1fr;gap:10px;align-items:center;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.mu-row b{font-size:.8rem;font-weight:800;color:#fff}
.mu-row span{height:7px;border-radius:4px;background:linear-gradient(90deg,var(--turq),var(--mint));width:calc(var(--w) * var(--p,1))}
.mu-donut{width:104px;height:104px}
.mu-donut .d0{fill:none;stroke:rgba(255,255,255,.12);stroke-width:14}
.mu-donut .d1{fill:none;stroke:var(--mint);stroke-width:14;stroke-dasharray:58 100;transform:rotate(-90deg);transform-origin:50% 50%}
.mu-donut .d2{fill:none;stroke:#7FC6DD;stroke-width:14;stroke-dasharray:24 100;stroke-dashoffset:-60;transform:rotate(-90deg);transform-origin:50% 50%}
/* HR: tiles + people */
.mu-hr{display:grid;gap:12px}
.mu-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mu-tile{display:grid;justify-items:center;gap:8px;padding:14px 8px;border-radius:14px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);text-align:center}
.mu-tile i{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--mint);color:var(--navy)}
.mu-tile i svg{width:18px;height:18px}
.mu-tile b{font-size:.8rem;font-weight:800;color:#fff;line-height:1.25;min-width:0}
.mu-people{display:grid;gap:8px}
.mu-p{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#fff}
.mu-p .mx-bar{background:#C9D9E0!important;flex:1}
@media (max-width:520px){.mu-erp{gap:10px 14px}.mu-erp::before{display:none}.mu-hub{display:none}.mu-crm{grid-template-columns:1fr}.mu-acc{grid-template-columns:1fr}.mu-donut{display:none}.mu-row{grid-template-columns:96px 1fr}}
@media (min-width:1000px){
  .awt-win{min-height:min(470px,calc(100vh - var(--nav-h) - 120px))}
  .awt-tabs{grid-auto-rows:1fr;align-self:stretch}
  .awt-tabs button{padding:18px}
  .awt-prev{margin:16px;padding:24px}
  .awt-txt{padding:28px 26px}
  .awt-head h3{font-size:1.4rem}
  .mu-mod{padding:18px}.mu-mod b{font-size:.95rem}
  .mu-erp{gap:20px 56px}
  .mu-card{padding:13px 10px}.mu-col{padding:12px;gap:10px}.mu-col b{font-size:.85rem}
  .mu-row{padding:12px 14px}.mu-row b{font-size:.88rem}.mu-led{gap:10px}.mu-donut{width:124px;height:124px}
  .mu-tile{padding:18px 10px}.mu-tile b{font-size:.88rem}.mu-p{padding:12px 14px}
}

/* ---------- Outcomes v2: a well-set-up record, annotated by the five outcomes ---------- */
.bs-out{color:inherit;background:radial-gradient(60% 70% at 20% 50%,rgba(91,251,194,.14),transparent 70%),var(--paper)!important}
.bs-out .clabel{background:transparent;border-color:var(--navy);color:var(--navy)}
.bs-out .h2{color:var(--navy)}
.bs-out .lede{color:#000}
.oc2{display:grid;gap:30px;align-items:center}
@media (min-width:1000px){.oc2{grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:56px}.oc2-v{position:sticky;top:calc(var(--nav-h) + 60px);align-self:start}}
.rc{border-radius:24px;background:#fff;border:1px solid #D3E1E7;box-shadow:0 40px 80px -50px rgba(16,43,70,.6);overflow:hidden}
.rc-top{display:flex;align-items:center;gap:10px;padding:14px 18px;background:linear-gradient(120deg,#1D6A90,#102B46)}
.rc-dots{display:flex;gap:6px}.rc-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.3)}.rc-dots i:first-child{background:var(--mint)}
.rc-body{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px}
.rc-part{position:relative;border-radius:16px;background:#F3F8FA;border:1.5px solid #E1EBEF;padding:14px;transition:border-color .35s,background .35s,box-shadow .35s,transform .35s var(--ease)}
.rc[data-k="0"] .rc-part[data-k="0"],.rc[data-k="1"] .rc-part[data-k="1"],.rc[data-k="2"] .rc-part[data-k="2"],.rc[data-k="3"] .rc-part[data-k="3"],.rc[data-k="4"] .rc-part[data-k="4"]{background:#fff;border-color:var(--mint);box-shadow:0 0 0 5px rgba(91,251,194,.25),0 20px 40px -26px rgba(16,43,70,.5);transform:scale(1.02);z-index:1}
.rc-ln{display:block;height:8px;border-radius:4px;background:#D5E3E8;width:var(--w)}
.rc-ln.d{background:var(--navy)}
.rc-fields{grid-row:span 2;display:grid;gap:12px;align-content:center}
.rc-f{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#fff;border:1px solid #E1EBEF}
.rc-tk{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--mint);color:var(--navy)}
.rc-tk svg{width:13px;height:13px}
.rc-side{display:grid;gap:14px}
.rc-own,.rc-help{display:flex;align-items:center;gap:12px}
.rc-own>div,.rc-help>div{flex:1;display:grid;gap:8px}
.rc-av{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--navy);color:var(--mint)}
.rc-av svg{width:20px;height:20px}
.rc-link{display:flex;align-items:center;justify-content:space-between}
.rc-app{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--navy);color:var(--mint)}
.rc-app svg{width:18px;height:18px}
.rc-wire{flex:1;height:2px;margin:0 6px;background:repeating-linear-gradient(90deg,var(--turq) 0 5px,transparent 5px 10px);background-size:20px 2px;animation:rcFlow 1s linear infinite}
@keyframes rcFlow{to{background-position:20px 0}}
.rc-rep{grid-column:1/-1;display:flex;align-items:flex-end;gap:10px;height:120px}
.rc-b{flex:1;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,var(--mint),var(--turq));height:calc(var(--h) * var(--p,1))}
.rc-help{grid-column:1/-1}
.rc-hic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:rgba(91,251,194,.35);color:var(--navy)}
.rc-hic svg{width:20px;height:20px}
.oc2-l{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.oc2-i{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:18px 20px;border-radius:18px;background:#fff;border:1px solid var(--line);cursor:pointer;opacity:.55;transition:opacity .35s,border-color .35s,box-shadow .35s,transform .35s var(--ease)}
.oc2-i.on{opacity:1;border-color:var(--mint);box-shadow:0 22px 44px -32px rgba(16,43,70,.5);transform:translateX(6px)}
.oc2-i:focus-visible{outline:2.5px solid var(--turq);outline-offset:2px}
.oc2-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#EAF4F7;color:var(--turq);transition:background .35s,color .35s}
.oc2-i.on .oc2-ic{background:var(--navy);color:var(--mint)}
.oc2-ic svg{width:21px;height:21px}
.oc2-i h3{margin:3px 0 0;font-size:1.1rem;font-weight:800;color:var(--navy)}
.oc2-i p{margin:6px 0 0;font-size:.93rem;line-height:1.62;color:#000}
@media (max-width:999px){.oc2-i{opacity:1}.oc2-i.on{transform:none}}
@media (max-width:520px){.rc-body{grid-template-columns:1fr}.rc-fields{grid-row:auto}}
@media (prefers-reduced-motion:reduce){.rc-wire{animation:none}.rc-part,.oc2-i{transition:none}}
@media (max-width:760px){.oc2-v{display:none}}

/* ---------- Outcomes v3: photo band with five glass cards ---------- */
.bs-out{position:relative;overflow:hidden;padding-block:clamp(70px,9vw,120px);color:#fff;background:#0B2038!important}
.og-bg{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;object-position:60% 40%;transform:translate3d(0,calc((var(--op,.5) - .5) * 90px),0) scale(1.04)}
.bs-out::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,32,56,.82) 0%,rgba(11,32,56,.55) 40%,rgba(11,32,56,.92) 100%)}
.og-wrap{position:relative;z-index:2}
.bs-out .clabel{background:transparent!important;border-color:rgba(255,255,255,.5)!important;color:#fff!important}
.bs-out .h2{color:#fff!important}
.bs-out .lede{color:rgba(255,255,255,.88)!important}
.og{display:grid;gap:14px;margin-top:clamp(60px,8vw,120px)}
@media (min-width:700px){.og{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.og{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}}
.og-c{padding:22px 20px;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .35s,border-color .35s,transform .35s var(--ease)}
.og-c:hover{background:linear-gradient(160deg,rgba(91,251,194,.22),rgba(255,255,255,.08));border-color:rgba(91,251,194,.6);transform:translateY(-6px)}
html.sl-on .og-c.rv{transform:translate3d(0,calc((1 - var(--p,1)) * (70px + var(--i) * 30px)),0)}
.og-ic{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:var(--mint);color:var(--navy);box-shadow:0 12px 26px -12px rgba(91,251,194,.8)}
.og-ic svg{width:23px;height:23px}
.og-c h3{margin:16px 0 0;font-size:1.08rem;font-weight:800;letter-spacing:-.015em;line-height:1.3;color:#fff}
.og-c p{margin:8px 0 0;font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.88)}
@media (max-width:760px){.og{display:grid;grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:40px -20px 0;padding:4px 20px 8px}.og::-webkit-scrollbar{display:none}.og>*{scroll-snap-align:start}html.sl-on .og-c.rv{transform:none!important;opacity:1!important}}
@media (prefers-reduced-motion:reduce){.og-bg{transform:none}}

/* ---------- Outcomes v4: progress ring that fills as you read ---------- */
.bs-out2{background:radial-gradient(50% 60% at 15% 60%,rgba(91,251,194,.16),transparent 70%),var(--paper)}
.rg{display:grid;gap:30px;align-items:start}
@media (min-width:1000px){.rg{grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:60px}.rg-l{position:sticky;top:calc(var(--nav-h) + 40px)}}
.rg-head .sec-head{margin-bottom:0}
.rg-v{max-width:340px;margin:26px auto 0}
.rg-svg{display:block;width:100%;height:auto;overflow:visible}
.rg-trk{fill:none;stroke:#DCE8ED;stroke-width:16}
.rg-arc{fill:none;stroke:#C9D9E0;stroke-width:16;stroke-linecap:round;transition:stroke .4s}
.rg-ib{fill:#fff;stroke:#C9D9E0;stroke-width:2;transition:fill .4s,stroke .4s}
.rg-s{color:#7A8D97;transition:color .4s}
.rg-s.done .rg-arc{stroke:var(--turq)}
.rg-s.done .rg-ib{stroke:var(--turq)}
.rg-s.done{color:var(--turq)}
.rg-s.on .rg-arc{stroke:var(--mint)}
.rg-s.on .rg-ib{fill:var(--navy);stroke:var(--mint)}
.rg-s.on{color:var(--mint)}
.rg-core{fill:var(--navy)}
.rg-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rg-i{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px 24px;border-radius:20px;background:#fff;border:1px solid var(--line);cursor:pointer;transition:border-color .35s,box-shadow .35s,transform .35s var(--ease),opacity .35s}
@media (min-width:1000px){.rg-i{opacity:.5}.rg-i.on,.rg-i.done{opacity:1}}
.rg-i.on{border-color:var(--mint);box-shadow:0 24px 44px -30px rgba(16,43,70,.5);transform:translateX(-6px)}
.rg-i:focus-visible{outline:2.5px solid var(--turq);outline-offset:2px}
.rg-ic{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:#EAF4F7;color:var(--turq);transition:background .35s,color .35s}
.rg-i.on .rg-ic{background:var(--navy);color:var(--mint)}
.rg-ic svg{width:23px;height:23px}
.rg-i h3{margin:4px 0 0;font-size:1.14rem;font-weight:800;letter-spacing:-.015em;color:var(--navy)}
.rg-i p{margin:7px 0 0;font-size:.95rem;line-height:1.65;color:#000}
@media (max-width:999px){.rg-v{max-width:240px}}
@media (max-width:760px){.rg-v{display:none}}
@media (prefers-reduced-motion:reduce){.rg-arc,.rg-ib,.rg-i{transition:none}}