/* ============================================================
   FLITZEN - Connect · Nationwide reach (animated UK map)
   Appended to connect.css - Mayfair Editorial, monochrome
   ============================================================ */
.reach {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.reach .eyebrow { color: rgba(255,255,255,0.6); }
.reach .eyebrow::before { background: rgba(255,255,255,0.85); }

.reach-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(40px, 5vw, 96px);
  align-items: center;
}
.reach-h2 {
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: clamp(32px, 4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
  margin: clamp(16px, 1.8vw, 22px) 0 clamp(16px, 1.8vw, 22px);
}
.reach .lead { color: rgba(255,255,255,0.72); max-width: 46ch; }

.reach-stats {
  display: flex;
  gap: clamp(24px, 3vw, 48px);
  margin: clamp(26px, 3vw, 38px) 0 clamp(20px, 2vw, 26px);
  padding-top: clamp(22px, 2.4vw, 30px);
  border-top: 1px solid rgba(255,255,255,0.14);
}
.reach-stats .rs { display: flex; flex-direction: column; gap: 6px; }
.reach-stats .rs .n {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  color: #fff;
  letter-spacing: -0.01em;
}
.reach-stats .rs .l {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
}

/* ---------- map shell ---------- */
.reach-map-wrap { position: relative; }
.uk-map-host {
  display: flex;
  justify-content: center;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.45));
}
svg.uk-map {
  width: 100%;
  height: auto;
  max-height: clamp(560px, 90vh, 980px);
  overflow: visible;
}

.reach-legend {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin-top: clamp(14px, 1.6vw, 22px);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
}
.reach-legend span { display: inline-flex; align-items: center; gap: 8px; }
.reach-legend i { width: 9px; height: 9px; border-radius: 50%; }
.reach-legend .lg-hub { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.18); }
.reach-legend .lg-city { background: rgba(255,255,255,0.55); }

/* ---------- map geometry ---------- */
svg.uk-map .dot,
svg.uk-map .city,
svg.uk-map .hub,
svg.uk-map .ring,
svg.uk-map .ping { transform-box: fill-box; transform-origin: center center; }

/* coastline hint */
svg.uk-map .coast {
  fill: none;
  stroke: rgba(255,255,255,0.12);
  stroke-width: 2.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease);
}
.uk-map-host.in svg.uk-map .coast { stroke-dashoffset: 0; }

/* stipple dots */
svg.uk-map .dot {
  fill: #fff;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.uk-map-host.in svg.uk-map .dot {
  opacity: 0.3;
  transform: scale(1);
}

/* signal arcs */
svg.uk-map .arc {
  fill: none;
  stroke: rgba(255,255,255,0.30);
  stroke-width: 2.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s var(--ease);
}
.uk-map-host.in svg.uk-map .arc { stroke-dashoffset: 0; }

svg.uk-map .flow {
  fill: none;
  stroke: #fff;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 0.05 0.95;
  stroke-dashoffset: 1;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.9));
}
.uk-map-host.in svg.uk-map .flow {
  opacity: 0.95;
  animation: ukFlow 3s linear infinite;
}
@keyframes ukFlow { to { stroke-dashoffset: 0; } }

