.services-system{display:grid;grid-template-columns:1.3fr 1fr;overflow:hidden;border:1px solid var(--line);border-radius:26px;background:linear-gradient(125deg,#f4faff,#fff 65%);box-shadow:inset 0 1px 0 #fff}
.services-map{position:relative;min-width:0;height:430px;background:radial-gradient(ellipse at center,#d7eaff60,transparent 65%)}
.services-connections{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#b5cce1;stroke-width:.25}.services-connections path{transition:stroke .3s,stroke-width .3s}.services-connections .is-active{stroke:#4487bf;stroke-width:.55;stroke-dasharray:1.5 1;animation:service-flow 2s linear infinite}
@keyframes service-flow{to{stroke-dashoffset:-5}}
.services-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100px;height:100px;border:1px solid #a8c8e8;border-radius:26px;background:linear-gradient(125deg,#ffffffed,#d5eaff90);box-shadow:inset 0 2px 0 white,0 12px 25px #547faf16;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.services-core>span{font-size:34px;letter-spacing:-.1em;color:var(--brand)}.services-core strong{font-size:11px;font-weight:550;color:var(--ink)}
.service-node{--node-tint:#eff6ff;--node-color:#3b6ca9;position:absolute;transform:translate(-50%,-50%);width:31%;min-height:94px;display:grid;grid-template-columns:1fr 16px;gap:7px;text-align:left;padding:14px;border:1px solid #c1d6ec;border-radius:16px;background:linear-gradient(130deg,#ffffffed,var(--node-tint));box-shadow:inset 0 1px 0 white,0 6px 20px #38689608;font:inherit;cursor:pointer;transition:box-shadow .25s,border-color .25s}
.service-node-0{left:19%;top:17%}.service-node-1{left:81%;top:17%;--node-tint:#fff3e6;--node-color:#a87536}.service-node-2{left:19%;top:50%;--node-tint:#edf7ff}.service-node-3{left:81%;top:50%;--node-tint:#e7f7f2;--node-color:#287d6f}.service-node-4{left:19%;top:83%;--node-tint:#f3edfc;--node-color:#825ca6}.service-node-5{left:81%;top:83%;--node-tint:#eff7e6;--node-color:#647d38}
.node-number{font-size:10px;color:var(--node-color);grid-column:1}.service-node strong{grid-column:1;font-size:13px;font-weight:550;line-height:1.4;color:var(--ink)}.node-arrow{grid-column:2;grid-row:1/3;align-self:center;font-size:18px;color:var(--node-color)}.service-node.is-active,.service-node:hover{border-color:var(--node-color);box-shadow:inset 0 1px 0 white,0 8px 22px #38689618}.service-node:focus-visible{outline:2px solid var(--node-color);outline-offset:4px}
.services-descriptions{display:flex;align-items:center;min-width:0;padding:34px;border-left:1px solid var(--line);background:linear-gradient(130deg,#ffffffaa,#eff7ff55)}.service-description[hidden]{display:none}.service-description h3{font-size:30px;line-height:1.2;letter-spacing:-.03em;margin:0 0 20px}.service-description p{font-size:16px;line-height:1.8;color:var(--muted);margin:0 0 26px}.service-outputs{display:flex;flex-wrap:wrap;gap:8px}.service-outputs span{font-size:11px;padding:7px 11px;border:1px solid var(--line);border-radius:20px;background:#ffffffb0;color:var(--brand)}
@media(max-width:1000px){.services-system{grid-template-columns:1.3fr 1fr}.service-node{padding:11px;width:32%}.service-node strong{font-size:12px}.services-core{width:82px;height:86px;border-radius:22px}.services-core strong{font-size:10px}.services-descriptions{padding:24px}.service-description h3{font-size:25px}.service-description p{font-size:14px}}
@media(max-width:700px){.services-system{grid-template-columns:1fr;border-radius:22px}.services-map{height:390px}.service-node{width:34%;padding:11px 9px;min-height:95px;grid-template-columns:1fr;gap:5px}.service-node strong{font-size:11px}.node-arrow{position:absolute;top:9px;right:10px;font-size:14px}.services-core{width:76px;height:82px;border-radius:20px}.services-core>span{font-size:28px}.services-core strong{font-size:9px}.services-descriptions{border-left:0;border-top:1px solid var(--line);padding:24px}.service-description h3{font-size:24px;margin-bottom:14px}.service-description p{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){.services-connections .is-active{animation:none}.services-connections path,.service-node{transition:none}}
/* Seven connected service directions. */
.services-map{height:510px}
.services-core{top:49%}
.service-node-0{left:50%;top:12%}
.service-node-1{left:19%;top:35%}
.service-node-2{left:81%;top:35%}
.service-node-3{left:19%;top:61%}
.service-node-4{left:81%;top:61%}
.service-node-5{left:19%;top:87%}
.service-node-6{left:81%;top:87%;--node-tint:#e8f4fa;--node-color:#3e7c95}
@media(max-width:700px){.services-map{height:490px}.service-node{min-height:88px}}
.services-system{--detail-tint:#eff6ff;--detail-accent:#3b6ca9}
.services-system[data-active-service="1"]{--detail-tint:#fff3e6;--detail-accent:#a87536}
.services-system[data-active-service="2"]{--detail-tint:#edf7ff;--detail-accent:#3b6ca9}
.services-system[data-active-service="3"]{--detail-tint:#e7f7f2;--detail-accent:#287d6f}
.services-system[data-active-service="4"]{--detail-tint:#f3edfc;--detail-accent:#825ca6}
.services-system[data-active-service="5"]{--detail-tint:#eff7e6;--detail-accent:#647d38}
.services-system[data-active-service="6"]{--detail-tint:#e8f4fa;--detail-accent:#3e7c95}
.services-descriptions{background:linear-gradient(130deg,#ffffffaa,var(--detail-tint));transition:background .3s}
.service-description h3{color:var(--detail-accent)}
.service-outputs span{color:var(--detail-accent);border-color:color-mix(in srgb,var(--detail-accent) 24%,white)}
.services-connections .is-active{stroke:var(--detail-accent)}
/* Eight directions, with more room for service descriptions. */
.services-system{grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr)}
.services-map{height:520px}
.services-core{top:50%;width:82px;height:86px;border-radius:22px}
.service-node{width:33%;min-height:98px;padding:12px}
.service-node-0{left:19%;top:12%}
.service-node-1{left:81%;top:12%}
.service-node-2{left:19%;top:37%}
.service-node-3{left:81%;top:37%}
.service-node-4{left:19%;top:63%}
.service-node-5{left:81%;top:63%}
.service-node-6{left:19%;top:88%}
.service-node-7{left:81%;top:88%;--node-tint:#f0effa;--node-color:#7266a0}
.services-system[data-active-service="7"]{--detail-tint:#f0effa;--detail-accent:#7266a0}
.services-descriptions{padding:38px}
@media(max-width:1000px) and (min-width:701px){.service-node{padding:11px 9px;grid-template-columns:1fr}.node-arrow{position:absolute;right:9px;top:9px;font-size:14px}.services-core{width:70px;height:78px}.services-core strong{font-size:9px}.service-node strong{font-size:11px}.services-descriptions{padding:28px}}
@media(max-width:700px){.services-system{grid-template-columns:1fr}.services-map{height:510px}.service-node{width:34%;padding:11px 9px;min-height:98px}.services-core{width:74px;height:80px}.services-descriptions{padding:24px}}
/* Larger service map on the left. */
@media(min-width:701px){
.services-system{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.services-map{height:560px}
.service-node{width:33%;min-height:108px;padding:15px}
.service-node strong{font-size:14px}
.services-core{width:104px;height:108px;border-radius:28px}
.services-core>span{font-size:38px}
.services-core strong{font-size:11px}
.services-descriptions{padding:30px}
}
@media(min-width:701px) and (max-width:1000px){
.service-node{padding:12px;min-height:104px}
.service-node strong{font-size:12px}
.services-core{width:86px;height:92px;border-radius:24px}
.services-core>span{font-size:32px}
.services-core strong{font-size:10px}
.services-descriptions{padding:24px}
}
/* Orbital service map. Labels stay still; only the connection carries motion. */
.services-map{height:640px;background:radial-gradient(ellipse at center,#dbeaf9a0,transparent 54%),radial-gradient(ellipse at 25% 30%,#f0eafa50,transparent 60%)}
.orbital-connections .service-orbit{fill:none;stroke:#a9c5df;stroke-width:.2;stroke-opacity:.65}
.orbital-connections .orbit-inner{stroke-dasharray:.5 1.2;stroke-opacity:.6}
.orbital-connections path:not(.is-active){stroke-opacity:.17}
.orbital-connections .is-active{stroke-opacity:.8;stroke-width:.4}
.services-core{left:50%;top:50%;width:112px;height:112px;border-radius:50%;background:radial-gradient(circle at 30% 20%,#ffffff,#e0effb 65%,#cbdfef);box-shadow:inset 0 2px 0 #fff,0 0 0 12px #ffffff50,0 0 0 13px #b8d2e430,0 18px 35px #416e9b20}
.service-node{width:25%;min-height:86px;padding:13px;border-radius:20px;background:linear-gradient(135deg,#ffffffec,var(--node-tint));box-shadow:inset 0 1px 0 white,0 8px 20px #3868960c}
.service-node strong{font-size:12px}
.service-node-0{left:50%;top:10%}
.service-node-1{left:80%;top:24%}
.service-node-2{left:86%;top:50%}
.service-node-3{left:80%;top:76%}
.service-node-4{left:50%;top:90%}
.service-node-5{left:20%;top:76%}
.service-node-6{left:14%;top:50%}
.service-node-7{left:20%;top:24%}
.service-node.is-active{box-shadow:inset 0 1px 0 white,0 0 0 5px color-mix(in srgb,var(--node-color) 9%,transparent),0 10px 25px #38689616}
@media(min-width:701px) and (max-width:1000px){.services-map{height:640px}.service-node{width:27%;min-height:90px;padding:11px 9px}.service-node strong{font-size:11px}.services-core{width:94px;height:94px}.services-core strong{font-size:10px}}
@media(max-width:700px){.services-map{height:590px}.service-node{width:30%;min-height:89px;padding:10px 8px;border-radius:16px}.service-node strong{font-size:10px;line-height:1.4}.service-node-1,.service-node-3{left:82%}.service-node-5,.service-node-7{left:18%}.service-node-2{left:84%}.service-node-6{left:16%}.services-core{width:82px;height:82px}.services-core>span{font-size:28px}.services-core strong{font-size:9px}.node-arrow{font-size:12px;right:7px;top:7px}}
@media(prefers-reduced-motion:reduce){.orbit-spark{display:none}}
/* Soft curved links, with a quiet highlight instead of moving dashes. */
.orbital-connections path{stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s,stroke-opacity .45s}
.orbital-connections path:not(.is-active){stroke-width:.18;stroke-opacity:.12}
.orbital-connections path.is-active{stroke-width:.35;stroke-opacity:.55;stroke-dasharray:none;animation:none;filter:drop-shadow(0 0 1px color-mix(in srgb,var(--detail-accent) 25%,transparent))}
/* Colours follow the service as its place in the project sequence changes. */
.service-node-4{--node-tint:#e8f4fa;--node-color:#3e7c95}
.service-node-6{--node-tint:#f0effa;--node-color:#7266a0}
.service-node-7{--node-tint:#f3edfc;--node-color:#825ca6}
.services-system[data-active-service="4"]{--detail-tint:#e8f4fa;--detail-accent:#3e7c95}
.services-system[data-active-service="6"]{--detail-tint:#f0effa;--detail-accent:#7266a0}
.services-system[data-active-service="7"]{--detail-tint:#f3edfc;--detail-accent:#825ca6}
.services-core{font:inherit;cursor:pointer;color:var(--ink);padding:8px}
.orbit-play-state{position:absolute;bottom:5px;font-size:9px;color:#7193ae;line-height:1}
.services-core:focus-visible{outline:2px solid var(--brand);outline-offset:5px}
/* The central project inherits the selected service colour. */
.services-core{background:radial-gradient(circle at 30% 20%,#fff,var(--detail-tint) 65%,color-mix(in srgb,var(--detail-accent) 20%,white));border-color:color-mix(in srgb,var(--detail-accent) 38%,white);box-shadow:inset 0 2px 0 #fff,0 0 0 12px color-mix(in srgb,var(--detail-accent) 7%,transparent),0 0 0 13px color-mix(in srgb,var(--detail-accent) 14%,transparent),0 18px 35px color-mix(in srgb,var(--detail-accent) 18%,transparent);transition:background .5s,border-color .5s,box-shadow .5s}
.services-core>span,.services-core strong,.orbit-play-state{color:var(--detail-accent);transition:color .5s}
.orbit-spark{fill:var(--detail-accent);transition:fill .5s}
@media(prefers-reduced-motion:reduce){.services-core,.services-core>span,.services-core strong,.orbit-play-state,.orbit-spark{transition:none}}
/* Tint the map's central background, keeping its edges light. */
.services-map{background:radial-gradient(ellipse at center,color-mix(in srgb,var(--detail-accent) 18%,transparent) 0%,color-mix(in srgb,var(--detail-accent) 9%,transparent) 32%,transparent 72%),linear-gradient(125deg,#f7fbff,#ffffff);transition:background .5s}
.services-core{background:radial-gradient(circle at 30% 20%,#ffffff,#e0effb 65%,#cbdfef);border-color:#a8c8e8;box-shadow:inset 0 2px 0 #fff,0 0 0 12px #ffffff50,0 0 0 13px #b8d2e430,0 18px 35px #416e9b20}
.services-core>span{color:var(--brand)}.services-core strong{color:var(--ink)}.orbit-play-state{color:#7193ae}
@media(prefers-reduced-motion:reduce){.services-map{transition:none}}
/* Keep the orbital marker visible when it reaches a service card. */
.services-spark-layer{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.services-spark-layer .orbit-spark{display:block;fill:var(--detail-accent);stroke:#fff;stroke-width:.35;filter:drop-shadow(0 0 2px #ffffff);opacity:1}
/* Compact spacing between services and the team. */
#services.section{padding-bottom:28px}
#team.section{padding-top:28px}
@media(max-width:700px){#services.section{padding-bottom:20px}#team.section{padding-top:20px}}
/* Orbit marker passes below the cards rather than across their text. */
.services-spark-layer{z-index:1}
.service-node,.services-core{z-index:2}
.service-node{background:linear-gradient(135deg,#fff,var(--node-tint))}
/* Translucent cards let the orbital marker remain visible underneath. */
.service-node{background:linear-gradient(135deg,#ffffff80,color-mix(in srgb,var(--node-tint) 58%,transparent));backdrop-filter:none}
/* A moving connection from the project to the orbit marker. */
.orbit-tether{fill:none;stroke:var(--detail-accent);stroke-width:.28;stroke-opacity:.45;stroke-linecap:round;transition:stroke .5s}
@media(prefers-reduced-motion:reduce){.orbit-tether{transition:none}}
/* Slightly more compact orbital composition. */
.services-map{height:560px}
.service-node{min-height:78px;padding:11px 12px;border-radius:18px}
.services-core{width:98px;height:98px}
.services-core>span{font-size:32px}
.services-descriptions{padding:26px}
@media(min-width:701px) and (max-width:1000px){.services-map{height:560px}.service-node{min-height:82px;padding:10px 9px}.services-core{width:86px;height:86px}.services-descriptions{padding:22px}}
@media(max-width:700px){.services-map{height:530px}.service-node{min-height:80px;padding:9px 8px}.services-core{width:76px;height:76px}.services-core>span{font-size:26px}.services-descriptions{padding:22px}}
/* Small code fragments travel along the moving connection. */
.orbit-code-stream{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.orbit-code-stream span{position:absolute;transform:translate(-50%,-50%);color:var(--detail-accent);font-family:Consolas,monospace;font-size:12px;font-weight:600;line-height:1;letter-spacing:-.04em;text-shadow:0 1px 3px #fff;will-change:left,top;transition:color .4s}
.orbit-tether{stroke-width:.18;stroke-opacity:.16}
@media(max-width:700px){.orbit-code-stream span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.orbit-code-stream{display:none}}
/* Meaningful PHP chain follows the direction of the data flow. */
.orbit-code-stream span{font-size:12px;font-weight:500;white-space:nowrap;letter-spacing:-.035em;background:color-mix(in srgb,var(--detail-tint) 76%,transparent);padding:3px 5px;border-radius:5px;text-shadow:0 1px 2px #fff}
@media(max-width:700px){.orbit-code-stream span{font-size:9px;padding:2px 3px}}
/* A single valid PHP statement scrolls through a clipped connection. */
.orbit-code-stream{inset:auto;height:22px;overflow:hidden;transform-origin:0 50%;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.orbit-code-stream span{left:0;top:3px;font-size:12px;line-height:16px;padding:0;background:none;opacity:.8;will-change:transform;transition:color .4s;white-space:pre}
@media(max-width:700px){.orbit-code-stream span{font-size:10px}}