/* ============================================================
   ai-call-centre.css — "THE BRIGHT CALL FLOOR" (Phone Service)
   /solutions/communications/phone-service

   A bright, premium sand-blue switchboard. Incoming calls are
   travelling lights on wires that route through a Call Pop seat —
   the caller's chart on screen the instant the line opens, so a
   HUMAN answers already informed — and land as logged outcomes on
   the line board (answered, chart popped, recorded, texted back).
   Everything is namespaced under .cxp-callcentre. The resting
   (no-JS / reduced motion) markup is a COMPLETE composed scene:
   lines lit, the seat mid-call, outcomes landed, the board counted.
   JS only layers travelling pulses, ticking tallies and status
   swaps on top.

   Tokens inherited from styles.css (--indigo, --ink, --line, --font,
   radii, shadows). Comms accent = sand-blue #5a82c2, layered under
   the house indigo. Light + indigo + sand-blue only — no rainbow,
   no dark navy, no teal.
   ============================================================ */

.cxp-callcentre {
  --ccn-night: #f4f7fc;
  --ccn-night-2: #eef2fb;
  --ccn-teal: #5a82c2;
  --ccn-teal-deep: #3d63a4;
  --ccn-teal-lite: #8aa6dd;
  --ccn-white: #0b1020;
  --ccn-dim: #4a5066;
  --ccn-faint: #7a8096;
  --ccn-hair: #e9ebf4;
  --ccn-hair-2: #dfe3ef;
  --ccn-glass: #fbfcff;
  font-family: var(--font);
  color: var(--ccn-white);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

.cxp-callcentre ::selection {
  background: rgba(90, 130, 194, 0.22);
  color: #0b1020;
}

/* ============================================================
   1 · HERO — the bright call floor
   ============================================================ */

.cxp-callcentre .ccn-hero {
  position: relative;
  padding: clamp(128px, 16vh, 176px) 0 clamp(72px, 8vw, 110px);
  background:
    radial-gradient(90% 60% at 50% -8%, #eef2fb 0%, transparent 60%),
    radial-gradient(70% 46% at 78% 26%, rgba(59, 79, 224, 0.07) 0%, transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fe 55%, var(--ccn-night-2) 100%);
}

/* --- the airy backdrop -------------------------------------- */
.cxp-callcentre .ccn-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* a faint sand-blue grid instead of a night sky */
.cxp-callcentre .ccn-stars {
  position: absolute;
  inset: 0 0 30% 0;
  background-image:
    linear-gradient(rgba(90, 130, 194, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 130, 194, 0.06) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 92%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 92%);
  animation: ccnTwinkle 4.1176s ease-in-out infinite alternate;
}

@keyframes ccnTwinkle {
  from { opacity: 0.6; }
  to { opacity: 0.95; }
}

.cxp-callcentre .ccn-glow {
  position: absolute;
  left: 50%;
  bottom: -12%;
  width: min(1100px, 120vw);
  height: 560px;
  transform: translateX(-50%);
  background:
    radial-gradient(52% 48% at 50% 62%, rgba(90, 130, 194, 0.14) 0%, transparent 68%),
    radial-gradient(70% 60% at 50% 70%, rgba(59, 79, 224, 0.11) 0%, transparent 72%);
  filter: blur(6px);
  animation: ccnBreathe 5.2941s ease-in-out infinite alternate;
}

@keyframes ccnBreathe {
  from { opacity: 0.7; transform: translateX(-50%) scale(0.98); }
  to { opacity: 1; transform: translateX(-50%) scale(1.03); }
}

.cxp-callcentre .ccn-floorline {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(1240px, 94vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(90, 130, 194, 0.3) 30%,
    rgba(122, 140, 255, 0.34) 50%,
    rgba(90, 130, 194, 0.3) 70%,
    transparent 100%);
}
.cxp-callcentre .ccn-floorline::after {
  content: "";
  position: absolute;
  inset: auto 10% -34px 10%;
  height: 34px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(90, 130, 194, 0.12), transparent 75%);
}

/* --- hero copy ---------------------------------------------- */
.cxp-callcentre .ccn-hero-head {
  position: relative;
  text-align: center;
  max-width: 60rem;
  margin-inline: auto;
}

.cxp-callcentre .ccn-back {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ccn-faint);
  margin-bottom: clamp(26px, 4vw, 42px);
  transition: color 0.2s ease;
}
.cxp-callcentre .ccn-back:hover { color: var(--ccn-white); }