/* city nodes */
svg.uk-map .city {
  fill: #fff;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.uk-map-host.in svg.uk-map .city { opacity: 1; transform: scale(1); }

/* arrival ping ring on each city, looped in sync with the signal flow */
svg.uk-map .ping {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  opacity: 0;
  transform: scale(0.5);
}
.uk-map-host.in svg.uk-map .ping { animation: ukPing 3s ease-out infinite; }
@keyframes ukPing {
  0%   { transform: scale(0.5); opacity: 0.55; }
  55%  { opacity: 0; }
  100% { transform: scale(3.6); opacity: 0; }
}

/* hub (London) */
svg.uk-map .hub {
  fill: #fff;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: 0.15s;
  filter: drop-shadow(0 0 14px rgba(255,255,255,0.9));
}
.uk-map-host.in svg.uk-map .hub { opacity: 1; transform: scale(1); }

svg.uk-map .ring {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  opacity: 0;
  transform: scale(0.5);
}
.uk-map-host.in svg.uk-map .ring { animation: ukRing 3.2s ease-out infinite; }
@keyframes ukRing {
  0%   { transform: scale(0.5); opacity: 0.55; }
  70%  { opacity: 0; }
  100% { transform: scale(4.4); opacity: 0; }
}

/* labels */
svg.uk-map .lbl {
  fill: rgba(255,255,255,0.72);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.6s ease;
}
svg.uk-map .lbl-hub { fill: #fff; font-size: 17px; }
.uk-map-host.in svg.uk-map .lbl { opacity: 1; }

/* reduced motion / print: show resting state */
.uk-map-host.reduced svg.uk-map .dot { opacity: 0.24; transform: none; animation: none; }
.uk-map-host.reduced svg.uk-map .arc,
.uk-map-host.reduced svg.uk-map .coast { stroke-dashoffset: 0; }
.uk-map-host.reduced svg.uk-map .city,
.uk-map-host.reduced svg.uk-map .hub { opacity: 1; transform: none; }
.uk-map-host.reduced svg.uk-map .flow,
.uk-map-host.reduced svg.uk-map .ring,
.uk-map-host.reduced svg.uk-map .ping { display: none; }
.uk-map-host.reduced svg.uk-map .lbl { opacity: 1; }

@media (max-width: 900px) {
  .reach-grid { grid-template-columns: 1fr; gap: clamp(30px, 6vw, 48px); }
  .reach-map-wrap { order: -1; }
  svg.uk-map { max-height: 72vh; }
}
@media (max-width: 560px) {
  .reach-stats { gap: 20px; flex-wrap: wrap; }
}


/* ============================================================
   REACH - light variant (white band, ink map)
   Used when the enquiry section above is black.
   ============================================================ */
.reach--light { background: var(--paper); color: var(--ink); }
.reach--light .reach-h2 { color: var(--ink); }
.reach--light .reach-stats .rs .n { color: var(--ink); }
.reach--light .eyebrow { color: var(--gray-1); }
.reach--light .eyebrow::before { background: var(--ink); }
.reach--light .lead { color: var(--gray-1); }
.reach--light .reach-stats { border-top-color: var(--line-strong); }
.reach--light .reach-stats .rs .l { color: var(--gray-2); }
.reach--light .reach-legend { color: var(--gray-2); }
.reach--light .reach-legend .lg-hub { background: #0E0E0E; box-shadow: 0 0 0 3px rgba(14,14,14,0.15); }
.reach--light .reach-legend .lg-city { background: rgba(14,14,14,0.55); }
.reach--light svg.uk-map .coast { stroke: rgba(14,14,14,0.16); }
.reach--light svg.uk-map .dot { fill: #0E0E0E; }
.reach--light .uk-map-host.in svg.uk-map .dot { opacity: 0.22; }
.reach--light svg.uk-map .arc { stroke: rgba(14,14,14,0.3); }
.reach--light svg.uk-map .flow { stroke: #0E0E0E; filter: drop-shadow(0 0 5px rgba(14,14,14,0.35)); }
.reach--light svg.uk-map .city { fill: #0E0E0E; }
.reach--light svg.uk-map .ping { stroke: #0E0E0E; }
.reach--light svg.uk-map .hub { fill: #0E0E0E; filter: drop-shadow(0 0 14px rgba(14,14,14,0.35)); }
.reach--light svg.uk-map .ring { stroke: #0E0E0E; }
.reach--light svg.uk-map .lbl { fill: rgba(14,14,14,0.72); }
.reach--light svg.uk-map .lbl-hub { fill: #0E0E0E; }
.reach--light .uk-map-host.reduced svg.uk-map .dot { opacity: 0.18; }