/* GV service network: rounded branches, six connected services, one clear center. */
.service-network{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 144px minmax(0,1fr);grid-template-rows:repeat(3,88px);gap:32px 112px;align-items:center;max-width:1120px;margin:0 auto}
.service-hub{position:relative;z-index:2;grid-column:2;grid-row:1/span 3;align-self:center;justify-self:center;display:grid;place-items:center;width:144px;height:144px;padding:24px;border:1px solid var(--blue);border-radius:28px;background:var(--bg)}
.service-hub img{width:96px;height:76px;object-fit:contain}
.service-network .service-node{position:relative;z-index:1;display:grid;grid-template-columns:40px minmax(0,1fr) 18px;align-items:center;gap:16px;min-width:0;height:88px;margin:0;padding:20px;border:1px solid var(--rule-subtle);border-radius:12px;background:var(--bg);color:var(--ink);font:600 21px/1.25 var(--font-display);letter-spacing:-.02em;text-align:left;cursor:pointer;appearance:none;transition:border-color 180ms var(--m-ease),background-color 180ms var(--m-ease)}
.service-node[data-side=left]{grid-column:1}.service-node[data-side=right]{grid-column:3}
.service-node[data-row="1"]{grid-row:1}.service-node[data-row="2"]{grid-row:2}.service-node[data-row="3"]{grid-row:3}
.service-symbol-box{display:grid;place-items:center;width:40px;height:40px;color:var(--blue)}
.service-symbol{width:32px;height:32px}
.service-node-label{min-width:0;hyphens:auto}
.service-node-arrow{width:18px;height:18px;color:var(--blue)}
.service-connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.network-route,.network-signal{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.network-route{stroke:color-mix(in srgb,var(--blue) 36%,var(--bg));stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke 180ms var(--m-ease)}
.network-route.is-active{stroke:var(--blue)}
.network-signal{stroke:var(--blue);stroke-width:3;stroke-dasharray:.08 1;stroke-dashoffset:.08;opacity:0}
.service-network.network-ready:not(.is-network-visible) .network-route{stroke-dashoffset:1}
.service-network.network-ready.is-network-visible .network-route{animation:service-connection-draw 850ms var(--m-ease) var(--route-delay,0ms) both}
@keyframes service-connection-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(hover:hover) and (pointer:fine){.service-network .service-node:hover{border-color:var(--blue);background:var(--card)}}
.service-network .service-node:focus-visible{border-color:var(--blue);outline:2px solid var(--blue);outline-offset:5px}
@media(max-width:1199px){.service-network{grid-template-columns:minmax(0,1fr) 128px minmax(0,1fr);column-gap:64px}.service-hub{width:128px;height:128px;padding:20px;border-radius:24px}.service-hub img{width:88px;height:68px}.service-network .service-node{font-size:19px;gap:12px;grid-template-columns:32px minmax(0,1fr) 16px;padding:16px}.service-symbol-box{width:32px;height:32px}.service-symbol{width:28px;height:28px}}
@media(max-width:959px){.service-network{grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr);column-gap:40px;row-gap:24px}.service-hub{width:112px;height:112px;padding:16px;border-radius:24px}.service-hub img{width:80px;height:60px}.service-network .service-node{font-size:18px;grid-template-columns:28px minmax(0,1fr);gap:12px}.service-symbol-box{width:28px;height:32px}.service-node-arrow{display:none}}
@media(max-width:767px){
 .service-network{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:96px repeat(3,112px);gap:20px 32px;margin-top:0}
 .service-hub{grid-column:1/-1;grid-row:1;width:96px;height:96px;padding:16px;border-radius:20px}
 .service-hub img{width:64px;height:48px}
 .service-node[data-side=left]{grid-column:1}.service-node[data-side=right]{grid-column:2}
 .service-node[data-row="1"]{grid-row:2}.service-node[data-row="2"]{grid-row:3}.service-node[data-row="3"]{grid-row:4}
 .service-network .service-node{height:112px;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:12px 8px;font-size:16px;line-height:1.25;text-align:center}
 .service-symbol-box{width:32px;height:32px}
 .service-symbol{width:28px;height:28px}
 .service-node-label{width:100%}
}
@media(max-width:359px){.service-network{column-gap:28px}.service-network .service-node{font-size:14px}}
html[data-input=keyboard] .network-route,html[data-motion=off] .network-route{stroke-dashoffset:0!important;animation:none!important;transition:none}
html[data-input=keyboard] .network-signal,html[data-motion=off] .network-signal{display:none}