.cxp-callcentre .ccn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ccn-teal-deep);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(90, 130, 194, 0.28);
  background: rgba(90, 130, 194, 0.08);
}
.cxp-callcentre .ccn-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ccn-teal);
  box-shadow: 0 0 0 0 rgba(90, 130, 194, 0.5);
  animation: ccnLiveDot 1.4118s ease-out infinite;
}

@keyframes ccnLiveDot {
  0% { box-shadow: 0 0 0 0 rgba(90, 130, 194, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(90, 130, 194, 0); }
  100% { box-shadow: 0 0 0 0 rgba(90, 130, 194, 0); }
}

.cxp-callcentre .ccn-h1 {
  margin: clamp(20px, 3vw, 28px) auto 0;
  max-width: 17ch;
  font-size: clamp(2.55rem, 6vw, 4.35rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.033em;
  color: var(--ccn-white);
  text-wrap: balance;
}

.cxp-callcentre .ccn-grad {
  background: linear-gradient(96deg, var(--ccn-teal-deep) 8%, #3b4fe0 55%, var(--ccn-teal) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cxp-callcentre .ccn-lead {
  margin: clamp(18px, 2.6vw, 26px) auto 0;
  max-width: 60ch;
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  line-height: 1.66;
  letter-spacing: -0.008em;
  color: var(--ccn-dim);
  text-wrap: pretty;
}

.cxp-callcentre .ccn-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(16px, 2.5vw, 26px);
  margin-top: clamp(26px, 3.4vw, 36px);
}

.cxp-callcentre .ccn-ghostlink {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ccn-dim);
  transition: color 0.2s ease;
}
.cxp-callcentre .ccn-ghostlink .arrow {
  display: inline-block;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1.2);
}
.cxp-callcentre .ccn-ghostlink:hover { color: var(--ccn-white); }
.cxp-callcentre .ccn-ghostlink:hover .arrow { transform: translate(3px, 1px); }

/* three de-boxed proof chips — hairline dividers, no cards */
.cxp-callcentre .ccn-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(34px, 4.6vw, 52px);
}
.cxp-callcentre .ccn-chip {
  display: grid;
  gap: 3px;
  text-align: left;
  padding: 2px clamp(20px, 3vw, 34px);
}
.cxp-callcentre .ccn-chip + .ccn-chip {
  border-left: 1px solid var(--ccn-hair);
}
.cxp-callcentre .ccn-chip b {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ccn-white);
}
.cxp-callcentre .ccn-chip span {
  font-size: 12.5px;
  color: var(--ccn-faint);
  letter-spacing: -0.005em;
}

/* ============================================================
   THE SWITCHBOARD STAGE
   Geometry mirrors the SVG viewBox (1200 × 470):
   ports end at x=232 · seat spans 506–694 (centre 600,235) ·
   outcome cards begin at x=968 · rows sit at y 100/190/280/370.
   ============================================================ */

.cxp-callcentre .ccn-stage {
  position: relative;
  margin-top: clamp(48px, 6.5vw, 84px);
  aspect-ratio: 1200 / 470;
}

