/* Self-contained atlas: local SVG artwork, no external map service. */
.network { padding: 86px 0 78px; background: #e9eddf; color: var(--ink); }
.network-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; margin: 35px 0 38px; }
.network-intro h2 { margin: 0; font-size: clamp(36px, 4.7vw, 65px); font-weight: 500; line-height: 1.12; letter-spacing: -.045em; }
.network-intro p { max-width: 430px; margin: 0 0 4px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.network-atlas { border: 1px solid #67755440; border-radius: 12px; background: var(--paper); overflow: hidden; }
.network-toolbar { display: flex; gap: 20px; padding: 17px 26px; justify-content: space-between; align-items: center; border-bottom: 1px solid #67755424; }
.network-legend { display: flex; flex-wrap: wrap; gap: 14px 22px; font-size: 11px; color: var(--green); }
.network-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.network-dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; background: var(--green); border-radius: 50%; }
.network-dot.hq { width: 12px; height: 12px; background: var(--red); border-radius: 0; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 35%); }
.network-dot.branch { background: var(--red); border-radius: 1px; }
.network-views { display: flex; background: #e5e7da; border-radius: 5px; padding: 3px; flex-shrink: 0; }
.network-views button { cursor: pointer; font: inherit; font-size: 11px; border: 0; min-height: 36px; padding: 8px 16px; color: var(--green); background: transparent; border-radius: 3px; }
.network-views button.active { background: var(--ink); color: var(--paper); }
.network-map { position: relative; padding: 12px 22px 34px; }
#network-svg { display: block; width: 100%; height: auto; max-height: 440px; aspect-ratio: 1000 / 440; overflow: hidden; }
.map-city { cursor: pointer; color: var(--green); outline: 0; }
.map-city.hq, .map-city.branch { color: var(--red); }
.map-city.is-hidden { display: none; }
.city-core { fill: currentColor; stroke: var(--paper); stroke-width: 1.1px; }
.city-leader { fill: none; stroke: currentColor; stroke-width: .7px; opacity: .55; }
.city-halo { fill: currentColor; opacity: .1; }
.city-label-bg { fill: var(--paper); opacity: .96; stroke: transparent; stroke-width: 1px; }
.map-city text { fill: var(--green); font-family: inherit; font-size: 12.5px; font-weight: 500; }
.map-city.active .city-halo { opacity: .24; }
.map-city.active .city-label-bg, .map-city:hover .city-label-bg, .map-city:focus-visible .city-label-bg { fill: var(--ink); opacity: 1; }
.map-city.active text, .map-city:hover text, .map-city:focus-visible text { fill: var(--paper); }
.map-city:focus-visible .city-label-bg { stroke: var(--red); stroke-width: 2px; }
#network-svg.asia-view .city-core { stroke-width: .3px; }
#network-svg.asia-view .city-leader { stroke-width: .15px; }
#network-svg.asia-view .map-city text { font-size: 3.2px; }
#network-svg.asia-view .city-label-bg { stroke-width: .35px; }
#network-svg.asia-view .map-city:focus-visible .city-label-bg { stroke-width: .5px; }
.network-map-note { position: absolute; bottom: 13px; left: 26px; font-size: 10px; color: var(--muted); }
.network-bottom { border-top: 1px solid #67755424; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); }
.network-city-list { padding: 25px 24px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-content: center; gap: 8px; }
.network-city-list button { cursor: pointer; min-height: 42px; display: flex; gap: 8px; align-items: center; text-align: left; padding: 9px 10px; color: var(--green); background: transparent; border: 1px solid #65754c33; border-radius: 5px; font: inherit; font-size: 11px; line-height: 1.35; }
.network-city-list button:hover { border-color: var(--green); background: #e4e8d9; }
.network-city-list button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.network-city-list button.active .network-dot.studio { background: var(--sage); }
.network-detail { background: #e3e8d7; border-left: 1px solid #67755424; padding: 25px 29px; display: grid; grid-template-rows: 15px 160px 48px; gap: 20px; min-width: 0; }
.network-detail-top { display: flex; justify-content: space-between; gap: 10px; color: var(--green); font-size: 10px; line-height: 1.5; }
.network-detail[data-type="hq"] #network-city-type, .network-detail[data-type="branch"] #network-city-type { color: #af1d26; }
.network-detail h3 { font-size: clamp(56px,6vw,80px); line-height: 1.15; letter-spacing: -.03em; margin: 0; font-weight: 500; }
.network-detail p { color: #56634e; font-size: 12px; line-height: 1.85; margin: 12px 0 0; max-width: 390px; }
.network-local-languages { min-width: 0; container-type: inline-size; }
.network-field-label { display: block; color: #56634e; font-size: 10px; line-height: 1.5; }
#network-city-languages { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 18px 20px; list-style: none; padding: 0; margin: 12px 0 3px; }
#network-city-languages li { min-width: 0; color: #233126; }
#network-city-languages:has(li:nth-child(2)) h3 { font-size: clamp(38px,3.8vw,52px); }
.network-language-translation { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; color: #56634e; font-size: 12px; line-height: 1.5; margin-top: 9px; }
.network-language-translation + .network-language-translation { margin-top: 5px; }
.network-language-translation code { white-space: nowrap; color: #233126; font-size: 11px; font-family: "SFMono-Regular",Consolas,monospace; }
.network-detail-footer { display: flex; justify-content: space-between; align-items: end; gap: 16px; min-width: 0; }
.network-route-line { fill: none; stroke: #7b8e66; stroke-width: .8px; opacity: .11; transition: opacity .3s, stroke .3s; pointer-events: none; }
.network-route-signal { fill: none; stroke: #ed202b; stroke-width: 2.8px; stroke-linecap: round; stroke-dasharray: 1 99; opacity: .06; animation: network-send 6s linear infinite; animation-delay: var(--route-delay); animation-play-state: paused; pointer-events: none; }
.network-hq-pulse { fill: none; stroke: #ed202b; stroke-width: .7px; opacity: 0; transform-box: fill-box; transform-origin: center; animation: network-origin 3.6s ease-out infinite; animation-play-state: paused; pointer-events: none; }
.routes-in-view:not(.routes-paused):not(.routes-page-hidden) .network-route-signal,
.routes-in-view:not(.routes-paused):not(.routes-page-hidden) .network-hq-pulse { animation-play-state: running; }
#network-svg.asia-view .network-route-line { stroke-width: .18px; }
#network-svg.asia-view .network-route-signal { stroke-width: .65px; }
#network-svg.asia-view .network-hq-pulse { stroke-width: .18px; }
@keyframes network-send { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes network-origin { 0% { opacity: .45; transform: scale(.55); } 90%,100% { opacity: 0; transform: scale(1.7); } }
.network-enquire { display: flex; align-items: center; gap: 32px; width: fit-content; border: 0; border-bottom: 1px solid #53674966; background: transparent; color: var(--green); padding: 10px 0; margin-top: 10px; font-size: 11px; text-decoration: none; }
.network-enquire > span:last-child { font-size: 20px; line-height: 1; }
.network-views button:focus-visible, .network-city-list button:focus-visible, .network-enquire:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
@media (max-width: 1050px) {
  .network-intro { gap: 30px; }
  .network-city-list { padding: 20px 17px; }
  .network-detail { padding: 22px; }
  .network-detail-top { flex-wrap: wrap; }
}
@media (max-width: 1000px) {
  .network-detail { grid-template-rows: 15px 270px 48px; }
  #network-city-languages { grid-template-columns: 1fr; gap: 16px; }
  .network-detail h3 { font-size: 56px; }
  #network-city-languages:has(li:nth-child(2)) h3 { font-size: 48px; }
}
@media (max-width: 700px) {
  .network { padding: 56px 0 52px; }
  .network-intro { grid-template-columns: 1fr; gap: 21px; margin: 28px 0; }
  .network-intro h2 { font-size: 40px; }
  .network-intro p { font-size: 13px; max-width: 420px; }
  .network-toolbar { padding: 15px; gap: 14px; flex-wrap: wrap; }
  .network-legend { gap: 13px; font-size: 10px; }
  .network-views { margin-left: auto; }
  .network-views button { min-height: 38px; padding: 9px 13px; font-size: 10px; }
  .network-map { padding: 13px 7px 34px; }
  #network-svg { aspect-ratio: 1000 / 500; }
  #network-svg.asia-view { aspect-ratio: 1.18; max-height: 370px; }
  .network-map-note { left: 15px; font-size: 9px; }
  .network-bottom { grid-template-columns: 1fr; }
  .network-city-list { grid-template-columns: repeat(3,minmax(0,1fr)); padding: 17px 15px; gap: 8px; }
  .network-city-list button { min-height: 42px; padding: 10px; }
  .network-detail { border-left: 0; border-top: 1px solid #67755424; padding: 24px; }
  .network-detail h3 { font-size: 56px; }
  .network-detail p { font-size: 12px; max-width: none; }
  html[lang="en"] .network-intro h2 { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) { .network * { scroll-behavior: auto; } }