/* The selected service is explained once, in a compact strip below the diagram. */
.service-network .service-node[aria-pressed=true]{border-color:var(--blue);color:var(--bg);background:var(--blue)}
.service-node-arrow{transform:rotate(90deg)}
.service-details{display:grid;max-width:1120px;margin:40px auto 0;padding-top:28px;border-top:1px solid var(--rule-subtle)}
.service-detail{grid-area:1/1;display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.5fr) auto;gap:32px;align-items:start;visibility:hidden;opacity:0;pointer-events:none}
.service-detail.is-selected{visibility:visible;opacity:1;pointer-events:auto;transition:opacity 180ms var(--m-ease)}
.services-section .service-detail-title{font-size:24px;line-height:1.25;letter-spacing:-.02em;margin:0}
.service-detail p{font-size:16px;line-height:1.65;margin:0;max-width:60ch}
.service-detail .service-inquiry{font-size:15px;gap:12px;line-height:1.5;align-self:start;white-space:nowrap;margin:0;padding:0 0 9px;color:var(--blue)}
.service-fallback{display:grid;gap:16px;list-style:none;padding:0}
@media(max-width:1199px){.service-detail{grid-template-columns:1fr 1.6fr;gap:12px 32px}.service-detail .service-inquiry{grid-column:2;justify-self:start}.services-section .service-detail-title{grid-row:1/span 2;font-size:22px}}
@media(max-width:767px){.service-details{margin-top:28px;padding-top:24px}.service-detail{grid-template-columns:1fr;gap:12px}.services-section .service-detail-title{grid-row:auto;font-size:22px}.service-detail p{font-size:15px}.service-detail .service-inquiry{grid-column:1;margin-top:4px;font-size:15px;white-space:normal}}
@media(prefers-reduced-motion:reduce){.network-route{stroke-dashoffset:0!important;animation:none!important;transition:none}.network-signal{display:none}.service-network .service-node,.service-detail.is-selected{transition:none}}
html[data-input=keyboard] .service-detail.is-selected,html[data-motion=off] .service-detail.is-selected{transition:none}

/* GV is the overview; selecting a branch brings its own copy into focus. */
.service-hub{appearance:none;cursor:pointer;transition:background-color 180ms var(--m-ease),border-color 180ms var(--m-ease)}
.service-hub[aria-pressed=true]{background:var(--yellow);border-color:var(--yellow)}
.service-hub img{transition:transform 150ms var(--m-ease)}
.service-hub:active img{transform:scale(.95)}
.service-hub:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
.service-network.is-overview .network-route:not(.is-active){stroke:color-mix(in srgb,var(--blue) 60%,var(--bg))}
.service-network .service-node[aria-pressed=true] .service-symbol-box,.service-network .service-node[aria-pressed=true] .service-node-arrow{color:var(--yellow)}
.service-network .service-symbol{transition:transform 180ms var(--m-ease)}
.service-network .service-node[aria-pressed=true] .service-symbol{transform:scale(1.08)}
@media(hover:hover) and (pointer:fine){.service-hub:hover img{transform:scale(1.05)}.service-hub:active img{transform:scale(.95)}}
@media(prefers-reduced-motion:reduce){.service-hub,.service-hub img,.service-network .service-symbol{transition:none}.service-hub img,.service-network .service-node .service-symbol{transform:none!important}}
html[data-input=keyboard] .service-hub,html[data-input=keyboard] .service-hub img,html[data-input=keyboard] .service-network .service-symbol,html[data-motion=off] .service-hub,html[data-motion=off] .service-hub img,html[data-motion=off] .service-network .service-symbol{transition:none}
html[data-input=keyboard] .service-hub img,html[data-input=keyboard] .service-network .service-node .service-symbol,html[data-motion=off] .service-hub img,html[data-motion=off] .service-network .service-node .service-symbol{transform:none!important}

html[data-input=keyboard] .service-network .service-node,html[data-motion=off] .service-network .service-node{transition:none}