.cxp-callcentre .ccn-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cxp-callcentre .ccn-wires path {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.55;
}
.cxp-callcentre .ccn-wires path[data-ccn-wire^="in"] { stroke: url(#ccnWireIn); }
.cxp-callcentre .ccn-wires path[data-ccn-wire^="out"] { stroke: url(#ccnWireOut); }

/* a slow current drifting along every line — the floor feels powered */
.cxp-callcentre .ccn-wires path[data-ccn-wire] {
  stroke-dasharray: 3 9;
  animation: ccnCurrent 1.6471s linear infinite;
}
@keyframes ccnCurrent {
  to { stroke-dashoffset: -12; }
}
.cxp-callcentre .ccn-wires path[data-ccn-wire="in-1"],
.cxp-callcentre .ccn-wires path[data-ccn-wire="out-2"] { animation-delay: -0.6s; }
.cxp-callcentre .ccn-wires path[data-ccn-wire="in-2"],
.cxp-callcentre .ccn-wires path[data-ccn-wire="out-1"] { animation-delay: -1.1333s; }
.cxp-callcentre .ccn-wires path[data-ccn-wire="in-3"],
.cxp-callcentre .ccn-wires path[data-ccn-wire="out-0"] { animation-delay: -1.2941s; }

/* the wire a call is actively travelling gets brighter (JS adds .is-hot) */
.cxp-callcentre .ccn-wires path.is-hot {
  opacity: 1;
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(90, 130, 194, 0.5));
  transition: opacity 0.3s ease;
}

/* JS-injected travelling call lights */
.cxp-callcentre .ccn-pulse {
  fill: var(--ccn-teal);
  filter: drop-shadow(0 0 7px rgba(90, 130, 194, 0.85)) drop-shadow(0 0 18px rgba(90, 130, 194, 0.5));
}
.cxp-callcentre .ccn-pulse--out {
  fill: #6a7cff;
  filter: drop-shadow(0 0 7px rgba(122, 140, 255, 0.85)) drop-shadow(0 0 18px rgba(59, 79, 224, 0.5));
}

/* --- incoming lines (left) ---------------------------------- */
.cxp-callcentre .ccn-ports,
.cxp-callcentre .ccn-outs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cxp-callcentre .ccn-port {
  position: absolute;
  left: 0;
  width: 19%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 11px;
}
.cxp-callcentre .ccn-port[data-ccn-port="0"] { top: 21.28%; }
.cxp-callcentre .ccn-port[data-ccn-port="1"] { top: 40.43%; }
.cxp-callcentre .ccn-port[data-ccn-port="2"] { top: 59.57%; }
.cxp-callcentre .ccn-port[data-ccn-port="3"] { top: 78.72%; }

.cxp-callcentre .ccn-port-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(11, 16, 32, 0.12);
  box-shadow: inset 0 0 0 1px rgba(11, 16, 32, 0.1);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

.cxp-callcentre .ccn-port-meta {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.cxp-callcentre .ccn-port-meta b {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ccn-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.35s ease;
}
.cxp-callcentre .ccn-port-meta i {
  font-style: normal;
  font-size: 11.5px;
  color: #9aa0b4;
  white-space: nowrap;
}

.cxp-callcentre .ccn-port.is-live .ccn-port-dot {
  background: var(--ccn-teal);
  box-shadow: 0 0 0 3px rgba(90, 130, 194, 0.18), 0 0 14px rgba(90, 130, 194, 0.55);
  animation: ccnLiveDot 1.4118s ease-out infinite;
}
.cxp-callcentre .ccn-port.is-live .ccn-port-meta b { color: var(--ccn-white); }

/* an inbound ring, pre-answer (JS) — the dot blinks */
.cxp-callcentre .ccn-port.is-ring .ccn-port-dot {
  background: var(--ccn-teal-lite);
  box-shadow: 0 0 12px rgba(138, 166, 221, 0.8);
  animation: ccnRingBlink 0.3333s steps(2, jump-none) infinite;
}
.cxp-callcentre .ccn-port.is-ring .ccn-port-meta b { color: var(--ccn-white); }

@keyframes ccnRingBlink {
  from { opacity: 1; }
  to { opacity: 0.35; }
}

/* --- the Call Pop seat (centre) ------------------------------ */
.cxp-callcentre .ccn-seat {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(180px, 17.5%, 220px);
  display: grid;
  place-items: center;
}

.cxp-callcentre .ccn-seat-ring {
  position: absolute;
  width: 118%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(90, 130, 194, 0.32);
  opacity: 0;
}
.cxp-callcentre .ccn-seat.is-talking .ccn-seat-ring {
  animation: ccnRingOut 1.8824s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.cxp-callcentre .ccn-seat.is-talking .ccn-seat-ring.r2 {
  animation-delay: 1.0667s;
}

@keyframes ccnRingOut {
  0% { transform: scale(0.62); opacity: 0; }
  18% { opacity: 0.85; }
  100% { transform: scale(1.28); opacity: 0; }
}

.cxp-callcentre .ccn-seat-core {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
  padding: 22px 16px 20px;
  border-radius: var(--r-soft);
  border: 1px solid rgba(90, 130, 194, 0.24);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(90, 130, 194, 0.1) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff, #f7f9fe);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    0 0 0 1px rgba(233, 235, 244, 0.9),
    0 18px 50px -18px rgba(90, 130, 194, 0.32),
    0 30px 70px -30px rgba(59, 79, 224, 0.22);
}

.cxp-callcentre .ccn-seat-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ccn-teal-deep);
}

/* the voice — a 7-bar waveform */
.cxp-callcentre .ccn-wave {
  display: flex;
  align-items: center;
  gap: 3.5px;
  height: 26px;
}
.cxp-callcentre .ccn-wave i {
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--ccn-teal-lite), var(--ccn-teal));
  box-shadow: 0 0 8px rgba(90, 130, 194, 0.45);
}
/* composed resting heights — the wave reads mid-sentence even frozen */
.cxp-callcentre .ccn-wave i:nth-child(1) { height: 8px; }
.cxp-callcentre .ccn-wave i:nth-child(2) { height: 15px; }
.cxp-callcentre .ccn-wave i:nth-child(3) { height: 22px; }
.cxp-callcentre .ccn-wave i:nth-child(4) { height: 12px; }
.cxp-callcentre .ccn-wave i:nth-child(5) { height: 19px; }
.cxp-callcentre .ccn-wave i:nth-child(6) { height: 9px; }
.cxp-callcentre .ccn-wave i:nth-child(7) { height: 16px; }

.cxp-callcentre .ccn-seat.is-talking .ccn-wave i {
  animation: ccnWave 0.7s ease-in-out infinite alternate;
}
.cxp-callcentre .ccn-seat.is-talking .ccn-wave i:nth-child(1) { animation-delay: -0.15s; }
.cxp-callcentre .ccn-seat.is-talking .ccn-wave i:nth-child(2) { animation-delay: -0.4133s; }
.cxp-callcentre .ccn-seat.is-talking .ccn-wave i:nth-child(3) { animation-delay: -0.2267s; }
.cxp-callcentre .ccn-seat.is-talking .ccn-wave i:nth-child(4) { animation-delay: -0.5667s; }
.cxp-callcentre .ccn-seat.is-talking .ccn-wave i:nth-child(5) { animation-delay: -0.05s; }
.cxp-callcentre .ccn-seat.is-talking .ccn-wave i:nth-child(6) { animation-delay: -0.3333s; }
.cxp-callcentre .ccn-seat.is-talking .ccn-wave i:nth-child(7) { animation-delay: -0.48s; }

@keyframes ccnWave {
  from { transform: scaleY(0.35); }
  to { transform: scaleY(1.15); }
}

.cxp-callcentre .ccn-seat-core b[data-ccn-caller] {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ccn-white);
}

