/* Geographic regional connection map; all route motion is controlled by regional-map.js. */
.home-page .cross-border .split-layout { grid-template-columns: minmax(290px, .76fr) minmax(0, 1.24fr); gap: clamp(30px, 4vw, 64px); }
.home-page .cross-border .section-copy { padding-right: 0; }
.regional-network { width: 100%; max-width: none; margin: 0; position: relative; overflow: hidden; color: white; background: #102c40; border: 1px solid #2c4b60; border-radius: 12px; box-shadow: 0 24px 65px #173e5214; }
.network-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 28px 28px 0; }
.regional-network .network-heading .eyebrow { color: #86d8e5; font-size: .6rem; letter-spacing: .12em; margin: 0 0 12px; }
.network-heading h3 { color: #fff; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.2; font-weight: 500; letter-spacing: -.025em; }
.regional-network .network-coverage { color: #aacbd5; font-size: .7rem; line-height: 1.6; margin: 9px 0 0; }
.network-directions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 20px 28px 8px; padding: 5px; border: 1px solid #37596c; border-radius: 7px; background: #0c2536; }
.network-directions button { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 42px; padding: 9px 8px; border: 1px solid transparent; border-radius: 4px; color: #b9d2dc; background: transparent; font-size: .72rem; line-height: 1.4; }
.network-directions button span { font-size: 1rem; }
.network-directions button:hover { color: white; background: #193e51; }
.network-directions button[aria-pressed="true"] { color: #dfffff; border-color: #5bafbf; background: #215064; }
.network-directions button:disabled { cursor: default; }
.network-map-frame { position: relative; margin-top: 6px; }
.network-map { display: block; width: 100%; height: auto; overflow: hidden; }
.network-map .map-country.context { fill: #1a3749; stroke: #3a586b; stroke-opacity: .7; stroke-width: .8; }
.network-map .map-country.target { fill: #234d5d; stroke: #6a9aa3; stroke-opacity: .8; stroke-width: 1; }
.network-map .map-country.origin { fill: #347183; stroke: #87d6e0; stroke-opacity: 1; stroke-width: 1.4; }
.network-map .map-country.is-selected-country { fill: #326375; stroke: #a1dae0; stroke-opacity: .9; }
.network-water-labels { fill: #7596a9; opacity: .7; font: 12px Rubik, Arial, sans-serif; letter-spacing: 2px; }
.network-route-base { fill: none; stroke: #78b8c6; stroke-width: 1.1; stroke-dasharray: 3 6; opacity: .24; }
.network-route-progress { fill: none; stroke: #76e5ec; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--route-progress, 1)); opacity: 0; }
.regional-network[data-direction="import"] .network-route-progress { stroke-dashoffset: calc(var(--route-progress, 1) - 1); }
.network-connection.is-active .network-route-base { stroke-width: 2; opacity: .5; }
.network-connection.is-active .network-route-progress { opacity: 1; }
.network-point-ring { fill: #102c40; stroke: #669ca9; stroke-width: 1; }
.network-point { fill: #a7ced6; }
.network-destination.is-active .network-point-ring { fill: #26707e; stroke: #95eef2; stroke-width: 2; }
.network-destination.is-active .network-point { fill: #fff; }
.network-label-leader { fill: none; stroke: #6a9da9; stroke-width: 1; }
.network-country-label, .network-origin-country { fill: #c7dee4; font: 500 17px Rubik, Arial, sans-serif; letter-spacing: .6px; paint-order: stroke; stroke: #102c4080; stroke-width: 4; stroke-linejoin: round; }
.network-destination.is-active .network-country-label { fill: white; }
.network-origin-country { fill: #a6f3f4; font-size: 21px; letter-spacing: 2px; }
.network-origin-city { fill: #bdf1f5; font: 500 13px Rubik, Arial, sans-serif; letter-spacing: 1.5px; paint-order: stroke; stroke: #102c40; stroke-width: 4; }
.network-origin-halo { fill: #66d9e91a; stroke: #8ee6ed; stroke-width: 1; stroke-opacity: .5; }
.network-traveller { opacity: 0; pointer-events: none; }
.network-traveller.is-visible { opacity: 1; }
.network-compass { stroke: #88a9b8; stroke-width: 1.3; }
.network-compass text { fill: #88a9b8; stroke: none; font: 13px Rubik, Arial, sans-serif; }
.network-details { padding: 0 28px 20px; margin-top: 0; position: relative; }
.network-current { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; padding-block: 0 12px; }
.network-current strong { color: #f1fafb; font-size: .9rem; font-weight: 500; }
.network-current > span { color: #a6c8d3; font-size: .65rem; }
.network-stages { list-style: none; display: grid; grid-template-columns: .8fr 1.4fr .8fr; margin: 0; padding: 0; gap: 10px; }
.network-stages li { position: relative; border-top: 2px solid #35576b; padding-top: 10px; color: #b0c6d1; min-width: 0; }
.network-stages li.is-active, .network-stages li.is-complete { border-color: #6fdae6; }
.network-stages li.is-active { color: white; }
.network-stages li > span { display: block; color: #80a7b8; font-size: .6rem; letter-spacing: .1em; margin-bottom: 3px; }
.network-stages li.is-active > span, .network-stages li.is-complete > span { color: #78e2ed; }
.network-stages strong { font-weight: 400; font-size: .73rem; line-height: 1.5; }
.network-picker { margin-top: 18px; }
.network-picker > p { color: #9ab8c7; font-size: .65rem; margin-bottom: 8px; }
.network-destination-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.network-destination-buttons button { min-height: 36px; padding: 8px 5px; border: 1px solid #3b5a6d; border-radius: 4px; background: #18374a; color: #d3e2e8; font-size: .65rem; line-height: 1.4; }
.network-destination-buttons button:hover, .network-destination-buttons button[aria-pressed="true"] { background: #245367; color: #dcfbff; border-color: #72c5d4; }
.network-destination-buttons button:disabled { cursor: default; }
.regional-network button:focus-visible { outline: 2px solid #9af2f4; outline-offset: 4px; }
.network-note { color: #92afbf; font-size: .6rem; line-height: 1.6; margin-top: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .network-map .map-country, .network-destination .network-point-ring, .network-destination-buttons button { transition: fill 600ms ease, stroke 600ms ease, background 180ms ease, border-color 180ms ease; }
  .network-stages li { transition: border-color 300ms ease, color 300ms ease; }
}
@media (max-width: 1100px) {
  .home-page .cross-border .split-layout { grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 30px; }
  .network-heading { padding: 24px 22px 0; }
  .network-details { padding-inline: 22px; }
  .network-directions { margin-inline: 22px; }
}
@media (max-width: 900px) {
  .home-page .cross-border .split-layout { grid-template-columns: 1fr; gap: 32px; }
  .home-page .cross-border .section-copy { max-width: 620px; }
  .network-map { max-height: 490px; }
  .network-details { margin-top: 0; }
}
@media (max-width: 560px) {
  .network-heading { padding: 22px 18px 0; gap: 12px; }
  .regional-network .network-heading .eyebrow { font-size: .52rem; margin-bottom: 12px; }
  .network-heading h3 { font-size: 1.15rem; }
  .regional-network .network-coverage { font-size: .62rem; }
  .network-directions { margin: 17px 18px 0; gap: 4px; padding: 4px; }
  .network-directions button { min-height: 44px; font-size: .66rem; padding-inline: 5px; gap: 5px; }
  .network-map-frame { margin-top: 16px; }
  .network-country-label { font-size: 22px; letter-spacing: 0; }
  .network-origin-country { font-size: 26px; }
  .network-origin-city { font-size: 19px; }
  .network-water-labels { font-size: 15px; letter-spacing: 1px; }
  .network-water-labels text:first-child { font-size: 13px; }
  .network-route-progress { stroke-width: 4; }
  .network-details { padding: 0 18px 22px; margin-top: 0; }
  .network-current { gap: 7px; padding-bottom: 14px; }
  .network-current strong { font-size: .8rem; }
  .network-current > span { font-size: .6rem; }
  .network-stages { gap: 8px; }
  .network-stages strong { font-size: .67rem; }
  .network-picker { margin-top: 18px; }
  .network-destination-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .network-destination-buttons button { font-size: .72rem; min-height: 42px; }
  .network-note { font-size: .58rem; }
}
@media (prefers-reduced-motion: reduce), print {
  .network-traveller { display: none; }
  .network-route-progress { stroke-dashoffset: 0 !important; }
}
@media print { .network-picker, .network-directions { display: none; } }