/* FIXD — one-number service network.
   Desktop: an SVG hub with six spokes; hovering or focusing a spoke lights it
   and swaps the readout beside it. Phones get the same content as a plain
   accordion, because a hover graph is useless on touch. */

.network { background: var(--black); color: var(--white); }

.network__grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.network__title { font-size: var(--t-huge); font-variation-settings: 'wdth' 78; }
.network__copy { color: var(--white-72); max-width: 42ch; margin-top: 1.1rem; }
.network__copy b { color: var(--white); font-weight: 600; }

/* --- graph (desktop) --------------------------------------------------- */
.network__graph { display: none; }

.graph { width: 100%; height: auto; overflow: visible; }

.graph__spoke {
  stroke: var(--white-16);
  stroke-width: 1.5;
  transition: stroke var(--dur-sm) var(--ease-snap), stroke-width var(--dur-sm) var(--ease-snap);
}
.graph__hub circle { fill: var(--yellow); }
.graph__hub text {
  fill: var(--black);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 25px;
  letter-spacing: -.02em;
  text-anchor: middle;
}
.graph__hub { transition: transform var(--dur-md) var(--ease-snap); transform-origin: 260px 260px; }
.graph.is-live .graph__hub { transform: scale(1.06); }

.node { cursor: pointer; }
.node circle {
  fill: var(--black);
  stroke: var(--white-16);
  stroke-width: 1.5;
  transition: fill var(--dur-sm) var(--ease-snap), stroke var(--dur-sm) var(--ease-snap);
}
.node text {
  fill: var(--white-72);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-anchor: middle;
  transition: fill var(--dur-sm) var(--ease-snap);
  pointer-events: none;
}
.node:hover circle, .node.is-on circle { fill: var(--yellow); stroke: var(--yellow); }
.node:hover text, .node.is-on text { fill: var(--yellow); }
.node.is-on ~ * { /* keeps specificity simple; no visual effect */ }
.node:focus { outline: none; }
.node:focus-visible circle { stroke: var(--yellow); stroke-width: 3; }
.spoke.is-on { stroke: var(--yellow); stroke-width: 3; }

/* --- readout ----------------------------------------------------------- */
.network__read {
  display: none;
  border-top: 3px solid var(--yellow);
  background: var(--graphite);
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
  min-height: 168px;
}
.network__read h3 {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-variation-settings: 'wdth' 80;
  margin-bottom: .5rem;
}
.network__read p { color: var(--white-72); }
.js .network__read h3, .js .network__read p { transition: opacity .2s linear; }
.network__read.is-swapping h3, .network__read.is-swapping p { opacity: 0; }

/* --- accordion (mobile) ------------------------------------------------ */
.acc { border-top: 1px solid var(--white-16); }
.network__acc { margin-top: 1.75rem; }
.acc__item { border-bottom: 1px solid var(--white-16); }
.acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.05rem 0;
  border: 0;
  background: transparent;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  font-variation-settings: 'wdth' 84;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.acc__btn i {
  position: relative;
  flex: none;
  width: 18px; height: 18px;
}
.acc__btn i::before, .acc__btn i::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--yellow);
  transition: transform var(--dur-sm) var(--ease-snap);
}
.acc__btn i::after { transform: rotate(90deg); }
.acc__btn[aria-expanded='true'] i::after { transform: rotate(0deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-md) var(--ease-snap); }
.acc__panel > div { overflow: hidden; }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel p { color: var(--white-72); padding-bottom: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
  .acc__panel, .graph__hub, .node circle, .node text, .spoke { transition: none; }
}

@media (min-width: 900px) {
  .network__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); }
  .network__graph { display: block; }
  .network__read { display: block; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
  .network__acc { display: none; }
}