.cxp-callcentre .ccn-seat-status {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ccn-teal-deep);
  min-height: 1.2em;
}
.cxp-callcentre .ccn-seat-status.is-swap {
  animation: ccnStatusSwap 0.2267s ease both;
}
@keyframes ccnStatusSwap {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- outcomes (right) ---------------------------------------- */
.cxp-callcentre .ccn-out {
  position: absolute;
  left: 80.7%;
  width: 19.3%;
  transform: translateY(-50%);
  display: grid;
  gap: 2px;
}
.cxp-callcentre .ccn-out[data-ccn-out="booked"] { top: 21.28%; }
.cxp-callcentre .ccn-out[data-ccn-out="coverage"] { top: 40.43%; }
.cxp-callcentre .ccn-out[data-ccn-out="pay"] { top: 59.57%; }
.cxp-callcentre .ccn-out[data-ccn-out="human"] { top: 78.72%; }

.cxp-callcentre .ccn-out b {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ccn-faint);
  white-space: nowrap;
  transition: color 0.35s ease, text-shadow 0.35s ease;
}
.cxp-callcentre .ccn-out i {
  font-style: normal;
  font-size: 11.5px;
  color: #9aa0b4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cxp-callcentre .ccn-out.is-lit b { color: var(--ccn-teal-deep); }
.cxp-callcentre .ccn-out--human b { color: #3b4fe0; }
.cxp-callcentre .ccn-out--human.is-lit b { color: #3b4fe0; }

/* a call just landed here (JS) — one warm flare, then settles */
.cxp-callcentre .ccn-out.is-hot b {
  animation: ccnOutFlare 0.7667s ease both;
}
@keyframes ccnOutFlare {
  0% { text-shadow: none; }
  22% { color: #0b1020; text-shadow: 0 0 16px rgba(90, 130, 194, 0.65); }
  100% { text-shadow: 0 0 0 rgba(90, 130, 194, 0); }
}

/* ============================================================
   THE LINE BOARD — live tallies + latest-bookings tray
   ============================================================ */

.cxp-callcentre .ccn-board {
  position: relative;
  margin-top: clamp(36px, 4.6vw, 54px);
  padding-top: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid var(--ccn-hair);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px clamp(28px, 4vw, 56px);
}

.cxp-callcentre .ccn-board-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ccn-faint);
}
.cxp-callcentre .ccn-board-tag i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ccn-teal);
  box-shadow: 0 0 8px rgba(90, 130, 194, 0.7);
  animation: ccnLiveDot 1.4118s ease-out infinite;
}

