/* "How they connect" node map (Builder S). Used on services.html and digital-marketing.html. Prefix: cn- */
.cn { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.cn__side { display: grid; gap: 22px; min-width: 0; }
.cn__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.cn__tab { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: none; cursor: pointer; font: 400 13.5px/1 var(--sans); color: rgba(245, 245, 244, .8); transition: background .3s, color .3s, border-color .3s; }
.cn__tab:hover { border-color: rgba(255, 255, 255, .5); }
.cn__tab[aria-pressed="true"] { background: #fff; border-color: #fff; color: #050505; }
.cn__card { min-height: 220px; padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--line-2); border-radius: 20px; background: #0a0a0a; }
.cn__card .mono-l { margin-bottom: 14px; color: var(--lime); }
.cn__card h3 { font: 500 clamp(26px, 2.6vw, 38px)/1.05 var(--sans); letter-spacing: -.045em; }
.cn__card p:not(.mono-l) { margin-top: 12px; max-width: 40ch; color: rgba(245, 245, 244, .72); }
.cn__card .link { margin-top: 22px; }
html[data-motion="on"] .cn__card.is-swap { animation: cn-swap .5s var(--ease); }
@keyframes cn-swap { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.cn__note { font: 400 11px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

.cn__map { position: relative; width: 100%; max-width: 760px; justify-self: end; aspect-ratio: 640 / 560; container-type: inline-size; }
.cn__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cn__ring { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 1.2; stroke-dasharray: 2 7; }
.cn__ln { stroke: rgba(255, 255, 255, .2); stroke-width: 1.2; stroke-dasharray: 3 6; transition: stroke .35s, opacity .35s, stroke-width .35s; }
.cn__ln.is-lit { stroke: var(--lime); stroke-width: 1.8; stroke-dasharray: none; opacity: 1; }
.cn__dot { fill: #fff; opacity: .9; transition: opacity .35s; }
.cn__dot.is-lit { fill: var(--lime); filter: drop-shadow(0 0 5px rgba(198, 244, 50, .9)); }
.cn[data-group="in"] .cn__ln:not([data-g="in"]), .cn[data-group="why"] .cn__ln:not([data-g="why"]), .cn[data-group="keep"] .cn__ln:not([data-g="keep"]) { opacity: .15; }
.cn[data-group="in"] .cn__dot:not([data-g="in"]), .cn[data-group="why"] .cn__dot:not([data-g="why"]), .cn[data-group="keep"] .cn__dot:not([data-g="keep"]) { opacity: 0; }
.cn[data-group="in"] .cn__ln[data-g="in"], .cn[data-group="why"] .cn__ln[data-g="why"], .cn[data-group="keep"] .cn__ln[data-g="keep"] { stroke: rgba(198, 244, 50, .75); stroke-dasharray: none; }

.cn__n { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 24%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, -50%); color: inherit; transition: opacity .35s; }
.cn__c { display: grid; place-items: center; width: clamp(46px, 11cqw, 70px); height: clamp(46px, 11cqw, 70px); border: 1px solid var(--line-2); border-radius: 50%; background: #0e0e0e; color: rgba(245, 245, 244, .8); box-shadow: 0 0 0 6px #050505; transition: border-color .3s, color .3s, background .3s, box-shadow .4s, transform .5s var(--ease); }
.cn__c .ic { width: clamp(20px, 4.4cqw, 28px); height: clamp(20px, 4.4cqw, 28px); }
.cn__l { max-width: 100%; font: 500 clamp(11px, 2.1cqw, 14px)/1.2 var(--sans); letter-spacing: -.01em; color: rgba(245, 245, 244, .72); text-align: center; transition: color .3s; }
.cn__n:hover .cn__c, .cn__n:focus-visible .cn__c { color: #fff; border-color: rgba(255, 255, 255, .6); transform: scale(1.06); }
.cn__n:hover .cn__l, .cn__n:focus-visible .cn__l { color: #fff; }
.cn__n.is-sel .cn__c { color: #fff; border-color: var(--lime); box-shadow: 0 0 0 6px #050505, 0 0 0 7px rgba(198, 244, 50, .35), 0 0 36px rgba(198, 244, 50, .22); }
.cn__n.is-sel .cn__l { color: #fff; }
.cn__n--hub .cn__c { width: clamp(64px, 16cqw, 104px); height: clamp(64px, 16cqw, 104px); background: #fff; color: #050505; border-color: #fff; }
.cn__n--hub .cn__c .ic { width: clamp(26px, 6.5cqw, 40px); height: clamp(26px, 6.5cqw, 40px); }
.cn__n--hub:hover .cn__c, .cn__n--hub:focus-visible .cn__c, .cn__n--hub.is-sel .cn__c { color: #050505; border-color: #fff; }
.cn__n--hub.is-sel .cn__c { box-shadow: 0 0 0 6px #050505, 0 0 0 7px rgba(198, 244, 50, .55), 0 0 40px rgba(198, 244, 50, .3); }
.cn__n--hub .cn__l { font-weight: 600; color: #fff; }
.cn[data-group="in"] .cn__n:not([data-g="in"]):not(.cn__n--hub), .cn[data-group="why"] .cn__n:not([data-g="why"]):not(.cn__n--hub), .cn[data-group="keep"] .cn__n:not([data-g="keep"]):not(.cn__n--hub) { opacity: .3; }
.cn__plan { position: absolute; left: 50%; bottom: 0; z-index: 2; display: inline-flex; align-items: center; gap: 9px; max-width: 94%; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: #080808; font: 400 clamp(9px, 1.7cqw, 11px)/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: rgba(245, 245, 244, .8); transform: translate(-50%, 50%); white-space: nowrap; transition: color .3s, border-color .3s; }
.cn__plan:hover { color: #fff; border-color: var(--lime); }
.cn__plan .dot { width: 5px; height: 5px; }
html[data-motion="off"] .cn__c, html[data-motion="off"] .cn__ln { transition: none; }

@media (max-width: 960px) {
  .cn { grid-template-columns: 1fr; gap: 28px; }
  .cn__map { justify-self: center; }
  .cn__card { min-height: 0; }
}
@media (max-width: 560px) {
  .cn__tab { height: 36px; padding: 0 13px; font-size: 13px; }
  .cn__plan span { overflow: hidden; text-overflow: ellipsis; }
  .cn__n { gap: 6px; width: 26%; }
}