/* One scene, open page composition and a text city selector. */
.city-network { width:100%; min-width:0; scroll-margin-top:100px; }
.city-network__choices { display:flex; align-items:center; flex-wrap:wrap; gap:8px 28px; margin:0 0 20px; }
.city-network__choices button { appearance:none; border:0; border-radius:0; box-shadow:none; background:none; color:var(--ui-muted,#575756); padding:12px 0; min-height:44px; max-width:100%; text-align:left; font:500 14px/1.5 var(--ui-font,Roboto,sans-serif); cursor:pointer; }
.city-network__choices button[aria-pressed=true] { color:var(--ui-ink,#1d1d1b); box-shadow:inset 0 -2px #e52629; }
.city-network__choices button:hover { color:#32483c; }
.city-network__layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.65fr); align-items:center; gap:clamp(24px,4vw,72px); }
.city-network .sea-city-stage { height:clamp(480px,41vw,650px); }
.city-network__visual { background:none!important; border:0!important; border-radius:0!important; box-shadow:none!important; }
.city-network__info { margin:0!important; padding:0!important; background:none!important; border:0!important; box-shadow:none!important; }
.city-network__info[hidden] { display:none!important; }
.city-network__eyebrow { color:var(--ui-muted,#575756); font:400 12px/1.5 var(--ui-font,Roboto,sans-serif); margin:0 0 14px; }
.city-network__info h3 { font:400 clamp(23px,2.2vw,34px)/1.22 var(--ui-font-display,Bowler,Roboto,sans-serif); color:var(--ui-ink,#1d1d1b); margin:0 0 26px; overflow-wrap:anywhere; }
.city-network__contacts { display:grid; gap:14px; margin:0; }
.city-network__contacts dt { color:var(--ui-muted,#575756); font:400 12px/1.5 var(--ui-font,Roboto,sans-serif); margin:0 0 3px; }
.city-network__contacts dd { margin:0; color:var(--ui-ink,#1d1d1b); font:400 14px/1.6 var(--ui-font,Roboto,sans-serif); overflow-wrap:anywhere; }
.city-network__contacts a { color:inherit; text-decoration:none; text-underline-offset:3px; }
.city-network__contacts a:hover { text-decoration:underline; }
.city-network__actions { display:flex; align-items:flex-start; flex-direction:column; gap:16px; margin-top:28px; }
.city-network__actions .btn-primary { padding:13px 22px; min-height:46px; font-size:14px; }
.city-network__actions .home-text-link { color:var(--ui-ink,#1d1d1b); font:500 13px/1.6 var(--ui-font,Roboto,sans-serif); }
.city-network__credits { display:inline-block; margin-top:8px; color:var(--ui-muted,#575756); font:400 11px/1.5 var(--ui-font,Roboto,sans-serif); text-underline-offset:3px; }
.city-network button:focus-visible,.city-network a:focus-visible,.network-city-link:focus-visible { outline:2px solid #e52629; outline-offset:4px; }
.home-connections { padding-top:48px; padding-bottom:64px; }
.network-arrival-note { max-width:70ch; color:var(--ui-muted,#575756); font:400 14px/1.7 var(--ui-font,Roboto,sans-serif); margin:28px 0 36px; }
.network-office-actions { display:flex; gap:12px 24px; flex-wrap:wrap; align-items:center; margin-top:18px; }
.network-city-link { border:0; padding:8px 0; min-height:44px; background:none; color:var(--ui-ink,#1d1d1b); font:500 14px/1.5 var(--ui-font,Roboto,sans-serif); cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
@media(max-width:1000px){ .city-network__layout { grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr); gap:24px; } .city-network .sea-city-stage { height:460px; } }
@media(max-width:760px){ .city-network__layout { grid-template-columns:1fr; gap:18px; } .city-network__choices { gap:2px 22px; margin-bottom:12px; } .city-network__choices button { font-size:13px; padding:10px 0; } .city-network .sea-city-stage { height:360px; } .city-network__info h3 { margin-bottom:20px; } .city-network__contacts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 20px; } .city-network__actions { gap:14px; margin-top:24px; } .city-network__credits { margin-top:18px; } }
@media(max-width:380px){ .city-network .sea-city-stage { height:320px; } .city-network__contacts { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce){ .city-network * { scroll-behavior:auto; transition:none!important; } }

/* Controls belong to the scene; the page itself stays open and unframed. */
.sea-city-visual {
 position:relative;
 --city-control-fill:rgb(244 247 239 / .84);
 --city-control-hover:rgb(250 252 246 / .88);
 --city-control-ink:#243429;
 --city-control-edge:rgb(255 255 249 / .72);
 --city-control-shadow:inset 0 1px 1px rgb(255 255 255 / .6),0 3px 9px rgb(57 76 57 / .045),0 12px 28px rgb(57 76 57 / .055);
 --city-panel-fill:rgb(246 248 241 / .94);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .sea-city-visual { --city-control-fill:rgb(243 247 236 / .64); --city-control-hover:rgb(251 253 247 / .72); --city-panel-fill:rgb(247 249 242 / .84); }
}
.city-network__visual { position:relative; min-width:0; margin:0!important; isolation:isolate; }
.city-network__controls { position:absolute; inset:0 0 auto; z-index:4; pointer-events:none; }
.city-network__choices { flex-wrap:nowrap; gap:24px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; margin:0; padding:0 2px 4px; pointer-events:auto; }
.city-network__choices button { flex:0 0 auto; white-space:nowrap; max-width:none; font-family:inherit; }
.city-network__switcher { display:flex; align-items:center; gap:12px; margin-top:6px; pointer-events:auto; width:max-content; max-width:100%; }
.city-network__switcher button { display:grid; place-items:center; width:44px; height:44px; padding:0; background:var(--ui-bg,#fff); border:1px solid var(--ui-border,#d8dade); border-radius:0; box-shadow:none; color:var(--ui-ink,#1d1d1b); font:400 22px/1 sans-serif; cursor:pointer; }
.city-network__switcher button:hover { border-color:var(--city-control-edge); color:var(--city-control-ink); }
.city-network__switcher [data-city-position] { min-width:48px; font-size:12px; font-variant-numeric:tabular-nums; color:var(--ui-muted,#575756); }
.city-network__gesture { color:var(--ui-muted,#575756); font-size:12px; }
.city-network .sea-city-stage { box-sizing:border-box; touch-action:pan-y; }
.city-network .sea-city-stage .sea-city-poster,
.city-network .sea-city-stage iframe { top:92px!important; height:calc(100% - 92px)!important; }
.city-network .sea-city-launch { z-index:3; }
.city-network .sea-city-status { z-index:2; pointer-events:none; }
.city-network__route-title { display:grid; gap:4px; }
.city-network__route-arrow { color:#e52629; font:400 24px/1 sans-serif; }
.city-network__route-time { margin:28px 0 10px; padding-top:20px; border-top:1px solid var(--ui-border,#d8dade); }
.city-network__route-time dt { color:var(--ui-muted,#575756); font-size:12px; }
.city-network__route-time dd { margin:8px 0 0; font:500 clamp(24px,2.3vw,36px)/1.2 var(--ui-font,Inter,sans-serif); color:var(--ui-ink,#1d1d1b); }
.city-network__route-basis { margin:0; font:400 14px/1.65 var(--ui-font,Inter,sans-serif); color:var(--ui-muted,#575756); max-width:40ch; }
@media(max-width:760px){
  .city-network .sea-city-stage { height:420px; }
  .city-network__choices { gap:22px; }
  .city-network__choices button { font-size:13px; }
  .city-network__info .city-network__route-title { font-size:25px; margin-bottom:18px; }
  .city-network__route-time { margin-top:20px; }
}
@media(max-width:380px){ .city-network .sea-city-stage { height:370px; } }

/* Terrain supplies an organic transparent edge; this only softens the viewport boundary. */
.sea-city-stage > iframe,
.sea-city-stage > .sea-city-poster img {
 -webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 62%,rgba(0,0,0,.96) 72%,rgba(0,0,0,.65) 86%,transparent 100%);
 mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 62%,rgba(0,0,0,.96) 72%,rgba(0,0,0,.65) 86%,transparent 100%);
}
.sea-city-stage iframe { background:transparent!important; }
.city-network__visual { overflow:visible; }

/* Global button rounding must not turn the city names into pills. */
.city-network__choices button { border-radius:0!important; background:transparent!important; }
.city-network__switcher button { border-radius:0!important; }

/* A full-width city landscape. Navigation and route details sit on the landscape. */
.city-network__layout { display:block; position:relative; }
.city-network__visual { width:100vw; max-width:none; margin-left:calc(50% - 50vw)!important; margin-right:0!important; }
.city-network .sea-city-stage { width:100%; height:clamp(640px,72vh,960px); }
.city-network .sea-city-stage .sea-city-poster,
.city-network .sea-city-stage iframe { top:0!important; height:100%!important; }
.city-network__controls { inset:auto auto 8% 50%; display:flex; align-items:center; gap:14px; width:max-content; max-width:calc(100% - 32px); transform:translateX(-50%); pointer-events:auto; }
.city-network__switcher { display:grid; grid-template-columns:54px minmax(220px,320px) 54px; align-items:stretch; gap:10px; margin:0; width:auto; }
html:root body#top .sea-city-visual :is(.city-network__switcher button,.city-network__info-toggle,.city-network__request,.sea-city-launch) {
 border:1px solid var(--city-control-edge)!important;
 border-radius:16px!important;
 background:var(--city-control-fill)!important;
 color:var(--city-control-ink)!important;
 box-shadow:var(--city-control-shadow)!important;
 -webkit-backdrop-filter:blur(7px) saturate(.82);
 backdrop-filter:blur(7px) saturate(.82);
 transition:transform 180ms cubic-bezier(.22,1,.36,1),background-color 180ms ease,border-color 180ms ease;
}
.city-network__switcher button { width:54px; min-height:56px; height:auto; font-size:22px; }
.city-network__request { display:flex; align-items:center; justify-content:center; gap:14px; padding:14px 18px; min-height:50px; max-width:100%; color:var(--city-control-ink); text-decoration:none; font:500 13px/1.4 var(--ui-font,Inter,sans-serif); }
.city-network__request svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.sea-city-visual .sea-city-launch { position:absolute; inset:8% auto auto 6%; transform:none; width:auto; max-width:calc(100% - 32px); min-width:48px; min-height:44px; margin:0; padding:10px 8px; z-index:5; font:400 12px/1.4 var(--ui-font-display,Bowler,sans-serif); }
html:root body#top .sea-city-visual .city-network__current { display:flex; gap:16px; justify-content:space-between; align-items:center; width:100%; padding:13px 20px!important; font:400 14px/1.45 var(--ui-font-display,Bowler,sans-serif)!important; letter-spacing:.015em; text-align:left; }
.city-network__current [data-city-current] { min-width:0; text-wrap:balance; }
.city-network__chevron { display:block; flex:none; width:10px; height:10px; font-size:0; opacity:.8; }
.city-network__chevron::after { content:""; display:block; width:6px; height:6px; margin-top:-1px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.city-network__arrow { display:block; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.city-network__choices { position:absolute; inset:auto 50% calc(100% + 12px) auto; transform:translateX(50%); display:grid; width:332px; max-width:calc(100vw - 32px); padding:10px; gap:2px; background:var(--city-panel-fill); color:var(--city-control-ink); border:1px solid var(--city-control-edge); box-shadow:var(--city-control-shadow); -webkit-backdrop-filter:blur(10px) saturate(.82); backdrop-filter:blur(10px) saturate(.82); border-radius:18px; max-height:50vh; overflow-y:auto; }
.city-network__choices[hidden] { display:none!important; }
.city-network__controls:has([data-city-menu-toggle][aria-expanded=true]) { z-index:8; }
html:root body#top .sea-city-visual .city-network__choices button { width:100%; padding:14px 14px; border:0!important; border-radius:10px!important; white-space:normal; font:400 12px/1.55 var(--ui-font-display,Bowler,sans-serif)!important; letter-spacing:.015em; min-height:48px; color:var(--city-control-ink)!important; box-shadow:none!important; transition:background-color 160ms ease; }
html:root body#top .sea-city-visual .city-network__choices button[aria-pressed=true] { background:rgb(146 171 139 / .18)!important; }
.city-network__info-toggle { display:flex; align-items:center; gap:10px; position:absolute; top:8%; right:6%; z-index:5; padding:12px 18px; font:400 11px/1.45 var(--ui-font-display,Bowler,sans-serif); cursor:pointer; min-height:48px; }
.city-network__info-toggle span { font-size:11px; }
.city-network__office-pin { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.city-network__information { position:absolute; top:calc(8% + 64px); right:6%; width:360px; max-width:calc(100% - 32px); padding:28px; background:var(--city-panel-fill); color:#202b22; border:1px solid var(--city-control-edge); border-radius:18px; box-shadow:var(--city-control-shadow); -webkit-backdrop-filter:blur(10px) saturate(.82); backdrop-filter:blur(10px) saturate(.82); z-index:6; max-height:calc(84% - 150px); overflow-y:auto; overscroll-behavior:contain; }
.city-network__information[hidden] { display:none!important; }
.city-network__close { position:absolute; right:6px; top:6px; display:grid; place-items:center; width:36px; height:36px; padding:0; border:0!important; box-shadow:none!important; background:none!important; color:#575756; font-size:22px; cursor:pointer; }
.city-network__information .city-network__info h3 { font-family:var(--ui-font,Inter,sans-serif); font-size:23px; }
.city-network__information .city-network__route-time { margin-top:18px; }
.city-network__information .city-network__route-time dd { font-size:28px; }
.city-network__information .city-network__route-basis { font-size:13px; }
.city-network__information .city-network__actions { margin-top:20px; }
@media(hover:hover) and (pointer:fine){
 html:root body#top .sea-city-visual :is(.city-network__switcher button,.city-network__info-toggle):hover { transform:translateY(-1px); background:var(--city-control-hover)!important; }
 html:root body#top .sea-city-visual .city-network__choices button:hover { background:rgb(255 255 250 / .46)!important; }
}
@media(max-width:760px){
 .city-network .sea-city-stage { height:50svh; min-height:360px; max-height:440px; }
 .city-network__controls { bottom:12px; flex-direction:column; gap:10px; }
 .city-network__request { min-height:44px; padding:10px 16px; }
 .sea-city-visual .sea-city-launch { top:22px; left:16px; }
 .city-network__switcher { grid-template-columns:46px minmax(150px,226px) 46px; gap:7px; }
 .city-network__switcher button { width:46px; min-height:54px; }
 html:root body#top .sea-city-visual .city-network__current { gap:10px; padding:12px 12px!important; font-size:12px!important; }
 .city-network__info-toggle { top:22px; right:16px; min-height:44px; font-size:12px; }
 .city-network__information { top:78px; right:16px; padding:24px; max-height:calc(100% - 100px); }
 .city-network__information .city-network__contacts { grid-template-columns:1fr; }
}
html[data-theme=dark] .sea-city-visual { --city-control-fill:rgb(228 237 219 / .72); --city-control-hover:rgb(244 249 235 / .87); --city-control-edge:rgb(249 255 241 / .38); --city-control-ink:#273d2d; --city-control-shadow:inset 0 1px 1px rgb(255 255 255 / .34),0 4px 14px rgb(0 0 0 / .10); --city-panel-fill:rgb(235 242 227 / .93); }
@media(prefers-reduced-motion:reduce){ html:root body#top .sea-city-visual :is(.city-network__switcher button,.city-network__info-toggle) { transition:none!important; transform:none!important; } }

/* Feather the poster's actual image bounds, including its mobile aspect ratio. */
.sea-city-stage > .sea-city-poster { display:flex; align-items:center; justify-content:center; min-height:0; -webkit-mask-image:none; mask-image:none; }
.sea-city-stage > .sea-city-poster img {
 position:static!important; inset:auto!important; display:block; flex:0 1 auto; min-width:0; min-height:0; width:auto!important; height:auto!important; max-width:100%; max-height:100%; margin:auto!important; object-fit:contain;

}

/* Day controls share the miniature city palette; night uses neutral glass. */
.city-network__information { --ui-ink:#202b22; --ui-muted:#566451; --ui-border:#c7cfc1; }
html body#top .city-network__information .city-network__info { background:transparent!important; color:#202b22!important; }
html body#top .city-network__information .city-network__info h3,
html body#top .city-network__information .city-network__contacts dd,
html body#top .city-network__information .city-network__info a:not(.btn-primary) { color:#202b22!important; }
html body#top .city-network__information .city-network__info p,
html body#top .city-network__information .city-network__info dt { color:#566451!important; }
html:root body#top .sea-city-visual :is(.city-network__switcher button,.city-network__info-toggle):active { transform:translateY(1px) scale(.97); }
.sea-city-visual iframe { opacity:0; transition:opacity 650ms ease; }
.sea-city-visual[data-city-state=ready] iframe { opacity:1; }
.sea-city-visual[data-city-state=ready][data-city-frame-ready=true] iframe { opacity:1; visibility:visible; transition:opacity 240ms ease-out; }
.sea-city-visual[data-city-state=ready][data-city-frame-ready=true] .sea-city-poster { visibility:hidden; }
.sea-city-visual[data-city-state=loading] iframe { opacity:0; visibility:hidden; pointer-events:none; }
.sea-city-visual[data-city-state=loading] .sea-city-poster { visibility:visible; }
html:root body#top #main-content .city-network .sea-city-visual[data-city-state=loading] .sea-city-status {
  inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:4;
  display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100% - 40px);
  padding:12px 18px;border:1px solid rgb(161 177 150 / .3);border-radius:16px;
  background:rgb(244 248 237 / .96)!important;color:#314230!important;box-shadow:0 6px 24px rgb(39 59 32 / .1);
  font:500 13px/1.4 var(--ui-font,Roboto,sans-serif);
}
.city-network .sea-city-visual[data-city-state=loading] .sea-city-status::before {
  content:"";width:17px;height:17px;flex:0 0 17px;border:2px solid #cbd6c4;border-top-color:#e52629;
  border-radius:50%;animation:city-loading-turn .85s linear infinite;
}
@keyframes city-loading-turn{to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){.city-network .sea-city-status::before{animation:none!important;}}
@media(prefers-reduced-motion:reduce){ .sea-city-visual iframe { transition:none!important; } }

/* City contacts are the practical entry point to each landscape. */
.city-network__directory-link { display:flex; justify-content:flex-end; padding:12px 0 24px; scroll-margin-top:100px; }
.city-network__information .city-network__contacts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 18px; }
.city-network__contacts > div:has(dt:first-child) { min-width:0; }
.city-network__contacts > div:first-child,
.city-network__contacts > div:has(dd:not(:has(a))),
.city-network__contacts > div:has(a[href^="mailto:"]) { grid-column:1 / -1; }
.city-network__information .city-network__info h3 { margin-bottom:18px; font-size:22px; }
.city-network__information .city-network__actions { margin-top:20px; gap:12px; }
html:root body#top .city-network__information .city-network__route-details { margin:20px 0 0!important; padding:0!important; border:0!important; border-top:1px solid #d3dbcc!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }
html:root body#top .city-network__information .city-network__route-details > summary { display:flex!important; justify-content:space-between; align-items:center; gap:12px; min-height:44px; padding:12px 0!important; font:500 13px/1.4 var(--ui-font,Inter,sans-serif)!important; color:#3e4c40!important; background:transparent!important; border:0!important; box-shadow:none!important; cursor:pointer; list-style:none; }
.city-network__route-details > summary::-webkit-details-marker { display:none; }
html:root body#top .city-network__information .city-network__route-details > summary::before,
html:root body#top .city-network__information .city-network__route-details > summary::after { content:none!important; }
.city-network__route-details > summary span { font-size:20px; }
.city-network__route-details[open] > summary span { transform:rotate(45deg); }
.city-network__route-content { padding:10px 0 0; }
html body#top .city-network__information .city-network__route-content h4 { color:#202b22!important; font:500 19px/1.3 var(--ui-font,Inter,sans-serif); margin:0 0 18px; }
.city-network__route-content .city-network__route-time { margin-top:14px; padding-top:12px; }
@media(max-width:760px){ .city-network__information .city-network__contacts { grid-template-columns:1fr; } .city-network__directory-link { justify-content:flex-start; } }

/* Neutral night glass: avoid pale green panels over the dark city. */
html[data-theme=dark] .sea-city-visual { --city-control-fill:rgb(26 29 33 / .78); --city-control-hover:rgb(43 47 53 / .9); --city-control-edge:rgb(229 234 241 / .19); --city-control-ink:#e6e9ed; --city-control-shadow:inset 0 1px 1px rgb(255 255 255 / .08),0 5px 18px rgb(0 0 0 / .2); --city-panel-fill:rgb(26 29 33 / .94); }
html[data-theme=dark] body#top .city-network__information { --ui-ink:#e6e9ed; --ui-muted:#aeb5bf; --ui-border:#434850; color:#e6e9ed; }
html[data-theme=dark] body#top .city-network__information .city-network__info,
html[data-theme=dark] body#top .city-network__information .city-network__info h3,
html[data-theme=dark] body#top .city-network__information .city-network__contacts dd,
html[data-theme=dark] body#top .city-network__information .city-network__info a:not(.btn-primary) { color:#e6e9ed!important; }
html[data-theme=dark] body#top .city-network__information .city-network__info p,
html[data-theme=dark] body#top .city-network__information .city-network__info dt { color:#aeb5bf!important; }
html[data-theme=dark] body#top .city-network__close { color:#c6ccd4; }
html:root[data-theme=dark] body#top .sea-city-visual .city-network__choices button[aria-pressed=true],
html:root[data-theme=dark] body#top .sea-city-visual .city-network__choices button:hover { background:rgb(232 237 245 / .12)!important; }
html:root[data-theme=dark] body#top #main-content .city-network .sea-city-visual[data-city-state=loading] .sea-city-status { background:rgb(26 29 33 / .94)!important; color:#dce1e8!important; border-color:rgb(229 234 241 / .19); }
html[data-theme=dark] .city-network .sea-city-visual[data-city-state=loading] .sea-city-status::before { border-color:#555b65; border-top-color:#e52629; }
html:root[data-theme=dark] body#top .sea-city-visual .city-network__route-details summary,
html:root[data-theme=dark] body#top .sea-city-visual .city-network__route-content h4 { color:#e6e9ed!important; }
html:root[data-theme=dark] body#top .city-network__information .city-network__route-details { border-top-color:#434850!important; }