.cxp-callcentre .ccn-tallies {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(24px, 3.4vw, 44px);
}
.cxp-callcentre .ccn-tally {
  display: grid;
  gap: 1px;
}
.cxp-callcentre .ccn-tally b {
  font-size: clamp(21px, 2.3vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ccn-white);
  font-variant-numeric: tabular-nums;
}
.cxp-callcentre .ccn-tally span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ccn-faint);
  white-space: nowrap;
}
.cxp-callcentre .ccn-tally b.is-tick {
  animation: ccnTick 0.3333s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
@keyframes ccnTick {
  0% { transform: translateY(4px) scale(1.12); color: var(--ccn-teal-deep); }
  100% { transform: none; color: var(--ccn-white); }
}

.cxp-callcentre .ccn-tray {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.cxp-callcentre .ccn-tray-chip {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ccn-dim);
  padding: 6px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--ccn-hair);
  background: var(--ccn-glass);
  white-space: nowrap;
}
.cxp-callcentre .ccn-tray-chip.is-new {
  border-color: rgba(90, 130, 194, 0.5);
  color: var(--ccn-white);
  animation: ccnChipLand 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}
@keyframes ccnChipLand {
  0% { opacity: 0; transform: translateY(-10px) scale(0.94); box-shadow: 0 0 18px rgba(90, 130, 194, 0.45); }
  100% { opacity: 1; transform: none; box-shadow: 0 0 0 rgba(90, 130, 194, 0); }
}

/* ============================================================
   2 · HOW A CALL GOES — one call, beat by beat (light)
   ============================================================ */

.cxp-callcentre .ccn-story {
  position: relative;
  padding: clamp(88px, 11vw, 136px) 0 clamp(80px, 10vw, 120px);
  background:
    radial-gradient(70% 40% at 18% 4%, rgba(59, 79, 224, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, var(--ccn-night-2), #f7f9fe 60%, var(--ccn-night-2));
}

.cxp-callcentre .ccn-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ccn-teal-deep);
}

.cxp-callcentre .ccn-story-head {
  max-width: 44rem;
  margin-bottom: clamp(44px, 6vw, 72px);
}
.cxp-callcentre .ccn-story-head h2 {
  margin: 14px 0 0;
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.028em;
  color: var(--ccn-white);
  text-wrap: balance;
}

.cxp-callcentre .ccn-beat {
  display: grid;
  grid-template-columns: minmax(120px, 168px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(34px, 4.6vw, 52px) 0;
  border-top: 1px solid var(--ccn-hair);
}

.cxp-callcentre .ccn-beat-meta {
  display: grid;
  align-content: start;
  gap: 6px;
}
.cxp-callcentre .ccn-beat-n {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ccn-teal-deep);
}
.cxp-callcentre .ccn-beat-t {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ccn-faint);
}

.cxp-callcentre .ccn-beat-body { max-width: 60ch; }
.cxp-callcentre .ccn-beat-body h3 {
  margin: 0 0 10px;
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ccn-white);
}
.cxp-callcentre .ccn-beat-body > p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ccn-dim);
}
.cxp-callcentre .ccn-beat-body > p em {
  font-style: normal;
  color: var(--ccn-teal-deep);
}

/* the transcript — de-boxed lines, hairline spine, no bubbles */
.cxp-callcentre .ccn-call {
  margin-top: clamp(20px, 2.8vw, 28px);
  display: grid;
  gap: 15px;
  padding-left: clamp(14px, 2vw, 20px);
  border-left: 1px solid var(--ccn-hair-2);
}

.cxp-callcentre .ccn-line {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}
.cxp-callcentre .ccn-who {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-align: right;
  line-height: 1.9;
}
.cxp-callcentre .ccn-line--ai .ccn-who { color: var(--ccn-teal-deep); }
.cxp-callcentre .ccn-line--caller .ccn-who { color: var(--ccn-faint); }

