.distribution-page {
  --distribution-navy: #031d3e;
  --distribution-green: #08714f;
  --distribution-ink: #0b1830;
  --distribution-muted: #536176;
  --distribution-line: #dce5e1;
  background: #fff;
  color: var(--distribution-ink);
}

.distribution-hero {
  position: relative;
  overflow: hidden;
  background: #031d3e;
}

.distribution-hero__image,
.distribution-hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.distribution-hero__image {
  object-fit: cover;
  object-position: center 54%;
}

.distribution-hero__shade {
  background: linear-gradient(90deg, rgba(1, 16, 36, .98), rgba(2, 24, 50, .9) 37%, rgba(2, 23, 48, .28) 72%);
}

.distribution-network {
  padding: 30px 0 16px;
  background: linear-gradient(180deg, #fff, #f7fbf9);
}

.distribution-section-heading { max-width: 760px; }
.distribution-section-heading h2,
.distribution-commitment h2 {
  margin: 0;
  font-size: clamp(1.12rem, 2vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.025em;
}

.distribution-section-heading p,
.distribution-commitment > p {
  margin: 8px 0 0;
  color: var(--distribution-muted);
  font-size: .8rem;
  line-height: 1.6;
}

.distribution-map {
  position: relative;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #e2ece7;
  border-radius: 14px;
  background:
    radial-gradient(circle at 52% 48%, rgba(42, 158, 114, .12), transparent 42%),
    linear-gradient(180deg, #fbfefd, #f2f8f5);
}

.distribution-map::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#b7d7cb 1px, transparent 1px);
  background-size: 18px 18px;
  content: '';
  opacity: .3;
}

.distribution-map svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.distribution-map__geography {
  opacity: .88;
  filter: brightness(0) saturate(100%) invert(65%) sepia(23%) saturate(779%) hue-rotate(105deg) brightness(91%) contrast(88%);
}

.distribution-map__routes path {
  fill: none;
  stroke: #087ad1;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  opacity: .44;
  filter: url(#distribution-map-glow);
  animation: distribution-route-flow 7s linear infinite;
  animation-delay: var(--route-delay, 0s);
}

.distribution-map__city-dot {
  fill: #08714f;
  stroke: #fff;
  stroke-width: 3;
  filter: drop-shadow(0 2px 4px rgba(3, 29, 62, .3));
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .18s ease, fill .18s ease;
}

.distribution-map__hub-ring {
  fill: rgba(0, 94, 64, .12);
  stroke: #00714e;
  stroke-width: 2;
}

.distribution-map__destination--hub .distribution-map__city-dot { fill: #f0ae00; }
.distribution-map__destination { outline: none; }
.distribution-map__destination:hover .distribution-map__city-dot { fill: #f0ae00; transform: scale(1.45); }
.distribution-map__leader {
  stroke: #164f65;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: .68;
  vector-effect: non-scaling-stroke;
}
.distribution-map__label {
  pointer-events: none;
}
.distribution-map__label rect {
  fill: rgba(6, 37, 74, .94);
  stroke: rgba(255, 255, 255, .8);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.distribution-map__label text { fill: #fff; font: 700 14px Arial, sans-serif; }

@keyframes distribution-route-flow {
  to { stroke-dashoffset: -72; }
}

.distribution-details { padding: 2px 0 36px; background: #f7fbf9; }

.distribution-commitment {
  border: 1px solid var(--distribution-line);
  border-radius: 12px;
  padding: 26px;
  background: #fff;
  box-shadow: 0 9px 25px rgba(6, 36, 52, .055);
}

.distribution-commitment {
  border-color: #0c325e;
  background: linear-gradient(145deg, #05274f, #021a38);
  color: #fff;
}

.distribution-commitment > p { color: rgba(255, 255, 255, .76); }
.distribution-commitment__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 10px; margin-top: 20px; }
.distribution-commitment__grid div { display: grid; gap: 7px; justify-items: center; text-align: center; }
.distribution-commitment__grid .tabler-icon { width: 25px; height: 25px; color: #fff; }
.distribution-commitment__grid strong { font-size: .68rem; }

@media (max-width: 760px) {
  .distribution-map {
    margin-inline: -12px;
    overflow-x: auto;
    border-radius: 8px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .distribution-map svg { min-width: 1100px; }
}

@media (max-width: 520px) {
  .distribution-commitment__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .distribution-map__routes path { animation: none; }
}