/* Multi-branch business page — picture-specific values and the sections only this page has
   (branch status board, the central CWard view, the branch's sensitive points). Shared blocks: /shared/css/solution-page.css. */

/* Hero: a light picture that already fades into sky on its right, so only a gentle eased edge is added */
.vh__img{width:min(72%,1150px);object-position:left center;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 58%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.3) 86%,transparent 98%);mask-image:linear-gradient(90deg,#000 0%,#000 58%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.3) 86%,transparent 98%)}
@media(max-width:860px){.vh__img{width:100%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%);mask-image:linear-gradient(180deg,transparent 0%,#000 24%)}}

/* Shared heading look of this page's own sections */
.mb-net__head,.mb-guard__head{max-width:780px;margin:0 auto 32px;text-align:center}
.mb-net__head h2,.mb-guard__head h2,.mb-center__copy h2{margin:0;color:#0b223f;font-size:clamp(25px,2.35vw,35px);line-height:1.35;font-weight:850;letter-spacing:-.02em}
.mb-net__head p,.mb-guard__head p,.mb-center__copy>p{margin:12px 0 0;color:#45536b;font-size:15px;line-height:1.85;font-weight:700}

/* Branch status board: a CSS-only switch (two radios) dims the branches in normal state; nothing moves, so the height stays the same */
.mb-net{position:relative;padding:72px 0;background:linear-gradient(180deg,#f5f9fd 0%,#fff 100%)}
@media(max-width:1040px){.mb-net{padding:48px 0}}
.mb-net__inner{width:min(calc(100% - (2 * var(--vs-gutter))),var(--vs-shell));margin-inline:auto;direction:rtl}
.mb-net__board{padding:22px;border-radius:22px;background:#fff;box-shadow:0 18px 40px rgba(16,38,74,.1)}
.mb-net__radio{position:absolute;opacity:0;pointer-events:none}
.mb-net__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.mb-net__switch{display:grid;grid-template-columns:repeat(2,auto);gap:4px;padding:4px;border-radius:12px;background:#eef3f9}
.mb-net__switch label{display:grid;place-items:center;min-height:40px;padding:0 16px;border-radius:9px;color:#33475f;font-size:14px;font-weight:780;cursor:pointer;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}
.mb-net__switch label:hover{background:#e2eaf4}
#mb-view-all:checked ~ .mb-net__bar label[for="mb-view-all"],#mb-view-attn:checked ~ .mb-net__bar label[for="mb-view-attn"]{background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(32,107,238,.3)}
#mb-view-all:focus-visible ~ .mb-net__bar label[for="mb-view-all"],#mb-view-attn:focus-visible ~ .mb-net__bar label[for="mb-view-attn"]{outline:3px solid #8fb8ff;outline-offset:2px}
.mb-net__sum{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.mb-net__sum li{display:flex;align-items:baseline;gap:6px;padding:7px 14px;border-radius:999px;background:#eef3f9;color:#33475f;font-size:13px;font-weight:750}
.mb-net__sum b{color:#0b223f;font-size:16px;font-weight:850}
.mb-net__sum .is-ok{background:#e7f6ee}.mb-net__sum .is-ok b{color:#1c9a55}
.mb-net__sum .is-attn{background:#fde9e5}.mb-net__sum .is-attn b{color:#d9482f}
.mb-net__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.mb-br{--c:#1c9a55;--bg:#f3f7fb;display:grid;gap:2px;padding:12px 14px;border-radius:12px;background:var(--bg);border-inline-start:4px solid var(--c);transition:opacity .3s ease,filter .3s ease,transform .3s ease,box-shadow .3s ease}
.mb-br b{color:#0b223f;font-size:13.5px;font-weight:800;line-height:1.5}
.mb-br small{color:var(--c);font-size:12.5px;font-weight:750}
.mb-br--sec{--c:#d9482f;--bg:#fde9e5}
.mb-br--link{--c:#e08a00;--bg:#fff3dc}
.mb-br--tech{--c:#0b7fe0;--bg:#e1f1ff}
#mb-view-attn:checked ~ .mb-net__grid .mb-br:not(.mb-br--sec):not(.mb-br--link):not(.mb-br--tech){opacity:.32;filter:grayscale(1)}
#mb-view-attn:checked ~ .mb-net__grid :is(.mb-br--sec,.mb-br--link,.mb-br--tech){box-shadow:0 8px 20px rgba(16,38,74,.14);transform:translateY(-2px)}
@media(max-width:1100px){.mb-net__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* on phones the full board is too long: a sample of 12 branches, the three needing attention always among them */
@media(max-width:700px){.mb-br:nth-child(n+12):not(.mb-br--sec):not(.mb-br--link):not(.mb-br--tech){display:none}}
@media(max-width:700px){.mb-net__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mb-net__board{padding:14px}.mb-net__switch{width:100%;grid-template-columns:1fr 1fr}.mb-net__switch label{padding:0 8px;font-size:13px}}

/* Central view: the real CWard screen (personal data blurred) on a dark band */
.mb-center{margin-top:0;padding:72px 0 80px;background:radial-gradient(circle at 50% 0%,rgba(16,79,159,.22),transparent 34%),linear-gradient(180deg,#07172f 0%,#061120 100%);color:#fff}
@media(max-width:1040px){.mb-center{padding:48px 0 56px}}
.mb-center__inner{width:min(calc(100% - (2 * var(--vs-gutter))),var(--vs-shell));margin-inline:auto;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:48px;align-items:center;direction:rtl}
.mb-center__copy h2{color:#fff}
.mb-center__copy>p{color:rgba(225,235,248,.86);margin-bottom:22px}
.mb-center__points{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mb-center__points li{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.mb-center__points li>span{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);color:#8fc0ff}
.mb-center__points svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mb-center__points div{display:grid;gap:1px}
.mb-center__points b{color:#fff;font-size:15px;font-weight:820}
.mb-center__points small{color:rgba(225,235,248,.78);font-size:13px;font-weight:600;line-height:1.7}
.mb-center__screen{margin:0}
.mb-center__frame{padding:10px;border-radius:16px;background:#1b2a40;box-shadow:0 30px 60px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08)}
.mb-center__frame img{width:100%;height:auto;border-radius:8px;background:#fff}
@media(max-width:1180px){.mb-center__inner{grid-template-columns:1fr;gap:32px}.mb-center__copy{max-width:720px}}

/* Branch: the sensitive points of one branch, each with its device */
.mb-guard{margin-top:0;padding:80px 0;background:#fff}
@media(max-width:1040px){.mb-guard{padding:52px 0}}
.mb-guard__inner{width:min(calc(100% - (2 * var(--vs-gutter))),var(--vs-shell));margin-inline:auto;direction:rtl}
.mb-guard__cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.mb-dev{display:flex;flex-direction:column;min-height:400px;padding:22px 22px 24px;border-radius:18px;background:#f3f7fb;transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease}
.mb-dev:hover{background:#eaf5ff;box-shadow:0 12px 26px rgba(8,58,119,.12);transform:translateY(-2px)}
.mb-dev__img{height:170px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;border-radius:12px;background:#e3e9f0}
.mb-dev__img img{max-width:72%;max-height:130px;width:auto;height:auto;object-fit:contain;transition:transform .25s ease}
.mb-dev:hover .mb-dev__img img{transform:scale(1.08)}
.mb-dev h3{margin:0 0 6px;color:#0b223f;font-size:17px;font-weight:850;line-height:1.5}
.mb-dev p{flex:1;margin:0;color:#45536b;font-size:14.5px;line-height:1.85;font-weight:650}
.mb-dev a{align-self:flex-start;margin-top:12px;padding:4px 12px;border-radius:999px;background:#fff;color:#0e377b;font-size:12.5px;font-weight:800;text-decoration:none;box-shadow:0 2px 8px rgba(16,38,74,.06);transition:color .2s ease}
.mb-dev a:hover{color:var(--brand)}
@keyframes mb-rise{from{opacity:0;transform:translateY(14px)}}
@media(prefers-reduced-motion:no-preference){.mb-guard.is-revealed .mb-dev{animation:mb-rise .55s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.1s + var(--k) * .09s)}}
@media(max-width:1100px){.mb-guard__cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.mb-guard__cards{grid-template-columns:1fr}}

/* Incident: one night's alert followed from the branch to the head office, on a timeline */
.mb-night{margin-top:0;padding:80px 0;background:#e2ecf8}
@media(max-width:1040px){.mb-night{padding:52px 0}}
.mb-night__inner{width:min(calc(100% - (2 * var(--vs-gutter))),var(--vs-shell));margin-inline:auto;direction:rtl}
.mb-night__head{max-width:780px;margin:0 auto 40px;text-align:center}
.mb-night__head h2{margin:0;color:#0b223f;font-size:clamp(25px,2.35vw,35px);line-height:1.35;font-weight:850;letter-spacing:-.02em}
.mb-night__head p{margin:12px 0 0;color:#45536b;font-size:15px;line-height:1.85;font-weight:700}
.mb-night__line{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
/* the line runs behind the dots, from the red alert to the green "handled" */
.mb-night__line::before{content:"";position:absolute;top:60px;right:12.5%;left:12.5%;height:4px;border-radius:4px;background:linear-gradient(270deg,#d9482f,#2a6fe0 30%,#2a6fe0 70%,#1c9a55)}
.mb-night__stop{display:flex;flex-direction:column;align-items:center}
.mb-night__stop time{margin-bottom:10px;color:#5f7183;font-size:14px;font-weight:800;direction:ltr}
.mb-night__dot{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--brand);box-shadow:0 0 0 5px #e2ecf8,0 0 0 7px #c9d8ec}
.mb-night__stop--alert .mb-night__dot{color:#d9482f;box-shadow:0 0 0 5px #e2ecf8,0 0 0 7px #f3c3b8}
.mb-night__stop--done .mb-night__dot{color:#1c9a55;box-shadow:0 0 0 5px #e2ecf8,0 0 0 7px #bfe5cf}
.mb-night__dot svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mb-night__card{flex:1;width:100%;margin-top:18px;padding:16px 16px 18px;border-radius:16px;background:#fff;text-align:right;box-shadow:0 6px 18px rgba(16,38,74,.07);transition:box-shadow .2s ease,transform .2s ease}
.mb-night__card:hover{box-shadow:0 12px 26px rgba(8,58,119,.13);transform:translateY(-2px)}
.mb-night__tag{display:inline-block;padding:3px 10px;border-radius:999px;background:#e1ebfa;color:#0b5ad6;font-size:12px;font-weight:800}
.mb-night__stop--alert .mb-night__tag{background:#fde9e5;color:#c23d26}
.mb-night__stop--done .mb-night__tag{background:#e3f5ea;color:#16834a}
.mb-night__card h3{margin:10px 0 6px;color:#0b223f;font-size:16.5px;font-weight:850;line-height:1.5}
.mb-night__card p{margin:0;color:#45536b;font-size:14px;line-height:1.85;font-weight:600}
@media(prefers-reduced-motion:no-preference){.mb-night.is-revealed .mb-night__stop{animation:mb-rise .55s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.1s + var(--k) * .1s)}}
@media(max-width:1100px){
  .mb-night__line{grid-template-columns:1fr;gap:0;max-width:640px;margin-inline:auto}
  .mb-night__line::before{top:20px;bottom:20px;right:25px;left:auto;width:4px;height:auto;background:linear-gradient(180deg,#d9482f,#2a6fe0 30%,#2a6fe0 70%,#1c9a55)}
  .mb-night__stop{display:grid;grid-template-columns:52px 1fr;column-gap:16px;align-items:start;padding-bottom:22px}
  .mb-night__dot{grid-row:1/3;grid-column:1}
  .mb-night__stop time{grid-column:2;margin:4px 0 0;text-align:right}
  .mb-night__card{grid-column:2;margin-top:8px}
}

/* Band colours: branch (white) > incident (blue) > kit (white) */
.vk{background:#fff}