.cxp-callcentre .ccn-line p {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  letter-spacing: -0.005em;
}
.cxp-callcentre .ccn-line--ai p { color: #3c4256; }
.cxp-callcentre .ccn-line--caller p { color: var(--ccn-dim); }

.cxp-callcentre .ccn-result {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  padding-left: 58px;
}
.cxp-callcentre .ccn-result span {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ccn-teal-deep);
  padding: 6px 13px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(90, 130, 194, 0.32);
  background: rgba(90, 130, 194, 0.08);
  white-space: nowrap;
}

.cxp-callcentre .ccn-handoff {
  margin-top: clamp(18px, 2.4vw, 24px);
}
.cxp-callcentre .ccn-handoff-chip {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: #3b4fe0;
  padding: 9px 17px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(59, 79, 224, 0.24);
  background: rgba(59, 79, 224, 0.07);
}

/* ============================================================
   3 · THE MORNING AFTER — the bright band
   ============================================================ */

.cxp-callcentre .ccn-dawn {
  position: relative;
  padding: clamp(88px, 11vw, 136px) 0;
  background:
    radial-gradient(90% 46% at 50% 0%, var(--periwinkle) 0%, transparent 62%),
    linear-gradient(180deg, #f5f7ff 0%, #ffffff 46%, var(--paper) 100%);
  color: var(--ink);
}
/* the bright divider line */
.cxp-callcentre .ccn-dawn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(90, 130, 194, 0.55) 35%, rgba(122, 140, 255, 0.6) 65%, transparent);
}

.cxp-callcentre .ccn-kicker--day { color: var(--indigo-700); }

.cxp-callcentre .ccn-dawn-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 6.5vw, 88px);
  align-items: center;
}

.cxp-callcentre .ccn-dawn-copy h2 {
  margin: 14px 0 14px;
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--ink);
}
.cxp-callcentre .ccn-dawn-copy p {
  margin: 0;
  max-width: 54ch;
  font-size: 16px;
  line-height: 1.68;
  color: var(--ink-60);
}

/* the overnight digest — the one deliberate "object" on the page */
.cxp-callcentre .ccn-digest {
  padding: clamp(22px, 2.8vw, 30px) clamp(22px, 3vw, 32px);
  border-radius: var(--r-soft);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-float);
}
.cxp-callcentre .ccn-digest-top {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-40);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.cxp-callcentre .ccn-digest-top .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ccn-teal-deep);
  box-shadow: 0 0 0 3px rgba(90, 130, 194, 0.15);
}
.cxp-callcentre .ccn-digest ul {
  list-style: none;
  margin: 0;
  padding: 6px 0 0;
}
.cxp-callcentre .ccn-digest li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 14.5px;
  letter-spacing: -0.008em;
  color: var(--ink-70);
  padding: 11px 0;
}
.cxp-callcentre .ccn-digest li + li { border-top: 1px solid var(--line); }
.cxp-callcentre .ccn-digest li b {
  flex: none;
  min-width: 34px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
}
.cxp-callcentre .ccn-digest-foot {
  display: block;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-40);
}

/* ============================================================
   4 · INBOUND / OUTBOUND — two directions, one voice (day)
   ============================================================ */

.cxp-callcentre .ccn-split {
  position: relative;
  padding: clamp(72px, 9vw, 112px) 0 clamp(88px, 11vw, 136px);
  background: linear-gradient(180deg, var(--paper), #fff 40%, #f6f8ff 100%);
  color: var(--ink);
}

.cxp-callcentre .ccn-split-head {
  max-width: 46rem;
  margin: 0 auto clamp(44px, 6vw, 68px);
  text-align: center;
}
.cxp-callcentre .ccn-split-head h2 {
  margin: 14px 0 12px;
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
}
.cxp-callcentre .ccn-split-head p {
  margin: 0 auto;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.66;
  color: var(--ink-60);
}

.cxp-callcentre .ccn-split-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5.5vw, 72px);
}

.cxp-callcentre .ccn-dir {
  min-width: 0;
}
.cxp-callcentre .ccn-dir--out {
  border-left: 1px solid var(--line);
  padding-left: clamp(36px, 5.5vw, 72px);
  margin-left: calc(clamp(36px, 5.5vw, 72px) * -0.5);
}

.cxp-callcentre .ccn-dir-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cx-teal-deep, #3d63a4);
  margin-bottom: 14px;
}
.cxp-callcentre .ccn-dir--out .ccn-dir-tag { color: var(--indigo); }

