/* What's involved: one store cutaway beside the six services; the service in view lights in gold. */
.home-refined .services-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:start;margin-top:56px}
.home-refined .services-wrap .places.services{margin-top:0}
.home-refined .services-wrap .services .place{display:block;padding-block:28px}
.home-refined .services-wrap .services .place ul{margin-top:14px}
.svc-stage{position:sticky;top:110px;height:min(560px,calc(100svh - 150px));display:grid;align-content:center;gap:14px}
.svc-scene{width:100%;height:100%;margin:0}
.svc-scene svg{width:100%;height:100%}
.svc-caption{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--mono,"DM Mono",monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--stone,#596571)}
.svc-caption b{color:var(--ink,#17212B);font-weight:500}
.svc-caption i{width:18px;height:1px;background:var(--iso-g3,#A48743)}
.svc-scene .wall{fill:rgba(23,33,43,.018);stroke:var(--iso-faint);stroke-width:.8}
.svc-scene .wall-edge{fill:none;stroke:var(--iso-line);stroke-width:.85}
.svc-scene .paper{fill:rgba(255,255,255,.7);stroke:var(--iso-line);stroke-width:.7}
.svc-scene .antenna,.svc-scene .slot,.svc-scene .board-line,.svc-scene .cal{fill:none;stroke:var(--iso-line);stroke-width:.8}
.svc-scene .wifi{fill:none;stroke:var(--iso-g3);stroke-width:1;opacity:.2;animation:svc-wifi 2.4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes svc-wifi{0%,100%{opacity:.15}40%{opacity:.85}}
.svc-scene .cable,.svc-scene .link{fill:none;stroke:var(--iso-g3);stroke-width:1;stroke-dasharray:2 4;animation:iso-route 1.2s linear infinite;opacity:.6}
.svc-scene .board{fill:rgba(255,255,255,.5);stroke:var(--iso-line);stroke-width:.85}
.svc-scene .head{fill:rgba(255,255,255,.7);stroke:var(--iso-line);stroke-width:.85}
.svc-scene .bag{fill:var(--iso-g2);fill-opacity:.18;stroke:var(--iso-line);stroke-width:.8}
.svc-scene .card{fill:var(--iso-g1);fill-opacity:.25;stroke:var(--iso-g3);stroke-width:.85}
.svc-scene .estate{animation:svc-estate 6s linear infinite;animation-delay:calc(var(--i) * .7s)}
@keyframes svc-estate{0%,8%{opacity:.35}14%,80%{opacity:1}92%,100%{opacity:.35}}
.svc-scene text{font-size:7px}
/* Lighting: the active service in gold, the rest stepping back. */
.svc-scene .layer{transition:opacity .45s ease}
.svc-scene[data-active] .layer{opacity:.32}
.svc-scene[data-active] .layer.is-lit{opacity:1}
.svc-scene .layer.is-lit :is(.f-top,.f-left,.f-right,.screen,.board,.head,.wall-edge,.antenna,.slot,.board-line,.cal,.paper,.till-screen,.mark){stroke:var(--hl);stroke-width:1.1}
.svc-scene .layer.is-lit .f-top{fill:color-mix(in srgb,var(--hl) 14%,transparent)}
.svc-scene .layer.is-lit :is(.f-left,.f-right){fill:color-mix(in srgb,var(--hl) 7%,transparent)}
.svc-scene .layer.is-lit :is(.wifi,.cable,.link,.route){stroke:var(--hl);opacity:.95}
/* Each service takes its own colour from the ring, so neighbouring highlights read apart. */
.services-wrap{--hl:#246ED1}
.services-wrap[data-active="hardware"]{--hl:#246ED1}
.services-wrap[data-active="network"]{--hl:#7D59C2}
.services-wrap[data-active="integration"]{--hl:#CC3D87}
.services-wrap[data-active="cutover"]{--hl:#6E9F2E}
.services-wrap[data-active="training"]{--hl:#4E63CB}
.services-wrap[data-active="ecosystem"]{--hl:#A84FA6}
.svc-caption i{background:var(--hl)}
.services-wrap .place.is-lit .svc-icon{border-color:color-mix(in srgb,var(--hl) 45%,transparent)}
.services-wrap .place.is-lit h3{color:var(--ink,#17212B)}
.home-refined .services .place.is-lit h3{color:var(--ink,#17212B)}
.home-refined .services-wrap .services .place{transition:opacity .35s ease}
.home-refined .services-wrap.is-driven .services .place:not(.is-lit){opacity:.55}
@media(max-width:900px){
  .home-refined .services-wrap{grid-template-columns:minmax(0,1fr);gap:0}
  .svc-stage{order:-1;position:static;height:auto;margin:8px 0 8px}
  .svc-scene{height:240px}
  .home-refined .services-wrap.is-driven .services .place:not(.is-lit){opacity:1}
}
@media(prefers-reduced-motion:reduce){.svc-scene *{animation:none!important;transition:none!important}}
.iso.svc-scene{height:100%;order:0;margin:0}
.svc-scene .iso-fibre{opacity:.38}.svc-scene .iso-pulse{opacity:.5}

/* Service heads: a strand-woven icon to the left of the heading, the line beneath the heading. */
.home-refined .services-wrap .service-head{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:18px;align-items:center}
.home-refined .services-wrap .service-head h3{margin:0;grid-column:2}
.home-refined .services-wrap .service-head p{grid-column:2;margin-top:8px}
.home-refined .services-wrap .services .place ul{margin-left:74px}
.svc-icon.is-strand{width:56px;height:56px;border:0;border-radius:0;background:none;grid-row:1}
.svc-icon.is-strand svg{width:56px;height:56px}
.services-wrap .place .svc-icon.is-strand{transition:opacity .35s ease,transform .45s ease}
.services-wrap.is-driven .place:not(.is-lit) .svc-icon.is-strand{opacity:.6}
.services-wrap .place.is-lit .svc-icon.is-strand{transform:rotate(-6deg) scale(1.04)}
@media(max-width:640px){
  .home-refined .services-wrap .service-head{grid-template-columns:44px minmax(0,1fr);column-gap:14px}
  .svc-icon.is-strand,.svc-icon.is-strand svg{width:44px;height:44px}
  .home-refined .services-wrap .services .place ul{margin-left:0}
}