/* About section 9: six stages along a continuous curved journey. */
#our-process{position:relative;overflow:hidden;background:#e31e2426}
#our-process .abx-phead{max-width:900px;margin-bottom:34px;gap:14px}
#our-process .abx-phead .abx-h2{color:#470000}
#our-process .abx-phead .abx-h2 span{color:#ff0000}
#our-process .abx-ppill{background:rgba(255,255,255,.55);border-color:rgba(255,0,0,.28)}
.abx-process-journey{position:relative;min-height:420px}
.abx-process-line{position:absolute;inset:0;width:100%;height:420px;overflow:visible;pointer-events:none}
.abx-process-line path{fill:none;stroke:#ff9999;stroke-width:2.5}
.abx-route-nodes circle{fill:#ff2222;stroke:#fff;stroke-width:2}
.abx-route-traveller{fill:#ff0000;stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 5px #ff5555)}
#our-process .abx-psteps{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;max-width:none;min-height:420px}
#our-process .abx-pstep{display:grid;grid-template-columns:70px minmax(0,1fr);gap:16px;align-self:start;align-items:start;padding:0 8px 0 0;margin:0 -50% 0 0;border:0;border-radius:0;background:none;box-shadow:none;transition:none}
#our-process .abx-pstep:nth-child(odd){margin-top:14px}
#our-process .abx-pstep:nth-child(even){margin-top:246px}
#our-process .abx-pstep:hover,#our-process .abx-pstep.is-on{border:0;background:none;box-shadow:none}
#our-process .abx-pno{position:absolute;left:-7px;top:-5px;transform:translateX(-65%);display:block;width:auto;height:auto;margin:0;background:none;border:0;border-radius:0;color:#ffc8c8;font-size:32px;font-weight:800;line-height:1}
.abx-process-icon{position:relative;display:flex;align-items:center;justify-content:center;width:70px;height:70px;border:4px solid #ffd3d3;border-radius:50%;background:#fff;color:#ff0000;box-shadow:0 10px 22px rgba(255,0,0,.1);font-size:28px}
.abx-process-icon::after{content:'';position:absolute;left:50%;top:100%;width:1px;height:56px;background:#ff7777}
#our-process .abx-pstep:nth-child(even) .abx-process-icon::after{top:auto;bottom:100%;height:26px}
#our-process .abx-pstep h3{font-size:18px;line-height:1.25;margin:0 0 8px;color:#470000}
#our-process .abx-pstep p{font-size:14px;line-height:1.55;color:#654d4d}
#our-process .abx-pstep:nth-child(6){margin-right:0;grid-template-columns:60px minmax(0,1fr);gap:12px}
#our-process .abx-pstep:nth-child(6) .abx-process-icon{width:60px;height:60px}
#our-process .abx-ptime{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:26px;max-width:none;margin:30px auto 0;padding:34px 40px;border:0;border-radius:28px;background:linear-gradient(115deg,#fff 45%,#ffeaea);box-shadow:-10px 0 0 #ff0000,0 24px 50px -24px rgba(0,0,0,.5);overflow:hidden}
#our-process .abx-ptime::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:90px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V52C60 12 120 6 190 32S320 72 400 22V80Z' fill='%23ff0000' fill-opacity='.07'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;pointer-events:none}
.abx-ptime-head{display:flex;align-items:center;gap:22px}
.abx-ptime-ic{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:96px;height:96px;border-radius:22px;background:#ffdcdc;color:#ff0000;font-size:46px}
#our-process .abx-after{margin-top:26px}
@media(min-width:900px){#our-process .abx-ptime{grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:0}#our-process .abx-ptime-copy{padding:6px 0 6px 44px;border-left:2px solid #ff0000}.abx-ptime-head{padding-right:30px}}
.abx-process-art svg{display:block;width:100%;height:auto}
.abx-ptime-copy{padding-left:0;border-left:0}
html body #our-process .abx-ptime h3:not(#_){margin:0;color:#ff0000;font-size:clamp(24px,2.2vw,32px);line-height:1.18}
html body #our-process .abx-ptime p:not(#_){margin:0 0 14px;color:hsl(0, 100%, 14%);font-size:15px;line-height:1.55}
#our-process .abx-ptime p:last-child{margin-bottom:0}
@media(max-width:1199px){.abx-process-line{display:none}.abx-process-journey{min-height:0}#our-process .abx-psteps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;min-height:0}#our-process .abx-pstep:nth-child(n){margin:0;padding:18px;grid-template-columns:60px minmax(0,1fr);gap:18px;background:#fff;border:1px solid #ffe0e0;border-radius:16px}#our-process .abx-pno{left:auto;right:12px;top:8px;transform:none;font-size:23px}#our-process .abx-process-icon{width:60px;height:60px}#our-process .abx-process-icon::after{display:none}#our-process .abx-process-copy{padding-top:22px}}
@media(max-width:639px){#our-process .abx-psteps{grid-template-columns:minmax(0,1fr);gap:18px}#our-process .abx-ptime{grid-template-columns:minmax(0,1fr);padding:22px;gap:16px}.abx-ptime-copy{padding:0;border:0}#our-process .abx-pstep h3{font-size:18px}}
@media(prefers-reduced-motion:reduce){.abx-route-traveller{display:none}}

/* The active step follows the same clock and path as the travelling dot. */
#our-process .abx-process-icon,#our-process .abx-process-copy,#our-process .abx-pstep h3,#our-process .abx-pstep p{transition:background .25s ease,color .25s ease,box-shadow .25s ease}
#our-process .abx-pstep.is-current .abx-process-icon{background:#ff0000;color:#fff;border-color:#ff0000;box-shadow:0 0 0 7px rgba(255,0,0,.1),0 10px 24px rgba(255,0,0,.2)}
#our-process .abx-pstep.is-current .abx-pno{color:#ff0000}
#our-process .abx-pstep.is-current h3{color:#ff0000}
#our-process .abx-pstep.is-current p{color:#470000}
#our-process .abx-pstep.is-current .abx-process-copy{background:rgba(255,255,255,.55);border-radius:8px;box-shadow:0 0 0 8px rgba(255,255,255,.55)}
.abx-route-nodes circle.is-current{fill:#ff0000;stroke-width:3;filter:drop-shadow(0 0 5px #ff5555)}
@media(prefers-reduced-motion:reduce){#our-process .abx-process-icon,#our-process .abx-process-copy,#our-process .abx-pstep h3,#our-process .abx-pstep p{transition:none}}

/* Tablet and mobile use the same animated journey along a vertical rail. */
@media(max-width:1199px){
  #our-process .abx-process-journey{padding-left:32px}
  #our-process .abx-process-line{display:block;height:100%;inset:0;overflow:visible}
  #our-process .abx-psteps{grid-template-columns:minmax(0,1fr);gap:22px}
  #our-process .abx-pstep:nth-child(n){margin:0;grid-template-columns:60px minmax(0,1fr)}
  #our-process .abx-pstep::before{content:'';position:absolute;left:-21px;top:48px;width:21px;height:1px;background:#ffaaaa}
}
@media(max-width:639px){#our-process .abx-process-journey{padding-left:28px}#our-process .abx-pstep:nth-child(n){padding:18px 14px;gap:14px}#our-process .abx-pstep::before{left:-17px;width:17px}}

/* ===== Section tone system (2026-10-31) ===== */
/* the section colour now comes from the tone system; the journey keeps tone-neutral colours */
#our-process{background:none}
#our-process .abx-pstep.is-current .abx-process-copy{background:rgba(255,255,255,.75);box-shadow:0 0 0 8px rgba(255,255,255,.75)}
#our-process[data-ss="b"] .abx-pstep.is-current .abx-process-copy{background:rgba(255,255,255,.1);box-shadow:0 0 0 8px rgba(255,255,255,.1)}
#our-process[data-ss="w"] .abx-pno,#our-process[data-ss="p"] .abx-pno{color:rgba(255,0,0,.45)}
@media(min-width:1200px){
  /* the "01" badge sits left of the first step: keep it inside the 1500px container instead of at the viewport edge */
  #our-process .abx-process-journey{padding-left:48px}
  #our-process .abx-process-line{inset:0 0 auto 48px;width:calc(100% - 48px)}
}