body{--acc:#D4EC94}
/* ---------- hero: the programme desk ---------- */
.pghero{padding:150px 0 96px;background:radial-gradient(50% 40% at 50% 66%,rgba(46,122,94,.55),rgba(10,53,43,0) 70%),linear-gradient(180deg,#0F4537,#07241F 55%,#061D19)}
.pg-head{text-align:center}
.pg-head .phero-k{color:var(--lime)}
.pg-head .dd-mix{width:30px;height:24px;padding:4px 5px;gap:2px;border-radius:7px}
.pg-head .dd-mix i{border-radius:2px}
.pg-head .phero-title{max-width:12em;margin-left:auto;margin-right:auto}
.pg-head .lede{margin:24px auto 0;max-width:36em}
.desk-wrap{--cols:repeat(7,minmax(0,1fr));width:min(1312px,calc(100% - 2*var(--gutter)));margin:64px auto 0}
.journey{position:relative;display:grid;grid-template-columns:var(--cols);column-gap:12px;padding:0 22px 20px}
.journey::before{content:"";position:absolute;left:22px;right:22px;top:9px;border-top:2px dashed rgba(255,255,255,.2)}
.jn{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.jn[data-m=enquiry]{grid-column:1 / 3}
.jn i{position:relative;width:20px;height:20px;border-radius:50%;background:#0A2F28;border:2px solid rgba(255,255,255,.3);transition:background-color .3s,border-color .3s,box-shadow .3s}
.jn span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);transition:color .3s}
.jn.on i{background:var(--lime);border-color:var(--lime);box-shadow:0 0 0 6px rgba(212,236,148,.15),0 0 18px rgba(212,236,148,.55)}
.jn.on span{color:#fff}
.desk{position:relative;padding:22px;border-radius:30px;border:1px solid rgba(255,255,255,.1);background:radial-gradient(circle at 14px 14px,rgba(255,255,255,.22) 2.5px,transparent 3.5px),radial-gradient(circle at calc(100% - 14px) 14px,rgba(255,255,255,.22) 2.5px,transparent 3.5px),radial-gradient(circle at 14px calc(100% - 14px),rgba(255,255,255,.22) 2.5px,transparent 3.5px),radial-gradient(circle at calc(100% - 14px) calc(100% - 14px),rgba(255,255,255,.22) 2.5px,transparent 3.5px),linear-gradient(180deg,#174A3E,#0B2E27);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 40px 80px rgba(0,0,0,.45)}
.strips{display:grid;grid-template-columns:var(--cols);gap:12px}
.chs{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0;padding:18px 12px;border-radius:20px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.07);color:#fff;text-align:center;touch-action:manipulation;transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.chs:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
.chs:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.chs[aria-checked=true]{background:rgba(212,236,148,.08);border-color:rgba(212,236,148,.36)}
.led{width:10px;height:10px;border-radius:50%;background:#2A4A42;box-shadow:inset 0 1px 2px rgba(0,0,0,.5);flex-shrink:0;transition:background-color .25s,box-shadow .25s}
[aria-checked=true] .led,[aria-selected=true] .led{background:var(--lime);box-shadow:0 0 0 3px rgba(212,236,148,.18),0 0 12px rgba(212,236,148,.9)}
.cq{display:flex;align-items:center;justify-content:center;min-height:3.4em;font-family:var(--serif);font-style:italic;font-size:calc(19px * var(--hs-s,1));line-height:1.1;color:rgba(255,255,255,.55);transition:color .3s;font-weight:var(--hw-t,400)}
.chs[aria-checked=true] .cq{color:var(--lime)}
.fader{position:relative;width:46px;height:128px;flex-shrink:0}
.fader::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;border-radius:3px;background:#05201A;box-shadow:inset 0 1px 2px rgba(0,0,0,.7)}
.fader .tk{position:absolute;inset:4px 0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.2) 0 1px,transparent 1px 12px) left top/9px 100% no-repeat,repeating-linear-gradient(180deg,rgba(255,255,255,.2) 0 1px,transparent 1px 12px) right top/9px 100% no-repeat}
.fader .fl{position:absolute;left:50%;bottom:0;width:6px;height:0;margin-left:-3px;border-radius:3px;background:var(--lime);box-shadow:0 0 10px rgba(212,236,148,.6);transition:height .55s var(--ease-out)}
.fader .cap{position:absolute;left:50%;bottom:0;width:40px;height:22px;margin-left:-20px;border-radius:6px;background:linear-gradient(180deg,#EEF2EE,#BAC6C0);box-shadow:0 5px 10px rgba(0,0,0,.45),inset 0 1px 0 #fff;transition:bottom .55s var(--ease-out)}
.fader .cap::after{content:"";position:absolute;left:7px;right:7px;top:10px;height:2px;border-radius:1px;background:var(--ink);transition:background-color .3s}
.chs[aria-checked=true] .fader .cap{bottom:106px}
.chs[aria-checked=true] .fader .fl{height:100%}
.chs[aria-checked=true] .fader .cap::after{background:var(--lime-deep)}
.cn{display:flex;align-items:center;justify-content:center;min-height:2.5em;font-weight:600;font-size:14px;line-height:1.25}
.cst{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.chs[aria-checked=true] .cst{color:var(--lime)}
.cmo,.tog{display:none}
.chs.attn .fader .cap{animation:cap-attn 4.2s var(--ease) 1.2s infinite}
.chs.attn .led{animation:led-attn 4.2s var(--ease) 1.2s infinite}
.chs.attn .tog{animation:tog-attn 4.2s var(--ease) 1.2s infinite}
@keyframes cap-attn{0%,30%,62%,100%{translate:0 0;box-shadow:0 5px 10px rgba(0,0,0,.45),inset 0 1px 0 #fff}42%{translate:0 -16px;box-shadow:0 0 0 5px rgba(212,236,148,.35),0 8px 16px rgba(0,0,0,.45),inset 0 1px 0 #fff}52%{translate:0 -6px}}
@keyframes led-attn{0%,30%,62%,100%{background:#2A4A42}42%{background:var(--lime);box-shadow:0 0 12px rgba(212,236,148,.9)}}
@keyframes tog-attn{0%{box-shadow:0 0 0 0 rgba(212,236,148,.7)}32%,100%{box-shadow:0 0 0 7px rgba(212,236,148,0)}}
.bus{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));align-items:center;gap:22px;margin-top:16px;padding:16px 22px;border-radius:18px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.07)}
.bus-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);line-height:1.5}
.meter{display:flex;flex-direction:column;gap:8px;min-width:0}
.meter-t{display:flex;align-items:baseline;gap:8px;white-space:nowrap;min-width:0}
.meter-t b{font-size:14px;font-weight:600;color:#fff}
.meter-t small{font-size:12px;color:rgba(255,255,255,.55);overflow:hidden;text-overflow:ellipsis}
.meter .mbar{position:relative;height:10px;border-radius:5px;background:#06201B;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.meter .mbar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--lv,0) * 100%);background:repeating-linear-gradient(90deg,var(--mc) 0 8px,rgba(0,0,0,0) 8px 10px);transform-origin:left;transition:width .6s var(--ease-out);animation:meter var(--md,1.3s) ease-in-out infinite alternate}
@keyframes meter{to{transform:scaleX(.9)}}
.desk-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:22px}
.mix-say{margin:0;font-size:17px;color:rgba(255,255,255,.75)}
.mix-say b{margin-right:8px;font-family:var(--serif);font-weight:var(--hw-d,400);font-size:calc(30px * var(--hs-m,1));color:#fff}
.presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.presets .k{margin-right:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.presets button{padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);font-size:14px;font-weight:500;color:#fff;transition:background-color .2s,border-color .2s,color .2s}
.presets button:hover{border-color:rgba(255,255,255,.55)}
.presets button[aria-pressed=true]{background:var(--lime);border-color:var(--lime);color:var(--forest-900)}
.presets .clear{border-color:transparent;color:rgba(255,255,255,.62);text-decoration:underline;text-underline-offset:3px}
.pg-ctas{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:48px}
.pghero .caption{text-align:center}

/* ---------- inside a programme: a stack of programme cards ---------- */
.pg-inside{padding:140px 0}
.pin-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:48px;align-items:end;margin-top:56px}
.pin-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.pin-k{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.pin-k button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--forest-600);text-decoration:underline;text-underline-offset:3px}
.pin-list{display:flex;flex-direction:column;gap:8px}
.pg-tab{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:var(--cream-2);transition:background-color .2s,border-color .2s,box-shadow .25s}
.pg-tab:hover{border-color:var(--sage)}
.pg-tab b{display:block;font-weight:600;font-size:16px}
.pg-tab small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ck{width:22px;height:22px;border-radius:7px;border:1.5px solid #B7C6BF;background:#fff;display:grid;place-items:center;flex-shrink:0;color:#fff;transition:background-color .2s,border-color .2s}
.ck .ic{width:14px;height:14px;stroke-width:2.6;opacity:0;transform:scale(.5);transition:opacity .2s,transform .3s var(--ease-out)}
.pg-tab[aria-pressed=true]{background:#fff;border-color:transparent;box-shadow:var(--shadow-sm)}
.pg-tab[aria-pressed=true] .ck{background:var(--forest-700);border-color:var(--forest-700)}
.pg-tab[aria-pressed=true] .ck .ic{opacity:1;transform:none}
.pg-tab .top{margin-left:auto;padding:4px 9px;border-radius:999px;background:var(--lime);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--forest-900);white-space:nowrap;opacity:0;transform:scale(.9);transition:opacity .25s,transform .3s var(--ease-out)}
.pg-tab.is-front .top{opacity:1;transform:none}
.pin-stage{min-width:0}
.pstack{--peek:54px;--ch:496px;position:relative;height:calc(var(--ch) + 3 * var(--peek))}
.pc{--lvl:0;position:absolute;left:0;right:0;bottom:0;height:var(--ch);transform-origin:50% 0;transform:translateY(calc(var(--lvl) * var(--peek) * -1)) scale(calc(1 - var(--lvl) * .05));z-index:calc(10 - var(--lvl));transition:transform .6s var(--ease-out),opacity .45s var(--ease)}
.pc.out{opacity:0;transform:translateY(46px) scale(.96);z-index:0;pointer-events:none}
.pc.deep{opacity:0;pointer-events:none}
.pc-in{position:relative;height:100%;display:flex;flex-direction:column;border-radius:26px;background:#fff;box-shadow:0 2px 4px rgba(8,30,26,.06),0 24px 50px rgba(8,30,26,.16);overflow:hidden;transition:transform .25s var(--ease),background-color .4s}
.pc-in::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#9FE3A3 0 25%,#D4EC94 25% 50%,#98DAC7 50% 75%,#E9B76C 75%)}
.pc:not(.front) .pc-in{background:#FAFAF5}
.pc:not(.front):not(.out):hover .pc-in{transform:translateY(-6px)}
.pc-head{display:flex;align-items:center;gap:12px;width:100%;height:var(--peek);padding:5px 24px 0;text-align:left;flex-shrink:0;border-bottom:1px solid var(--line)}
.pc-head b{min-width:0;font-family:var(--serif);font-weight:var(--hw-d,400);font-size:calc(28px * var(--hs-m,1));line-height:1;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-head .mono{margin-left:auto;color:var(--forest-600);white-space:nowrap}
.pc-head .bring{display:none;align-items:center;gap:6px;margin-left:12px;font-size:12.5px;font-weight:600;color:var(--forest-700);white-space:nowrap}
.pc-head .bring .ic{width:14px;height:14px;transform:rotate(-90deg)}
.pc:not(.front) .pc-head{cursor:pointer}
.pc:not(.front) .pc-head .mono{display:none}
.pc:not(.front) .pc-head .bring{display:inline-flex;margin-left:auto}
.pc-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;padding:18px 24px 20px}
.pc-msg{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px 16px;border-radius:18px;background:var(--cream)}
.pc-msg .mono{color:var(--ink-3)}
.pc-msg .bub{font-size:14.5px;border-radius:16px 16px 16px 5px}
.pc-rows{margin:0}
.pc-rows>div{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:9px 0;border-top:1px solid var(--line)}
.pc-rows dt{padding-top:3px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--forest-600)}
.pc-rows dd{margin:0;font-size:15px;line-height:1.42;color:var(--ink)}
.pc-mods{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.pc-mods .mono{margin-right:4px;color:var(--ink-3)}
.pc.deal .pc-in{animation:deal .6s var(--ease-out)}
@keyframes deal{from{transform:translate(46px,34px) rotate(4deg);opacity:.2}}
.pc.lift .pc-in{animation:lift .7s var(--ease-out)}
@keyframes lift{0%{transform:translateY(-84px) rotate(-3deg)}60%{transform:translateY(6px) rotate(.4deg)}100%{transform:none}}
.pstack-empty{position:absolute;left:0;right:0;bottom:0;height:var(--ch);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:30px;border-radius:26px;border:2px dashed #C9D6D0;color:var(--ink-3);text-align:center;opacity:0;transition:opacity .4s var(--ease)}
.pstack-empty b{font-family:var(--serif);font-weight:var(--hw-d,400);font-size:calc(34px * var(--hs-m,1));line-height:1.05;color:var(--ink)}
.pstack.empty .pstack-empty{opacity:1}
.pin-say{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:18px 0 0;min-height:1.6em;font-size:15px;color:var(--ink-2)}
.pin-say b{font-weight:600;color:var(--ink)}
.mchip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:color-mix(in srgb,var(--mc) 32%,#fff);font-size:13px;font-weight:600;color:var(--forest-900)}
.mchip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mc);box-shadow:inset 0 0 0 1px rgba(7,36,31,.25)}
.mchip--opt{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mc)}

/* ---------- one programme, four modules ---------- */
.pg-run{padding:140px 0;background:linear-gradient(180deg,#0F4537,#07241F)}
.pg-run .h2{color:#fff}
.relay2{position:relative;margin-top:60px}
.r2-track{position:relative;height:44px;margin:0 0 18px}
.r2-line{position:absolute;left:12.5%;right:12.5%;top:50%;border-top:2px dashed rgba(255,255,255,.22)}
.r2-fill{position:absolute;left:12.5%;width:75%;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:linear-gradient(90deg,#9FE3A3,#D4EC94 33%,#98DAC7 66%,#E9B76C);clip-path:inset(0 calc(100% - var(--p,0%)) 0 0);transition:clip-path 1s var(--ease-out)}
.r2-stop{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#0A2F28;border:2px solid var(--mc)}
.r2-tok{position:absolute;top:50%;left:12.5%;z-index:2;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);font-weight:600;font-size:13px;box-shadow:0 0 0 6px rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.35);opacity:0;transition:left 1s var(--ease-out),opacity .3s}
.r2-tok.show{opacity:1}
.r2-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.r2{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;min-height:430px;padding:22px;border-radius:24px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;opacity:.45;transition:opacity .5s var(--ease),border-color .5s var(--ease),background-color .5s var(--ease),transform .5s var(--ease)}
.r2.on{opacity:1;border-color:var(--mc);background:rgba(255,255,255,.08);transform:translateY(-4px)}
.r2-h{display:flex;align-items:center;gap:10px}
.r2-dot{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--mc);color:var(--forest-900);flex-shrink:0}
.r2-dot .ic{width:17px;height:17px}
.r2-h .mono{color:var(--mc)}
.r2-n{margin-left:auto;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.4)}
.r2 h3{margin:10px 0 0;font-family:var(--serif);font-weight:var(--hw-d,400);font-size:calc(34px * var(--hs-m,1));line-height:1;letter-spacing:-.015em}
.r2 p{margin:0;font-size:15px;line-height:1.45;color:rgba(255,255,255,.7)}
.r2-ui{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:8px}
.r2-ui>*{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .55s var(--ease-out)}
.r2.on .r2-ui>*{opacity:1;transform:none}
.r2.on .r2-ui>:nth-child(2){transition-delay:.7s}
.r2.on .r2-ui>:nth-child(3){transition-delay:1.4s}
.r2.on .r2-ui>.dim{opacity:.5}
.r2-pt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#fff;color:var(--ink)}
.r2-pt .av{width:30px;height:30px;font-size:11px}
.r2-pt b{display:block;font-size:13.5px;font-weight:600}
.r2-pt small{display:block;font-size:12px;color:var(--ink-3)}
.r2-pt .tag{margin-left:auto}
.r2 .bub{font-size:13.5px;padding:10px 13px;max-width:92%}
.b-clinic{align-self:flex-start;background:#fff;color:var(--ink);border-radius:16px 16px 16px 5px}
.b-pat{align-self:flex-end;background:rgba(255,255,255,.14);color:#fff;border-radius:16px 16px 5px 16px}
.r2-meta{font-size:12px;color:rgba(255,255,255,.5)}
.r2 .tag .ic{width:12px;height:12px}
.r2-pay{padding:12px;border-radius:16px;background:#fff;color:var(--ink)}
.r2-pay .mono{color:#86601E}
.r2-pay b{display:block;margin-top:4px;font-size:14px;font-weight:600}
.r2-pay .go{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:11px;background:var(--ink);color:#fff;font-weight:600;font-size:13.5px;transition:background-color .35s,color .35s}
.r2-pay .go .ic{width:14px;height:14px}
.r2.done .r2-pay .go{background:var(--amber);color:var(--amber-ink)}
.r2-paid{align-self:flex-start;opacity:0!important;transform:translateY(8px)!important}
.r2.done .r2-paid{opacity:1!important;transform:none!important;transition-delay:.3s!important}
.r2-ctl{display:flex;justify-content:flex-end;margin-top:18px}
.r2-ctl .textbtn{color:var(--lime)}

/* ---------- built with your team ---------- */
.pg-build{padding:140px 0}
.pg-steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:60px 0 0;padding:0;list-style:none}
.pg-steps::before{content:"";position:absolute;left:28px;right:28px;top:27px;border-top:2px dashed var(--line)}
.pg-steps li{position:relative;display:flex;flex-direction:column;gap:10px}
.pg-steps .n{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--lime);font-family:var(--mono);font-size:13px;font-weight:500;box-shadow:0 0 0 8px var(--cream)}
.pg-steps h3{margin:12px 0 0;font-family:var(--serif);font-weight:var(--hw-d,400);font-size:calc(30px * var(--hs-m,1));line-height:1.02;letter-spacing:-.015em}
.pg-steps p{margin:0;font-size:16px;line-height:1.5;color:var(--ink-2)}
.pg-build .caption{margin-top:34px}
.cta--mix{--cta-bg:linear-gradient(100deg,#C6EEC8 0%,#E2F2B5 36%,#CDEFE2 68%,#F3D9A6 100%)}

/* ---------- programmes working together ---------- */
.pg-flow{padding:140px 0}
.flow{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;margin-top:56px;align-items:stretch}
.flow-map-wrap{min-width:0;display:flex;align-items:center;border-radius:28px;background:#fff;box-shadow:var(--shadow-sm);padding:20px 22px 22px;overflow-x:auto}
.flow-map{position:relative;min-width:700px;height:412px}
.fl-lane{position:absolute;left:0;right:0;top:calc(44px + var(--r) * 72px);height:56px;display:flex;align-items:center;padding-left:14px;border-radius:14px;background:var(--cream-2)}
.fl-lane span{width:170px;font-weight:600;font-size:14px;line-height:1.2;color:var(--ink-2)}
.fl-lane.on{background:#EEF6E2}
.fl-lane.on span{color:var(--ink)}
.fl-cols span{position:absolute;top:8px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
#flow-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#flow-svg .fp-bg{fill:none;stroke:#D9E2D6;stroke-width:3;stroke-dasharray:2 7;stroke-linecap:round}
#flow-svg .fp{fill:none;stroke:var(--forest-700);stroke-width:3;stroke-linecap:round}
#flow-svg .st{fill:#fff;stroke:#B9C8BD;stroke-width:2.5;transition:fill .35s,stroke .35s}
#flow-svg .st.on{fill:var(--lime);stroke:var(--forest-700)}
#flow-svg .held{fill:none;stroke:#C9A15A;stroke-width:2.5;stroke-dasharray:4 4;opacity:0;transition:opacity .35s}
#flow-svg .held.on{opacity:1}
#flow-svg .held-t{font-family:var(--sans);font-size:12px;font-weight:600;fill:#86601E;opacity:0;transition:opacity .35s}
#flow-svg .held-t.on{opacity:1}
#flow-svg .ps{fill:#98DAC7;stroke:var(--forest-700);stroke-width:2.5;opacity:.35;transition:opacity .35s}
#flow-svg .ps.on{opacity:1}
#flow-svg .ps-t{font-family:var(--sans);font-size:11px;font-weight:700;fill:var(--forest-900)}
.fl-tok{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;display:grid;place-items:center;background:#F3C9CF;color:#7A2C3A;font-size:11.5px;font-weight:700;box-shadow:0 0 0 4px #fff,0 8px 18px rgba(8,30,26,.2);z-index:3;will-change:transform}
.flow-side{display:flex;flex-direction:column;gap:14px}
.fl-now{border-radius:24px;padding:22px 22px 24px;background:linear-gradient(180deg,#0F4537,#07241F);color:#fff;min-height:190px}
.fl-now .mono{color:var(--lime)}
.fl-now p{margin:10px 0 0;font-family:var(--serif);font-size:calc(25px * var(--hs-m,1));line-height:1.15;letter-spacing:-.01em;font-weight:var(--hw-t,400)}
.fl-prec{border-radius:24px;padding:18px 20px;background:var(--cream-2)}
.fl-prec .mono{color:var(--forest-600)}
.fl-prec ol{list-style:none;margin:12px 0 0;padding:0;counter-reset:pr;display:flex;flex-direction:column;gap:4px}
.fl-prec li{counter-increment:pr;display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:8px;align-items:center;padding:7px 10px;border-radius:10px;font-size:14.5px;font-weight:500;color:var(--ink-2);transition:background-color .3s,color .3s}
.fl-prec li::before{content:counter(pr);grid-row:1/3;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fff;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.fl-prec li b{font-weight:600}
.fl-prec li small{grid-column:2;font-size:12px;color:var(--ink-3)}
.fl-prec li.on{background:var(--forest-900);color:#fff}
.fl-prec li.on::before{background:var(--lime);color:var(--forest-900)}
.fl-prec li.on small{color:rgba(255,255,255,.7)}
.fl-prec li.wait{background:var(--amber-soft);color:var(--amber-ink)}
.fl-prec-f{display:block;margin-top:10px;font-size:13px;color:var(--ink-3)}
#fl-replay{align-self:flex-start}
@media (max-width:960px){.flow{grid-template-columns:1fr}.flow-side{display:grid;grid-template-columns:1fr 1fr;align-items:start}#fl-replay{grid-column:1/-1}}
@media (max-width:720px){.flow-side{display:flex}}
@media (max-width:1240px){
  .pstack{--ch:584px}
}
@media (max-width:1100px){
  .cq{font-size:calc(17px * var(--hs-s,1))}
  .cn{font-size:13px}
  .bus{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bus-k{grid-column:1 / -1}
}
@media (max-width:960px){
  .journey{display:none}
  .strips{grid-template-columns:1fr 1fr;gap:10px}
  .chs{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"led mo tog" "led nm tog";align-items:center;column-gap:12px;row-gap:2px;padding:14px;text-align:left}
  .chs .led{grid-area:led}
  .chs .cmo{grid-area:mo;display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
  .chs .cn{grid-area:nm;display:block;min-height:0;font-size:15px}
  .chs .cq,.chs .fader,.chs .cst{display:none}
  .tog{grid-area:tog;display:block;position:relative;width:46px;height:26px;border-radius:999px;background:rgba(255,255,255,.14);transition:background-color .3s}
  .tog::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.85);transition:transform .35s var(--ease-out),background-color .3s}
  .chs[aria-checked=true] .tog{background:var(--lime)}
  .chs[aria-checked=true] .tog::after{transform:translateX(20px);background:var(--forest-900)}
  .bus{grid-template-columns:1fr 1fr;gap:16px}
  .pin-grid{grid-template-columns:1fr;align-items:start}
  .pstack{--ch:500px}
  .pin-list{display:grid;grid-template-columns:1fr 1fr}
  .r2-track{display:none}
  .r2-row{grid-template-columns:1fr 1fr}
  .r2{min-height:0}
  .pg-steps{grid-template-columns:1fr 1fr;row-gap:36px}
  .pg-steps::before{display:none}
}
@media (max-width:720px){
  .pghero{padding:118px 0 80px}
  .desk{padding:14px;border-radius:24px}
  .strips{grid-template-columns:1fr}
  .bus{grid-template-columns:1fr;padding:14px 16px}
  .desk-foot{flex-direction:column;align-items:flex-start}
  .pg-ctas{justify-content:flex-start}
  .pghero .caption{text-align:left}
  .pg-inside,.pg-run,.pg-build,.pg-flow{padding:96px 0}
  .flow-map-wrap{padding:14px;border-radius:20px}
  .fl-now{min-height:0}
  .fl-now p{font-size:calc(22px * var(--hs-s,1))}
  .pin-list{grid-template-columns:1fr}
  .pg-tab{padding:12px 14px}
  .pstack{--peek:46px;--ch:640px}
  .pc-head{padding:5px 16px 0}
  .pc-head b{font-size:calc(22px * var(--hs-s,1))}
  .pc-head .mono{display:none}
  .pc-body{padding:14px 16px 16px;gap:12px}
  .pc-msg{padding:12px}
  .pc-msg .bub{font-size:14px}
  .pc-rows>div{grid-template-columns:86px 1fr;gap:10px;padding:8px 0}
  .pc-rows dt{font-size:9.5px}
  .pc-rows dd{font-size:14px}
  .mchip{font-size:12px;padding:5px 9px}
  .r2-row{grid-template-columns:1fr}
  .pg-steps{grid-template-columns:1fr}
}
@media (max-width:400px){
  .pstack{--ch:700px}
}

/* ---------- Added after the export: programmes working together, phone layout ---------- */
@media (max-width:720px){
  .flow{display:flex;flex-direction:column;gap:14px}
  .flow-side{display:contents}
  .fl-now{order:-1}
  #fl-replay{order:1;align-self:flex-start}
  .fl-prec{order:2}
  .flow-map{flex:1;min-width:0;height:388px;margin-top:-44px}
  .fl-cols{display:none}
  .fl-lane{padding-left:12px}
  .fl-lane span{width:100px;font-size:13px}
  #flow-svg .held-t{text-anchor:middle;transform:translate(-16px,22px)}
}

/* ---------- Added after the export: the five steps build along the line ---------- */
.pg-steps.bd-ready{isolation:isolate}
.pg-steps.bd-ready::before{z-index:-1}
.pg-steps.bd-ready:not(.bd-drawn)::before{clip-path:inset(-4px 100% -4px 0)}
.pg-steps.bd-ready::after{content:"";position:absolute;left:0;top:0;z-index:-1;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--lime-deep);box-shadow:0 0 0 5px rgba(154,191,78,.25);opacity:0;pointer-events:none}
.pg-steps.bd-ready .bd-num{display:block}
.pg-steps.bd-ready .n::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--lime-deep);opacity:0;pointer-events:none}
.pg-steps li.bd-lit .n::after{animation:bd-ripple 1.1s var(--ease-out)}
.pg-steps.bd-ready li:not(.bd-built) .n{opacity:0;transform:scale(.3)}
.pg-steps.bd-ready li:not(.bd-built) :is(h3,p){opacity:0}
.pg-steps li.bd-built .n{animation:bd-pop .7s var(--ease-out) backwards}
.pg-steps li.bd-built .bd-num{animation:bd-roll .6s var(--ease-out) .18s backwards}
.pg-steps li.bd-built h3{animation:bd-rise .8s var(--ease-out) .22s backwards}
.pg-steps li.bd-built p{animation:bd-up .7s var(--ease) .42s backwards}
.pg-steps.bd-ready li.bd-built:last-child .n::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px dashed var(--lime-deep);pointer-events:none;animation:bd-orbit 18s linear infinite,bd-fade .8s var(--ease) .7s backwards}
@keyframes bd-pop{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}
@keyframes bd-roll{from{transform:translateY(100%);clip-path:inset(-.3em -.3em 100% -.3em)}to{transform:none;clip-path:inset(-.3em)}}
@keyframes bd-rise{from{transform:translateY(100%);clip-path:inset(-.25em -.1em 100% -.1em)}to{transform:none;clip-path:inset(-.25em -.1em -.3em -.1em)}}
@keyframes bd-up{from{opacity:0;transform:translateY(10px)}}
@keyframes bd-ripple{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@keyframes bd-orbit{to{transform:rotate(1turn)}}
@keyframes bd-fade{from{opacity:0}}