.cxp-callcentre .ccn-dir ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cxp-callcentre .ccn-dir li {
  position: relative;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.008em;
  color: var(--ink-70);
  padding: 13px 0 13px 22px;
}
.cxp-callcentre .ccn-dir li + li { border-top: 1px solid var(--line); }
.cxp-callcentre .ccn-dir li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ccn-teal);
}
.cxp-callcentre .ccn-dir--out li::before { background: var(--indigo); }

/* ============================================================
   5 · THE DISCLOSURE RULE — a calm sand-blue band
   ============================================================ */

.cxp-callcentre .ccn-comply {
  position: relative;
  padding: clamp(88px, 11vw, 136px) 0;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(59, 79, 224, 0.07) 0%, transparent 62%),
    linear-gradient(180deg, var(--ccn-night-2), var(--ccn-night));
  color: var(--ccn-white);
}
.cxp-callcentre .ccn-comply::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122, 140, 255, 0.4) 50%, transparent);
}

.cxp-callcentre .ccn-comply-inner {
  position: relative;
}

.cxp-callcentre .ccn-comply-head {
  max-width: 44rem;
  margin-bottom: clamp(40px, 5.5vw, 60px);
}
.cxp-callcentre .ccn-comply-head h2 {
  margin: 14px 0 12px;
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--ccn-white);
  text-wrap: balance;
}
.cxp-callcentre .ccn-comply-head p {
  margin: 0;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.66;
  color: var(--ccn-dim);
}

.cxp-callcentre .ccn-comply-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 44px);
}
.cxp-callcentre .ccn-comply-item {
  display: grid;
  align-content: start;
  gap: 9px;
  padding-top: 18px;
  border-top: 1px solid var(--ccn-hair-2);
}
.cxp-callcentre .ccn-comply-item i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--ccn-teal-lite), var(--ccn-teal));
  box-shadow: 0 0 10px rgba(90, 130, 194, 0.5);
}
.cxp-callcentre .ccn-comply-item b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--ccn-white);
}
.cxp-callcentre .ccn-comply-item span {
  font-size: 13.5px;
  line-height: 1.58;
  color: var(--ccn-faint);
}

/* ============================================================
   6 · CLOSE — lights on, all bright
   ============================================================ */

.cxp-callcentre .ccn-close {
  position: relative;
  padding: clamp(96px, 12vw, 150px) 0 clamp(88px, 11vw, 130px);
  background:
    radial-gradient(56% 46% at 50% 88%, rgba(90, 130, 194, 0.1) 0%, transparent 66%),
    radial-gradient(70% 55% at 50% 100%, rgba(59, 79, 224, 0.1) 0%, transparent 70%),
    linear-gradient(180deg, var(--ccn-night), #ffffff);
  overflow: hidden;
}

.cxp-callcentre .ccn-close-inner {
  position: relative;
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}
.cxp-callcentre .ccn-close h2 {
  margin: clamp(18px, 2.6vw, 24px) auto 0;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ccn-white);
  text-wrap: balance;
}
.cxp-callcentre .ccn-close p {
  margin: clamp(14px, 2vw, 18px) auto 0;
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.64;
  color: var(--ccn-dim);
}

.cxp-callcentre .ccn-cta-row--center { justify-content: center; }

