.bproc{position:relative;overflow:hidden;padding:104px 0;
  background-color:#104c8d;
  background-image:
    linear-gradient(180deg,rgba(252,253,254,.93) 0%,rgba(243,246,250,.95) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g stroke='rgba(11,46,91,0.06)' stroke-width='1'><path d='M0 0H200M0 50H200M0 100H200M0 150H200M0 200H200'/><path d='M0 0V200M50 0V200M100 0V200M150 0V200M200 0V200'/></g><g stroke='rgba(30,111,208,0.11)' stroke-width='1.2' fill='none'><circle cx='100' cy='100' r='34' stroke-dasharray='4 5'/><circle cx='100' cy='100' r='3'/><path d='M100 66v-14M100 134v14M66 100h-14M134 100h14'/></g><g stroke='rgba(246,167,0,0.16)' stroke-width='1.3'><path d='M0 200L40 160M160 40L200 0'/></g></svg>");
  background-repeat:no-repeat, repeat;
  background-position:center, center;
  background-size:auto, 200px 200px}
.bproc-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bproc-dots{position:absolute;top:52px;left:44px;width:168px;height:132px;opacity:.5;
  background-image:radial-gradient(circle,rgba(11,46,91,.30) 1.7px,transparent 1.8px);
  background-size:19px 19px}
.bproc-blob{position:absolute;top:-190px;right:-160px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle at 32% 32%,rgba(30,111,208,.10),rgba(30,111,208,0) 68%)}
.bproc-wave{position:absolute;bottom:-260px;left:-160px;width:760px;height:520px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgba(11,46,91,.055),rgba(11,46,91,0) 70%)}
.bproc .wrap{position:relative;z-index:2}

/* ---- heading ---- */
.bproc-head{max-width:760px;margin:0 auto;text-align:center}
.bproc-head h2{font-family:'Archivo',sans-serif;font-size:clamp(32px,4.2vw,54px);font-weight:900;
  color:var(--navy-2);text-transform:uppercase;letter-spacing:-.015em;margin:16px 0 0}
.bproc-rule{width:74px;height:4px;background:var(--amber);margin:22px auto 0;border-radius:2px;
  transform:scaleX(0);transform-origin:center;transition:transform .8s .18s var(--ease)}
.bproc-head.in .bproc-rule{transform:scaleX(1)}
.bproc-head p{color:var(--steel);font-size:17px;line-height:1.7;margin:20px auto 0;max-width:60ch}

/* ---- grid (repeats twice = two rows of four) ---- */
.bproc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:96px}
.bproc-grid+.bproc-grid{margin-top:26px}

/* ---- card ---- */
.bproc-card{position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:64px 24px 36px;text-align:center;overflow:visible;
  box-shadow:0 10px 30px rgba(10,31,60,.055);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease),
             opacity .8s var(--ease)}
.bproc-card::before,.bproc-card::after{content:"";position:absolute;left:0;right:0;height:5px;
  transform:scaleX(0);transform-origin:left;transition:transform .85s .25s var(--ease)}
.bproc-card::before{top:0}
.bproc-card::after{bottom:0;transform-origin:right}
.bproc-card.in::before,.bproc-card.in::after{transform:scaleX(1)}
.bproc-card.is-amber::before,.bproc-card.is-amber::after{background:linear-gradient(90deg,#E08F00,#F6A700 45%,#FFC957)}
.bproc-card.is-blue::before,.bproc-card.is-blue::after{background:linear-gradient(90deg,#0B2E5B,#104C8D 45%,#2E86E0)}
.bproc-card:hover{transform:translateY(-10px);box-shadow:0 26px 54px rgba(10,31,60,.16);border-color:#D7E0EC}

/* ---- step number chip ---- */
.bproc-step-no{position:absolute;top:14px;right:16px;font-family:'IBM Plex Mono',monospace;
  font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--line);z-index:2}
.bproc-card.is-amber .bproc-step-no{color:#EFD08F}
.bproc-card.is-blue  .bproc-step-no{color:#AFC7E4}

/* ---- floating icon badge (identical mechanics to Core Values) ---- */
.bproc-badge{position:absolute;top:-38px;left:50%;width:78px;height:78px;margin-left:-39px;
  border-radius:50%;background:var(--paper);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;z-index:3;
  box-shadow:0 10px 24px rgba(10,31,60,.10);overflow:visible;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.bproc-badge svg{width:36px;height:36px;overflow:visible;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bproc-card.is-amber .bproc-badge svg{stroke:var(--amber)}
.bproc-card.is-blue  .bproc-badge svg{stroke:var(--blue)}
.bproc-card:hover .bproc-badge{transform:translateY(-6px) scale(1.07);box-shadow:0 18px 34px rgba(10,31,60,.18)}
.bproc-badge::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid currentColor;
  opacity:0;transform:scale(.9)}
.bproc-card.is-amber .bproc-badge{color:var(--amber)}
.bproc-card.is-blue  .bproc-badge{color:var(--blue)}
.bproc-card:hover .bproc-badge::after{animation:bprocPulse 1.4s var(--ease) infinite}
@keyframes bprocPulse{0%{opacity:.45;transform:scale(.94)}70%{opacity:0;transform:scale(1.32)}100%{opacity:0;transform:scale(1.32)}}

/* ---- card text ---- */
.bproc-card h3{font-family:'Archivo',sans-serif;font-size:18px;font-weight:800;text-transform:uppercase;
  letter-spacing:.015em;margin:0}
.bproc-card.is-amber h3{color:var(--amber)}
.bproc-card.is-blue  h3{color:var(--blue)}
.bproc-tick{width:40px;height:3px;border-radius:2px;margin:14px auto 16px;opacity:.85}
.bproc-card.is-amber .bproc-tick{background:var(--amber)}
.bproc-card.is-blue  .bproc-tick{background:var(--blue)}
.bproc-card p{position:relative;z-index:2;color:var(--steel);font-size:14px;line-height:1.7;margin:0}

/* ---- watermark (own clip layer so the badge stays unclipped) ---- */
.bproc-clip{position:absolute;inset:0;overflow:hidden;border-radius:var(--radius);z-index:1;pointer-events:none}
.bproc-wm{position:absolute;right:-14px;bottom:-18px;width:120px;height:120px;z-index:1;opacity:.085;
  transition:transform .55s var(--ease),opacity .55s var(--ease)}
.bproc-wm svg{width:100%;height:100%;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bproc-card.is-amber .bproc-wm svg{stroke:var(--amber)}
.bproc-card.is-blue  .bproc-wm svg{stroke:var(--blue)}
.bproc-card:hover .bproc-wm{opacity:.16;transform:translate(-6px,-6px) rotate(-6deg)}

/* ---- reveal stagger (rides the existing .reveal IntersectionObserver) ---- */
.bproc-grid .reveal{transition-delay:0s}
.bproc-grid .reveal:nth-child(2){transition-delay:.12s}
.bproc-grid .reveal:nth-child(3){transition-delay:.24s}
.bproc-grid .reveal:nth-child(4){transition-delay:.36s}
.bproc-grid .reveal:nth-child(2)::before,.bproc-grid .reveal:nth-child(2)::after{transition-delay:.37s}
.bproc-grid .reveal:nth-child(3)::before,.bproc-grid .reveal:nth-child(3)::after{transition-delay:.49s}
.bproc-grid .reveal:nth-child(4)::before,.bproc-grid .reveal:nth-child(4)::after{transition-delay:.61s}

/* ---- connecting flow line — joins the steps end-to-end (truck animation removed) ---- */
.bproc-grid{position:relative}
.bproc-grid::before{content:"";position:absolute;top:1px;left:12.5%;right:12.5%;height:3px;z-index:0;
  pointer-events:none;border-radius:2px;
  background:
    linear-gradient(90deg,rgba(11,46,91,.16),rgba(30,111,208,.34) 50%,rgba(11,46,91,.16)),
    radial-gradient(circle at 0% 50%,var(--amber) 3px,transparent 3.5px),
    radial-gradient(circle at 33.333% 50%,var(--blue) 3px,transparent 3.5px),
    radial-gradient(circle at 66.666% 50%,var(--amber) 3px,transparent 3.5px),
    radial-gradient(circle at 100% 50%,var(--blue) 3px,transparent 3.5px)}
.bproc-grid::after{content:"";position:absolute;top:1px;left:12.5%;width:9%;height:3px;z-index:0;
  pointer-events:none;border-radius:2px;
  background:linear-gradient(90deg,transparent,#fff 45%,rgba(255,255,255,.9) 55%,transparent);
  animation:bprocStepFlow 3.2s linear infinite}
.bproc-grid+.bproc-grid::after{animation-duration:3.6s;animation-delay:.45s;animation-direction:reverse;left:78.5%}

@keyframes bprocStepFlow{
  0%{left:12.5%;opacity:0}
  8%{opacity:1}
  92%{opacity:1}
  100%{left:78.5%;opacity:0}
}

/* ---- flowing connector between the two rows ---- */
.bproc-road{position:relative;height:14px;margin:20px auto 46px;max-width:1040px;overflow:hidden}
.bproc-road::before{content:"";position:absolute;top:50%;left:0;right:0;height:3px;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,var(--line) 0 14px,transparent 14px 26px);border-radius:2px}
.bproc-road::after{content:"";position:absolute;top:50%;left:-25%;width:26%;height:3px;transform:translateY(-50%);
  border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--amber) 45%,var(--blue) 55%,transparent);
  animation:bprocRowFlow 3.6s linear infinite}
.bproc-road.rev::after{animation-duration:4.2s;animation-delay:.4s;animation-direction:reverse}

@keyframes bprocRowFlow{
  0%{left:-26%;opacity:0}
  8%{opacity:1}
  92%{opacity:1}
  100%{left:125%;opacity:0}
}

/* ---- responsive ---- */
@media(max-width:1100px){
  .bproc-grid{grid-template-columns:repeat(2,1fr);gap:26px 24px;row-gap:78px}
  .bproc-grid::before,.bproc-grid::after{display:none}
}
@media(max-width:640px){
  .bproc{padding:72px 0}
  .bproc-grid{grid-template-columns:1fr;row-gap:74px;margin-top:84px}
  .bproc-grid+.bproc-grid{margin-top:20px}
  .bproc-card{padding:60px 22px 32px}
  .bproc-dots{display:none}
  .bproc-head p{font-size:16px}
  .bproc-road{height:26px;margin:12px auto 24px}
}
@media(prefers-reduced-motion:reduce){
  .bproc-card,.bproc-badge,.bproc-wm,.bproc-rule,.bproc-card::before,.bproc-card::after{transition:none!important;animation:none!important}
  .bproc-rule,.bproc-card::before,.bproc-card::after{transform:none!important}
  .bproc-card:hover{transform:none}
  .bproc-card:hover .bproc-badge{transform:none}
  .bproc-card:hover .bproc-wm{transform:none}
  .bproc-grid::after,.bproc-road::after{animation:none!important;opacity:.9!important}
}