.cxp-callcentre .ccn-siblings {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: clamp(44px, 6vw, 64px);
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--ccn-hair);
}
.cxp-callcentre .ccn-siblings-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ccn-faint);
  margin-right: 6px;
}
.cxp-callcentre .ccn-siblings a {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ccn-dim);
  transition: color 0.2s ease;
}
.cxp-callcentre .ccn-siblings a .arrow {
  display: inline-block;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1.2);
}
.cxp-callcentre .ccn-siblings a:hover { color: var(--ccn-white); }
.cxp-callcentre .ccn-siblings a:hover .arrow { transform: translateX(3px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1080px) {
  .cxp-callcentre .ccn-port-meta i,
  .cxp-callcentre .ccn-out i { font-size: 10.5px; }
  .cxp-callcentre .ccn-port-meta b,
  .cxp-callcentre .ccn-out b { font-size: 12.5px; }
}

@media (max-width: 920px) {
  .cxp-callcentre .ccn-comply-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cxp-callcentre .ccn-dawn-inner { grid-template-columns: 1fr; align-items: start; }
  .cxp-callcentre .ccn-digest { max-width: 520px; }
}

/* the switchboard re-stacks: wires retire, the floor becomes a column —
   ports · seat · outcomes — still a complete, populated scene */
@media (max-width: 860px) {
  .cxp-callcentre .ccn-stage {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
  }
  .cxp-callcentre .ccn-wires { display: none; }

  .cxp-callcentre .ccn-ports,
  .cxp-callcentre .ccn-outs {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    pointer-events: auto;
  }
  .cxp-callcentre .ccn-port,
  .cxp-callcentre .ccn-out {
    position: static;
    width: auto;
    transform: none;
  }
  .cxp-callcentre .ccn-out b,
  .cxp-callcentre .ccn-port-meta b { white-space: normal; }
  .cxp-callcentre .ccn-out i { white-space: normal; overflow: visible; }

  .cxp-callcentre .ccn-seat {
    position: static;
    transform: none;
    width: min(340px, 100%);
    margin: 4px auto;
  }

  .cxp-callcentre .ccn-board { flex-direction: column; align-items: flex-start; }
  .cxp-callcentre .ccn-tray { margin-left: 0; }
}

@media (max-width: 760px) {
  .cxp-callcentre .ccn-chips { justify-content: flex-start; }
  .cxp-callcentre .ccn-chip { padding-inline: 0 clamp(20px, 5vw, 34px); }
  .cxp-callcentre .ccn-chip + .ccn-chip {
    padding-left: clamp(20px, 5vw, 34px);
    border-left: 1px solid var(--ccn-hair);
  }

  .cxp-callcentre .ccn-beat {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cxp-callcentre .ccn-beat-meta {
    grid-auto-flow: column;
    justify-content: start;
    align-items: baseline;
    gap: 14px;
  }

  .cxp-callcentre .ccn-split-cols { grid-template-columns: 1fr; gap: 40px; }
  .cxp-callcentre .ccn-dir--out {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 34px;
  }
}

@media (max-width: 560px) {
  .cxp-callcentre .ccn-hero { padding-top: 112px; }
  .cxp-callcentre .ccn-hero-head { text-align: left; }
  .cxp-callcentre .ccn-h1 { margin-inline: 0; }
  .cxp-callcentre .ccn-lead { margin-inline: 0; }
  .cxp-callcentre .ccn-cta-row { justify-content: flex-start; }
  .cxp-callcentre .ccn-chips { flex-direction: column; gap: 14px; }
  .cxp-callcentre .ccn-chip,
  .cxp-callcentre .ccn-chip + .ccn-chip {
    border-left: 0;
    padding: 0;
  }

  .cxp-callcentre .ccn-ports,
  .cxp-callcentre .ccn-outs { grid-template-columns: 1fr; }
  .cxp-callcentre .ccn-comply-grid { grid-template-columns: 1fr; }
  .cxp-callcentre .ccn-result { padding-left: 0; }
  .cxp-callcentre .ccn-line { grid-template-columns: 38px minmax(0, 1fr); }
  .cxp-callcentre .ccn-siblings { flex-direction: column; gap: 12px; }
  .cxp-callcentre .ccn-siblings-label { margin-right: 0; }
}

/* ============================================================
   REDUCED MOTION — the scene stays COMPLETE, nothing moves.
   Server markup already ships lit lines, a mid-call seat, landed
   outcomes and counted tallies; we only stop the choreography.
   ============================================================ */

@media (max-width: 700px) {
  /* single column by phone width — don't wait for the 560px breakpoint */
  .cxp-callcentre .ccn-ports,
  .cxp-callcentre .ccn-outs { grid-template-columns: 1fr; }
  .cxp-callcentre .ccn-comply-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce), (max-width: 700px) {
  .cxp-callcentre *,
  .cxp-callcentre *::before,
  .cxp-callcentre *::after {
    animation: none !important;
    transition: none !important;
  }
  /* reveal-on-scroll items render already-revealed */
  .cxp-callcentre .ios {
    opacity: 1 !important;
    transform: none !important;
  }
  /* frozen but composed: rings hold one visible echo, current stands still */
  .cxp-callcentre .ccn-seat.is-talking .ccn-seat-ring {
    opacity: 0.4;
    transform: scale(0.95);
  }
  .cxp-callcentre .ccn-seat.is-talking .ccn-seat-ring.r2 {
    opacity: 0.18;
    transform: scale(1.12);
  }
  .cxp-callcentre .ccn-wires path[data-ccn-wire] { stroke-dasharray: none; }
  .cxp-callcentre .ccn-pulse { display: none; }
}