/* KIDTECHLABS Metro (home, "Our solutions"): the labs as stations of a 3D metro hub
   (scenes/metro.js). Linked in the home page head, so the hub's box has its final size at first
   paint and the canvas fades in without moving anything. Without the 3D (no WebGL, a module
   error, no JavaScript) the station cards stay as a static metro map. */

.metro-hub {
  /* the three lines: coral, sky blue and yellow (brand colours only; the old 'green' id reads yellow) */
  --line-coral: var(--coral); --line-blue: var(--blue); --line-yellow: var(--yellow); --line-green: var(--yellow);
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr);
  background: #fff; border: 1px solid #dfe4e8; border-radius: 28px; overflow: hidden;
  box-shadow: rgba(34, 54, 74, 0.33) 0 22px 55px -38px;
}
.metro-hub [data-line="coral"] { --line: var(--line-coral); }
.metro-hub [data-line="blue"] { --line: var(--line-blue); }
.metro-hub [data-line="green"] { --line: var(--line-green); }
.metro-hub [data-line="yellow"] { --line: var(--line-yellow); }

/* ---------- stage */
.metro-stage {
  position: relative; overflow: hidden; height: var(--metro-stage-h, clamp(440px, calc(100svh - 290px), 620px));
  background: radial-gradient(130% 95% at 50% 64%, #ffffff 0%, #f4f9fb 52%, #e5f1f7 100%);
  /* touch-action lives on the stage alone (its children add nothing): one finger scrolls the page
     past the map (pan-y) until "Touch to explore" gives every gesture to the city (none). It is
     set before any gesture starts, never toggled mid-gesture. Browser zoom stays on everywhere else. */
  touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.metro-stage[data-explore="true"] { touch-action: none; overscroll-behavior: contain; }
.metro-canvas { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; }
.metro-canvas canvas { width: 100%; height: 100%; display: block; }
.metro-hub[data-ready="true"] .metro-canvas { opacity: 1; }
/* first paint / loading: three soft line strokes, like a map being drawn */
.metro-poster { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.5s ease; }
.metro-poster span { position: absolute; left: 12%; right: 12%; height: 6px; border-radius: 6px; opacity: 0.55; }
.metro-poster span:nth-child(1) { top: 46%; background: var(--coral); }
.metro-poster span:nth-child(2) { top: 52%; background: var(--blue); left: 18%; right: 18%; }
.metro-poster span:nth-child(3) { top: 58%; background: var(--yellow); left: 24%; right: 24%; }
.metro-hub[data-ready="true"] .metro-poster { opacity: 0; }

/* each station's hit target (sized and placed by the scene; a tap is matched against these boxes,
   so they never take a pointer themselves and never sit in the way of a pinch) */
.metro-hotspots { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.metro-hotspot {
  position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 14px; pointer-events: none;
  color: transparent; font-size: 0; -webkit-tap-highlight-color: transparent;
}
.metro-hotspot::after {
  content: ""; position: absolute; left: 50%; top: -6px; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg) scale(0.4); opacity: 0; background: var(--coral);
  border: 2px solid #fff; box-shadow: 0 3px 8px rgba(30, 41, 66, 0.25); transition: opacity 0.2s, transform 0.25s;
}
.metro-hub[data-ready="true"] .metro-hotspot[data-active="true"]::after { opacity: 1; transform: rotate(-45deg) scale(1); animation: metro-pin 1.6s ease-in-out infinite; }
@keyframes metro-pin { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

/* station names: crisp HTML pills over the 3D (placed by the scene), the readable layer */
.metro-labels { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.metro-label {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 13px 6px 6px; border-radius: 12px; background: #fff; color: var(--ink); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(30, 41, 66, 0.14), 0 6px 16px -6px rgba(23, 44, 67, 0.38);
  pointer-events: none; opacity: 0; transition: opacity 0.35s ease, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent; will-change: transform;
}
.metro-label::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--bar, var(--tone)); }
.metro-hub[data-ready="true"] .metro-label[data-show="true"] { opacity: 1; }
.metro-label-code {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--tone);
  color: var(--ink); font: 800 11px/1 var(--heading-font); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1.5px var(--ink);
}
.metro-label-text { display: flex; flex-direction: column; line-height: 1.15; }
.metro-label-name { font: 600 15.5px/1.2 var(--heading-font); letter-spacing: -0.01em; }
.metro-label-short { display: none; font: 600 13.5px/1.2 var(--heading-font); letter-spacing: -0.01em; }
.metro-label-status { display: none; margin-top: 2px; font: 600 12px/1.25 var(--body-font); color: #a8442a; }
.metro-label[data-status="true"] .metro-label-status { display: block; }
.metro-label:hover { box-shadow: 0 0 0 1.5px var(--ink), 0 8px 18px -6px rgba(23, 44, 67, 0.45); }
.metro-label[data-active="true"] { z-index: 1; box-shadow: 0 0 0 2.5px var(--coral), 0 8px 20px -6px rgba(201, 83, 47, 0.45); }
/* the labels carry the station markers: no separate pin or roundel */
.metro-hotspot::after, .metro-hotspot::before { display: none !important; }

/* who is coming: a tag over a train sent to a visitor's station */
.metro-tags { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.metro-tag {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); border: 1.5px solid var(--line, var(--coral));
  color: var(--ink); font: 600 11px/1.2 var(--body-font); box-shadow: 0 4px 12px rgba(30, 41, 66, 0.14);
}
.metro-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line, var(--coral)); }
.metro-tag[hidden] { display: none; }

/* the announcer's speech bubble (placed by the scene over the child with the microphone) */
.metro-bubble {
  position: absolute; left: 0; top: 0; z-index: 4; padding: 6px 11px; border-radius: 12px 12px 12px 4px; white-space: nowrap;
  background: #fff; color: var(--ink); font: 700 12.5px/1.2 var(--heading-font); pointer-events: none;
  box-shadow: 0 0 0 1.5px var(--ink), 0 6px 14px -6px rgba(23, 44, 67, 0.45); opacity: 0; transition: opacity 0.25s ease;
}
.metro-bubble::after { content: ""; position: absolute; left: 12px; bottom: -6px; width: 10px; height: 10px; background: #fff; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); border-bottom-right-radius: 2px; }
.metro-bubble[data-show="true"] { opacity: 1; }

/* the mission board: the current robot mission and its seven steps across the labs (under the map:
   see "Mission board under the map" at the end of this file) */
.metro-mission-head { margin: 0; min-width: 0; font: 700 12.5px/1.25 var(--heading-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metro-mission-kicker { display: block; margin-bottom: 2px; color: #46536E; font: 700 9.5px/1.2 var(--body-font); letter-spacing: 0.08em; text-transform: uppercase; }
.metro-mission-steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin: 0; padding: 0; list-style: none; }
.metro-mission-steps li { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.metro-mission-dot {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #eef2f5; color: #7a8a9b;
  font: 800 10px/1 var(--heading-font); box-shadow: inset 0 0 0 1.5px #d4dde3; transition: background 0.3s, box-shadow 0.3s, color 0.3s;
}
.metro-mission-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6b7c8d; font: 600 9.5px/1.2 var(--body-font); }
.metro-mission-steps li[data-state="done"] .metro-mission-dot { background: var(--tone); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.metro-mission-steps li[data-state="active"] .metro-mission-dot { background: var(--tone); color: var(--ink); box-shadow: 0 0 0 2.5px var(--coral), inset 0 0 0 1.5px var(--ink); animation: metro-step 1.4s ease-in-out infinite; }
.metro-mission-steps li[data-state="active"] .metro-mission-name { color: var(--ink); font-weight: 700; }
.metro-mission-steps li[data-state="next"] .metro-mission-dot { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 2px #fff, 0 0 0 3.5px var(--line, var(--coral)); }
@keyframes metro-step { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.metro-mission-text {
  margin: 0; min-width: 0; color: #2E3B57; font: 600 11.5px/1.35 var(--body-font);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.metro-mission[data-line] .metro-mission-text::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--line); }
.metro-mission-follow {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 5px 14px 5px 6px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(30, 41, 66, 0.16); background: #fff; color: var(--ink); font: 600 12px/1.2 var(--body-font);
  box-shadow: 0 6px 16px -12px rgba(30, 41, 66, 0.55); transition: border-color 0.18s, background 0.18s;
}
.metro-mission-follow:hover { border-color: var(--ink); }
.metro-mission-follow:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink); }
.metro-mission-follow-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 12px; }
.metro-mission-follow[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.metro-mission-follow[aria-pressed="true"] .metro-mission-follow-ico { box-shadow: none; color: var(--ink); }
/* without the 3D the stations' cards are the lab list: no mission board */
.metro-hub[data-fallback="true"] .metro-mission, .metro-hub[data-scene-error="true"] .metro-mission { display: none; }

.metro-legend {
  position: absolute; z-index: 3; top: 18px; right: 18px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 12px;
  margin: 0; padding: 7px 13px; list-style: none; background: rgba(255, 255, 255, 0.9); border: 1px solid #dfe6ea; border-radius: 999px;
  color: #34465a; font-size: 0.7rem; font-weight: 600; line-height: 1.4; pointer-events: none;
}
.metro-legend li { display: inline-flex; align-items: center; gap: 6px; }
.metro-legend-bar { width: 18px; height: 5px; border-radius: 3px; background: var(--line); }
.metro-legend-interchange { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2.5px solid var(--ink); box-sizing: border-box; }
.metro-hint {
  position: absolute; z-index: 3; bottom: 14px; left: 50%; transform: translateX(-50%); margin: 0; padding: 5px 12px;
  border-radius: 20px; background: rgba(255, 255, 255, 0.92); color: #526477; font-size: 0.72rem; letter-spacing: 0.015em;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.4s;
}
.metro-hint[data-show="true"] { opacity: 1; }
.metro-hint-touch { display: none; }
@media (hover: none), (pointer: coarse) { .metro-hint-fine { display: none; } .metro-hint-touch { display: inline; } }

/* ---------- the station card (desktop: over the stage, top left) */
.metro-cards { position: absolute; z-index: 4; top: 18px; left: 18px; width: min(350px, 32%); display: grid; pointer-events: none; }
.metro-card {
  grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(6px); pointer-events: auto;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  background: rgba(255, 255, 255, 0.95); border: 1px solid #dde5ea; border-radius: 18px; padding: 0 18px 14px; overflow: hidden;
  box-shadow: 0 14px 34px -18px rgba(23, 44, 67, 0.4);
}
.metro-card::before { content: ""; display: block; height: 6px; margin: 0 -18px 12px; background: var(--tone); }
.metro-card[data-active="true"] { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.metro-card-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: #526477; font-size: 0.72rem; font-weight: 600; line-height: 1.3; }
.metro-card-code, .metro-stop-code {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--tone); color: var(--ink); font: 800 0.66rem/1 var(--heading-font); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1.5px var(--ink);
}
.metro-card-lines, .metro-stop-lines { display: inline-flex; gap: 3px; }
.metro-line-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--line); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(30, 41, 66, 0.2); }
.metro-card-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metro-card h3 { font-size: 1.35rem; margin: 2px 0 0; color: var(--ink); }
.metro-card-summary { margin: 6px 0 2px; font-size: 0.86rem; line-height: 1.55; }
.metro-card-link { font-size: 0.86rem; margin-top: 6px; }

/* ---------- station links (chips) under the stage */
.metro-stops { border-top: 1px solid #e2e7e9; padding: var(--metro-chips-pad, 14px 18px 16px); background: #fff; height: var(--metro-chips-h, auto); }
.metro-stops ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.metro-stop {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px 6px 6px; border-radius: 999px;
  border: 1px solid #d4dde3; background: #fff; color: #33465b; font-size: 0.78rem; font-weight: 600; line-height: 1.2;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; touch-action: manipulation;
}
.metro-stop:hover { background: #f6f8f9; border-color: #a7b6c3; }
.metro-stop[data-active="true"] { background: #fff7f2; border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); color: var(--ink); }
.metro-stop:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.metro-stop-code { width: 26px; height: 26px; }
/* wide screens: the seven stations in one row, like a line strip */
@media (min-width: 1000px) {
  .metro-stops ol { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  .metro-stop { width: 100%; padding: 5px 8px 5px 5px; gap: 7px; font-size: 0.74rem; }
  .metro-stop-name { min-width: 0; }
  .metro-stop-lines { margin-left: auto; }
}

/* ---------- home chapter fit */
.home .home-solutions { padding-bottom: 70px; }
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .chapter-scroll .metro-hub { scroll-snap-align: center; }
}
@media (min-width: 901px) and (max-height: 800px) {
  .metro-stage { height: var(--metro-stage-h, clamp(400px, calc(100svh - 210px), 560px)); }
  .home .home-solutions { padding-bottom: 40px; }
}

/* ---------- phones and tablets: the map is laid out vertically, the card sits under it */
@media (max-width: 820px) {
  .metro-hub { border-radius: 22px; }
  .metro-stage { height: var(--metro-stage-h, clamp(430px, 132vw, 600px)); }
  .metro-cards { position: relative; top: auto; left: auto; width: auto; padding: 14px 16px 0; }
  .metro-card { border: 0; box-shadow: none; padding: 0 2px 4px; background: transparent; transform: none; }
  .metro-card::before { margin: 0 0 12px; border-radius: 3px; height: 5px; }
  .metro-card h3 { font-size: 1.3rem; }
  .metro-legend { top: 10px; right: auto; left: 10px; flex-wrap: nowrap; justify-content: flex-start; padding: 5px 10px; gap: 4px 10px; font-size: 0.66rem; }
  .metro-hint { bottom: 10px; font-size: 0.68rem; }
  .metro-stops { border-top: 0; padding: 10px 14px 16px; }
  .metro-stops ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .metro-stop { width: 100%; min-height: 44px; padding: 5px 10px 5px 5px; font-size: 0.74rem; }
  .metro-stop-lines { display: none; }
  /* numbered roundels mark the stations on the small map (the boards are too small to read) */
  .metro-hotspot::before {
    content: attr(data-code); position: absolute; left: 50%; top: 0; width: 22px; height: 22px; transform: translate(-50%, -55%);
    border-radius: 50%; background: var(--tone); color: var(--ink); font: 800 9.5px/22px var(--heading-font); text-align: center;
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 1.5px var(--ink), 0 3px 8px rgba(30, 41, 66, 0.25); opacity: 0; transition: opacity 0.3s, transform 0.25s;
  }
  .metro-hub[data-ready="true"] .metro-hotspot::before { opacity: 1; }
  .metro-hub[data-ready="true"] .metro-hotspot[data-active="true"]::before { transform: translate(-50%, -55%) scale(1.3); box-shadow: inset 0 0 0 2px #fff, 0 0 0 2.5px var(--coral), 0 4px 10px rgba(30, 41, 66, 0.3); }
  .metro-hotspot::after { display: none; }
}
@media (max-width: 520px) {
  .metro-legend .metro-legend-word, .metro-legend .metro-legend-key { display: none; }
}
/* phones: short names next to the numbered badges */
@media (max-width: 640px) {
  .metro-label { gap: 6px; padding: 6px 10px 5px 5px; border-radius: 11px; }
  .metro-label-name { display: none; }
  .metro-label-short { display: block; }
  .metro-label-code { width: 21px; height: 21px; font-size: 10px; }
  .metro-label-status { font-size: 11px; }
}
/* the touch hint sits above the station list on small screens (nothing covers the map) */
.metro-stops-hint { display: none; margin: 0 0 10px; color: #526477; font-size: 0.72rem; line-height: 1.4; }
@media (max-width: 820px) {
  .metro-hint { display: none; }
  .metro-stops-hint { display: block; } /* (always there on small screens: nothing shifts when the 3D arrives) */
}
@media (max-width: 360px) {
  .metro-stop { font-size: 0.7rem; gap: 6px; padding-right: 6px; }
  .metro-legend { font-size: 0.62rem; gap: 4px 8px; }
}

/* ---------- static metro map (no 3D): every station as a card on a line */
.metro-hub[data-fallback="true"] .metro-stage, .metro-hub[data-scene-error="true"] .metro-stage,
.metro-hub[data-fallback="true"] .metro-stops, .metro-hub[data-scene-error="true"] .metro-stops { display: none; }
.metro-hub[data-fallback="true"] .metro-cards, .metro-hub[data-scene-error="true"] .metro-cards {
  position: relative; top: auto; left: auto; width: auto; pointer-events: auto;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 22px 18px; padding: 26px;
}
.metro-hub[data-fallback="true"] .metro-card, .metro-hub[data-scene-error="true"] .metro-card {
  grid-area: auto; visibility: visible; opacity: 1; transform: none; box-shadow: none; position: relative;
  border: 1px solid #e1e7eb; border-radius: 18px; padding: 0 18px 14px; background: #fff;
}
.metro-hub[data-fallback="true"] .metro-card-status, .metro-hub[data-scene-error="true"] .metro-card-status { white-space: normal; }
@media (max-width: 820px) {
  .metro-hub[data-fallback="true"] .metro-cards, .metro-hub[data-scene-error="true"] .metro-cards { padding: 16px; gap: 14px; }
  .metro-hub[data-fallback="true"] .metro-card::before, .metro-hub[data-scene-error="true"] .metro-card::before { margin: 0 -18px 12px; border-radius: 0; }
}
.metro-hub[data-fallback="true"] .metro-card::before, .metro-hub[data-scene-error="true"] .metro-card::before { height: 8px; background: linear-gradient(90deg, var(--coral), var(--blue), var(--yellow)); }
@media print { .metro-stage, .metro-stops { display: none; } .metro-cards { position: static; display: grid; width: auto; } .metro-card { visibility: visible; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .metro-card, .metro-canvas, .metro-poster { transition: none; }
  .metro-hotspot[data-active="true"]::after { animation: none !important; }
}

/* labels and train tags are moved every frame by the scene: never transition their position */
.metro-label, .metro-tag { transition-property: opacity, box-shadow; }

/* the lab glimpse: a small live 3D window (drawn by the scene into the canvas behind the frame) */
.metro-glimpse {
  position: absolute; z-index: 4; right: 18px; bottom: 58px; width: min(290px, 26%); margin: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.3s ease; /* (no transform: the scene draws into the frame's exact box) */
}
.metro-glimpse[data-show="true"] { opacity: 1; }
.metro-glimpse-frame {
  height: 168px; border-radius: 14px 14px 0 0;
  box-shadow: 0 0 0 2.5px #fff, 0 0 0 4px var(--tone, var(--coral)), 0 16px 30px -16px rgba(23, 44, 67, 0.55);
}
.metro-glimpse-cap {
  margin: 4px 0 0; padding: 7px 11px 8px; border-radius: 0 0 12px 12px; background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 1px #dde5ea; color: var(--ink);
}
.metro-glimpse-kicker { display: block; color: #526477; font: 700 9.5px/1.25 var(--body-font); letter-spacing: 0.06em; text-transform: uppercase; }
.metro-glimpse-text { display: block; margin-top: 2px; font: 600 12px/1.3 var(--heading-font); }
@media (max-width: 820px) {
  .metro-glimpse { top: 50px; right: 8px; bottom: auto; width: 52%; }
  .metro-glimpse-frame { height: 112px; border-radius: 12px 12px 0 0; }
  .metro-glimpse-cap { padding: 5px 9px 6px; }
  .metro-glimpse-kicker { font-size: 8.5px; }
  .metro-glimpse-text { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) { .metro-glimpse { transition: none; } }

/* ---------- exploring the map: tools, ride bar, tooltip, cursor */
.metro-stage { cursor: grab; }
.metro-stage[data-dragging="true"], .metro-stage[data-dragging="true"] * { cursor: grabbing !important; }
.metro-stage[data-pointer="true"] { cursor: pointer; }
.metro-stage:focus-visible { outline: 3px solid var(--focus, #2f86c4); outline-offset: -3px; }
.metro-ui { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.metro-tools { position: absolute; top: 62px; right: 18px; display: flex; gap: 6px; pointer-events: none; }
.metro-tools[hidden], .metro-ridebar[hidden], .metro-btn[hidden] { display: none; }
.metro-btn {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px 6px 9px; border-radius: 999px;
  border: 1px solid #d4dde3; background: rgba(255, 255, 255, 0.95); color: var(--ink); font: 600 12px/1.2 var(--body-font); cursor: pointer;
  box-shadow: 0 6px 16px -10px rgba(23, 44, 67, 0.45); transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.metro-btn:hover { border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.metro-btn:focus-visible { outline: 3px solid var(--focus, #2f86c4); outline-offset: 2px; }
.metro-btn-ico { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--yellow, #ffd54a); font-size: 10px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.metro-btn-sm { min-height: 30px; padding: 4px 11px; }
.metro-btn-x { width: 30px; justify-content: center; padding: 0; }
.metro-ridebar {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 0 0 1px #dde5ea, 0 10px 24px -14px rgba(23, 44, 67, 0.5); pointer-events: auto; white-space: nowrap;
}
.metro-ridebar-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line, var(--coral)); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ink); }
.metro-ridebar-text { color: var(--ink); font: 700 12.5px/1.2 var(--heading-font); }
.metro-toast {
  position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); margin: 0; padding: 6px 12px; border-radius: 999px;
  background: var(--ink); color: #fff; font: 600 12px/1.2 var(--body-font); opacity: 0; transition: opacity 0.25s; white-space: nowrap;
}
.metro-toast[data-show="true"] { opacity: 0.94; }
.metro-tip {
  position: absolute; left: 0; top: 0; max-width: 300px; padding: 6px 10px; border-radius: 10px; background: var(--ink); color: #fff;
  font: 600 11.5px/1.35 var(--body-font); box-shadow: 0 8px 20px -10px rgba(23, 44, 67, 0.6); pointer-events: none;
}
.metro-tip[hidden] { display: none; }
/* riding: the station links step aside (the names stay); the legend and the hint make room for the ride bar */
.metro-hub[data-riding] .metro-hotspot { pointer-events: none !important; }
.metro-hub[data-riding] .metro-legend, .metro-hub[data-riding] .metro-hint, .metro-hub[data-following] .metro-hint { opacity: 0; transition: opacity 0.3s; }
/* on desktop the card over the stage shrinks to its title while riding, so the windscreen stays clear */
@media (min-width: 821px) {
  .metro-hub[data-riding] .metro-card-summary, .metro-hub[data-riding] .metro-card-link { display: none; }
}
@media (max-width: 820px) {
  .metro-tools { top: auto; bottom: 84px; right: 8px; gap: 5px; }
  .metro-btn { min-height: 32px; padding: 5px 10px 5px 7px; font-size: 11px; }
  .metro-btn-ico { width: 18px; height: 18px; }
  .metro-ridebar { top: 8px; left: 8px; right: 8px; transform: none; justify-content: space-between; gap: 5px; padding: 5px 5px 5px 10px; }
  .metro-ridebar-text { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
  .metro-toast { bottom: 86px; font-size: 11px; }
}
@media (max-width: 400px) { .metro-tools .metro-btn span:not(.metro-btn-ico) { display: none; } .metro-tools .metro-btn { padding: 5px; } }

/* Owner (2026-10-19): the floating lab-name pills covered the 3D map. The names stay on the stations'
   3D signs, on the station card and in the station list under the map. */
.metro-labels { display: none !important; }

/* Skyscraper-city hub (2026-10-19): a minimal HUD over the 3D city (the lab names are the 3D signs
   over each lab yard; the line colours read from the viaducts and the signs' colour strips). Only the
   toolbar, the mission board and the glimpse window stay; the line legend goes. */
.metro-hub[data-ready="true"] .metro-legend { display: none; }
@media (min-width: 821px) { .metro-hub[data-ready="true"] .metro-tools { top: 16px; } }

/* Full-bleed hub (2026-10-20): the focused lab's link stays on top of its neighbours' (its area is the hover
   region a hovered close view keeps until the pointer leaves it) */
.metro-hub .metro-hotspot[data-active="true"] { z-index: 1; }

/* ---------- Controls audit (2026-10-20) */
/* the lab the hover picked (nearest centre where links overlap) is on top: a click opens the lab shown */
.metro-hub .metro-hotspot[data-hover="true"] { z-index: 2; }
/* touch: every map control is a 44 x 44 px target (icon-only tools, the ride bar's buttons) */
@media (max-width: 820px), (pointer: coarse) {
  .metro-btn, .metro-btn-sm { min-height: 44px; }
  .metro-btn-x { width: 44px; min-width: 44px; }
}
@media (max-width: 400px) {
  .metro-tools .metro-btn { min-width: 44px; justify-content: center; }
}
/* phones: the toast sits near the top of the map (clear of the tools at the bottom right and of the
   ride bar), may wrap, and the tools and the ride bar keep clear of a notch / rounded corners */
@media (max-width: 820px) {
  .metro-toast { top: 64px; bottom: auto; width: max-content; max-width: calc(100% - 32px); white-space: normal; text-align: center; }
  .metro-tools { right: calc(8px + env(safe-area-inset-right, 0px)); }
  .metro-ridebar { left: calc(8px + env(safe-area-inset-left, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); }
}

/* ---------- Projection pass (2026-10-21): a lighter HUD that floats over the city, never on it.
   Smaller frosted pills in the brand's navy, white and yellow; the mission board a compact glass
   strip; the Back control appears while a lab is open. (.metro-hub prefix: these win over the
   base rules above without !important.) */
.metro-hub .metro-btn {
  min-height: 32px; padding: 4px 11px 4px 5px; gap: 6px; border: 1px solid rgba(30, 41, 66, 0.12);
  background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  color: var(--ink); font: 600 11.5px/1.2 var(--body-font); letter-spacing: 0.005em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 16px -10px rgba(30, 41, 66, 0.5);
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.metro-hub .metro-btn:hover { background: rgba(255, 255, 255, 0.96); border-color: rgba(30, 41, 66, 0.55); box-shadow: 0 8px 18px -10px rgba(30, 41, 66, 0.55); transform: translateY(-1px); }
.metro-hub .metro-btn:active { transform: translateY(0); }
.metro-hub .metro-btn-ico { width: 22px; height: 22px; font-size: 10px; background: var(--yellow, #FFD54A); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(30, 41, 66, 0.85); }
.metro-hub .metro-btn-sm { min-height: 30px; padding: 4px 11px; }
.metro-hub .metro-btn-x { width: 30px; padding: 0; }
.metro-hub .metro-btn-back[data-back="true"] { background: var(--ink, #1E2942); border-color: var(--ink, #1E2942); color: #fff; }
.metro-hub .metro-btn-back[data-back="true"] .metro-btn-ico { background: var(--yellow, #FFD54A); box-shadow: none; font-size: 12px; }
.metro-hub .metro-btn-back[data-back="true"]:hover { background: #2E3B57; }
.metro-hub .metro-tools { gap: 6px; }
.metro-hub .metro-mission-kicker { color: #46536E; font-size: 9px; }
.metro-hub .metro-mission-dot { width: 18px; height: 18px; font-size: 9.5px; background: rgba(30, 41, 66, 0.06); color: #5B6782; box-shadow: inset 0 0 0 1.5px rgba(30, 41, 66, 0.18); }
.metro-hub .metro-mission-name { color: #5B6782; font-size: 9px; }
.metro-hub .metro-hint { padding: 4px 11px; background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #46536E; font-size: 0.68rem; box-shadow: 0 6px 16px -12px rgba(30, 41, 66, 0.5); }
.metro-hub .metro-ridebar { background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); box-shadow: 0 0 0 1px rgba(30, 41, 66, 0.1), 0 10px 24px -14px rgba(30, 41, 66, 0.55); }
.metro-hub .metro-toast { background: rgba(30, 41, 66, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.metro-hub .metro-tip { background: rgba(30, 41, 66, 0.94); border-radius: 9px; font-size: 11px; }
.metro-hub .metro-btn:focus-visible { outline: 3px solid var(--yellow, #FFD54A); outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink, #1E2942); }
@media (max-width: 820px) {
  .metro-hub .metro-btn { padding: 4px 10px 4px 5px; font-size: 11px; }
}
/* touch: still 44 px targets */
@media (max-width: 820px), (pointer: coarse) {
  .metro-hub .metro-btn, .metro-hub .metro-btn-sm { min-height: 44px; }
  .metro-hub .metro-btn-x { width: 44px; min-width: 44px; }
}
@media (max-width: 400px) {
  .metro-hub .metro-tools .metro-btn { min-width: 44px; padding: 4px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .metro-hub .metro-btn { transition: none; } .metro-hub .metro-btn:hover { transform: none; } }

/* ---------- Controls and station preview (2026-10-23): zoom / overview buttons, "Touch to explore",
   the two-step station preview (floating card beside the lab; phones: a compact bottom sheet;
   short landscape stages: a side panel). Brand colours only: coral, yellow, sky blue, navy, white;
   the card's accent is the lab's line colour (--pv-accent, set by the scene). */
.metro-hub .metro-zoom {
  position: absolute; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: 16px; display: flex; flex-direction: column; gap: 6px;
  pointer-events: none; z-index: 1;
}
.metro-hub .metro-zbtn {
  pointer-events: auto; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(30, 41, 66, 0.12); background: rgba(255, 255, 255, 0.86); color: var(--ink, #1E2942);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 16px -10px rgba(30, 41, 66, 0.5); transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.metro-hub .metro-zbtn:hover { background: #fff; border-color: rgba(30, 41, 66, 0.5); transform: translateY(-1px); }
.metro-hub .metro-zbtn:active { transform: translateY(0); }
.metro-hub .metro-zbtn:focus-visible, .metro-hub .metro-explore:focus-visible { outline: 3px solid var(--yellow, #FFD54A); outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink, #1E2942); }
.metro-hub .metro-explore {
  position: absolute; z-index: 1; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + 3 * 44px + 2 * 6px + 10px);
  pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 5px 14px 5px 6px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(30, 41, 66, 0.14); background: rgba(255, 255, 255, 0.9); color: var(--ink, #1E2942); font: 700 12px/1.2 var(--body-font);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); box-shadow: 0 8px 20px -12px rgba(30, 41, 66, 0.6);
}
.metro-hub .metro-explore[hidden] { display: none; }
.metro-explore-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--yellow, #FFD54A); box-shadow: inset 0 0 0 1.5px var(--ink, #1E2942); }
.metro-hub .metro-explore[aria-pressed="true"] { background: var(--ink, #1E2942); border-color: var(--ink, #1E2942); color: #fff; }
.metro-hub .metro-explore[aria-pressed="true"] .metro-explore-ico { box-shadow: none; color: var(--ink, #1E2942); }
/* while exploring, a thin yellow frame says the map has the gestures */
.metro-stage[data-explore="true"] .metro-ui { box-shadow: inset 0 0 0 3px rgba(255, 213, 74, 0.95), inset 0 0 0 4.5px rgba(30, 41, 66, 0.22); }
/* (exploring: the screen's side edges stay the browser's and the system's, for back gestures) */
.metro-edge { display: none; position: absolute; top: 0; z-index: 7; width: 16px; height: 0; touch-action: pan-y; }
.metro-edge[data-side="left"] { left: 0; }
.metro-edge[data-side="right"] { right: 0; }
.metro-hub[data-explore="true"] .metro-edge { display: block; }

/* the station preview */
.metro-preview {
  --pv-accent: var(--coral, #FF784F); --pv-accent-dark: #C9532F;
  position: absolute; left: 0; top: 0; z-index: 2; width: min(336px, calc(100% - 28px)); margin: 0; pointer-events: auto;
}
/* (!important: the side layout's display: flex has the same specificity and comes later) */
.metro-preview[hidden] { display: none !important; }
/* (opened by a tap: no pointer input until that touch is over, so it can never also follow the link) */
.metro-preview[data-arming="true"] { pointer-events: none; }
.metro-pv-card {
  position: relative; overflow: hidden; border-radius: 20px; padding: 18px 16px 14px; color: var(--ink, #1E2942); outline: none;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--pv-accent) 15%, transparent), transparent 62%), rgba(255, 255, 255, 0.97);
  box-shadow: 0 0 0 1px rgba(30, 41, 66, 0.1), 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 22px 44px -22px rgba(30, 41, 66, 0.6), 0 6px 14px -8px rgba(30, 41, 66, 0.28);
  animation: metro-pv-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.metro-pv-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--pv-accent); }
.metro-pv-card:focus-visible { box-shadow: 0 0 0 3px var(--yellow, #FFD54A), 0 0 0 5px var(--ink, #1E2942), 0 22px 44px -22px rgba(30, 41, 66, 0.6); }
@keyframes metro-pv-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes metro-pv-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.metro-pv-x {
  position: absolute; top: 6px; right: 6px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink, #1E2942); cursor: pointer; transition: background 0.15s;
}
.metro-pv-x:hover { background: rgba(30, 41, 66, 0.07); }
.metro-pv-x:focus-visible { outline: 3px solid var(--yellow, #FFD54A); outline-offset: -4px; }
.metro-pv-head { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
.metro-pv-icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: #fff;
  box-shadow: inset 0 0 0 2px var(--pv-accent), 0 8px 16px -10px rgba(30, 41, 66, 0.55);
}
.metro-pv-titles { min-width: 0; }
.metro-pv-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; margin: 0 0 4px; color: #46536E; font: 600 11px/1.3 var(--body-font); }
.metro-pv-code { display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--ink, #1E2942); color: #fff; font: 800 10px/1 var(--heading-font); letter-spacing: 0.02em; }
.metro-pv-lines { display: inline-flex; gap: 3px; }
.metro-pv-lines i { display: inline-block; width: 14px; height: 5px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(30, 41, 66, 0.12); }
.metro-pv-title { margin: 0; color: var(--ink, #1E2942); font: 600 1.24rem/1.15 var(--heading-font); letter-spacing: -0.02em; }
.metro-pv-tag { margin: 12px 0 0; color: var(--ink, #1E2942); font: 700 0.82rem/1.35 var(--heading-font); }
.metro-pv-tag[hidden] { display: none; }
.metro-pv-text { margin: 4px 0 0; color: #34465A; font: 400 0.86rem/1.5 var(--body-font); }
.metro-pv-status { display: flex; align-items: center; gap: 7px; margin: 9px 0 0; color: #46536E; font: 600 0.74rem/1.3 var(--body-font); }
.metro-pv-status::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--pv-accent); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(30, 41, 66, 0.35); }
.metro-pv-status:empty { display: none; }
.metro-pv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.metro-pv-go {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 16px; border-radius: 999px;
  background: var(--pv-accent); color: var(--ink, #1E2942); font: 700 0.9rem/1.2 var(--heading-font); text-decoration: none; text-align: center;
  box-shadow: inset 0 0 0 1.5px var(--ink, #1E2942), 0 3px 0 var(--ink, #1E2942); transition: transform 0.15s, box-shadow 0.15s;
}
.metro-pv-go svg { flex: 0 0 auto; }
.metro-pv-go:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--ink, #1E2942), 0 4px 0 var(--ink, #1E2942); }
.metro-pv-go:active { transform: translateY(2px); box-shadow: inset 0 0 0 1.5px var(--ink, #1E2942), 0 1px 0 var(--ink, #1E2942); }
.metro-pv-go:focus-visible, .metro-pv-keep:focus-visible { outline: 3px solid var(--ink, #1E2942); outline-offset: 3px; }
.metro-pv-keep {
  flex: 0 1 auto; min-height: 46px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid rgba(30, 41, 66, 0.22); background: #fff;
  color: var(--ink, #1E2942); font: 600 0.86rem/1.2 var(--body-font); cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.metro-pv-keep:hover { border-color: var(--ink, #1E2942); background: #F6F9FB; }
/* phones and tablets in portrait: a compact bottom sheet that leaves the lab in view above it
   (centred and at most 560 px wide on a tablet) */
.metro-preview[data-layout="sheet"] {
  top: auto; left: calc(8px + env(safe-area-inset-left, 0px)); right: calc(8px + env(safe-area-inset-right, 0px));
  bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: 560px; margin-inline: auto; transform: none !important;
}
.metro-preview[data-layout="sheet"] .metro-pv-card { padding: 14px 14px 12px; border-radius: 20px; animation-name: metro-pv-up; }
.metro-preview[data-layout="sheet"] .metro-pv-icon { width: 46px; height: 46px; border-radius: 15px; }
.metro-preview[data-layout="sheet"] .metro-pv-title { font-size: 1.12rem; }
.metro-preview[data-layout="sheet"] .metro-pv-tag { margin-top: 9px; font-size: 0.78rem; }
.metro-preview[data-layout="sheet"] .metro-pv-text { font-size: 0.8rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.metro-preview[data-layout="sheet"] .metro-pv-status { margin-top: 7px; }
.metro-preview[data-layout="sheet"] .metro-pv-actions { flex-wrap: nowrap; margin-top: 11px; }
.metro-preview[data-layout="sheet"] .metro-pv-go { min-width: 0; padding-inline: 12px; font-size: 0.84rem; }
.metro-preview[data-layout="sheet"] .metro-pv-keep { padding-inline: 12px; font-size: 0.8rem; white-space: nowrap; }
/* short landscape stages: a side panel on the right, the lab framed on the left */
.metro-preview[data-layout="side"] {
  left: auto; right: calc(10px + env(safe-area-inset-right, 0px)); top: 10px; bottom: 10px; width: min(300px, 44%); transform: none !important;
  display: flex; flex-direction: column; justify-content: center;
}
/* (in the home section "See all our solutions" sits over the map's top right corner, above the map's
   own controls: the side panel starts under it, so its close button is never covered) */
.home .solutions-combined .metro-preview[data-layout="side"] { top: 62px; }
.metro-preview[data-layout="side"] .metro-pv-tag { display: none; }
.metro-preview[data-layout="side"] .metro-pv-card { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 12px; }
.metro-preview[data-layout="side"] .metro-pv-icon { width: 44px; height: 44px; border-radius: 14px; }
.metro-preview[data-layout="side"] .metro-pv-title { font-size: 1.08rem; }
.metro-preview[data-layout="side"] .metro-pv-tag { margin-top: 8px; }
.metro-preview[data-layout="side"] .metro-pv-text { font-size: 0.8rem; line-height: 1.42; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.metro-preview[data-layout="side"] .metro-pv-actions { margin-top: 10px; }
.metro-preview[data-layout="side"] .metro-pv-go, .metro-preview[data-layout="side"] .metro-pv-keep { flex: 1 1 100%; min-height: 44px; }
/* what the open preview moves aside: the tools under a phone's sheet (the zoom buttons and "Touch
   to explore" ride above it); the zoom buttons left of the side panel. (The mission board is under
   the stage, clear of both.) */
.metro-hub[data-pv-layout="sheet"] .metro-tools { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s linear 0.2s; }
.metro-hub[data-pv-layout="sheet"] .metro-zoom { top: auto; transform: none; bottom: calc(var(--pv-sheet-h, 220px) + 18px); }
.metro-hub[data-pv-layout="sheet"] .metro-explore { bottom: calc(var(--pv-sheet-h, 220px) + 18px); }
.metro-hub[data-pv-layout="side"] .metro-zoom { right: calc(min(300px, 44%) + 22px); }
.metro-hub[data-pv-layout="side"] .metro-explore { right: calc(min(300px, 44%) + 22px); }
.metro-hub[data-pv-layout] .metro-hint { opacity: 0; }
@media (max-width: 820px) {
  /* phones and tablets: the zoom buttons at the right edge under "See all our solutions" (over the
     skyline, clear of the stations; pinching is the main zoom there); "Touch to explore" at the
     bottom left, level with the tools */
  .metro-hub .metro-zoom { right: calc(8px + env(safe-area-inset-right, 0px)); bottom: auto; top: 64px; }
  .metro-hub .metro-explore { right: auto; left: calc(8px + env(safe-area-inset-left, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  /* (the map's tools now sit at its bottom edge: the mission board no longer covers it) */
  .metro-hub .metro-tools { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 400px) {
  .metro-hub .metro-explore { padding-right: 12px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .metro-pv-card { animation: none; }
  .metro-pv-go, .metro-hub .metro-zbtn, .metro-pv-keep { transition: none; }
  .metro-pv-go:hover, .metro-hub .metro-zbtn:hover { transform: none; }
}

/* ---------- Mission board under the map (2026-10-23). Owner: "placed below the 3D metro station model,
   not on the model" - it was covering the lower part of the city. Merged: V51 (published) made it a
   full-width band of the hub right under the stage, head / seven steps / live text side by side on
   wide screens and stacked on phones; this version keeps that and adds: its place is in the hub's
   markup with a fixed height (--metro-mission-box), so nothing moves when the 3D arrives; the stage
   gives that height back in the home section, so bridge band + model + board are still one screen;
   a "Follow the robot" button; the three line colours along its top edge. It never overlaps the
   map, the station preview or the map's controls (they are all inside the stage). */
.metro-hub { --metro-mission-box: 70px; --metro-mission-gap: 6px; }
.metro-hub .metro-mission {
  position: relative; z-index: auto; left: auto; right: auto; bottom: auto; width: auto; height: var(--metro-mission-box); box-sizing: border-box;
  margin: var(--metro-mission-gap) 0 0; padding: 12px calc(10px + env(safe-area-inset-right, 0px)) 13px calc(18px + env(safe-area-inset-left, 0px));
  border: 0; border-radius: 0; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; pointer-events: auto; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.15fr) auto; align-items: center; gap: 8px 24px;
  color: var(--ink); opacity: 0; transition: opacity 0.4s ease;
}
/* (laid out from the first paint; only its opacity waits for the intro) */
.metro-hub .metro-mission[data-show="true"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .metro-hub .metro-mission { transition: none; } }
.metro-hub .metro-mission::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--coral) 0 33.3%, var(--blue) 33.3% 66.6%, var(--yellow) 66.6% 100%);
}
.metro-hub .metro-mission-head { margin: 0; font-size: 13px; white-space: nowrap; }
.metro-hub .metro-mission-kicker { display: block; margin-bottom: 2px; font-size: 9.5px; }
.metro-hub .metro-mission-steps { gap: 4px; }
.metro-hub .metro-mission-dot { width: 20px; height: 20px; font-size: 10px; }
.metro-hub .metro-mission-name { font-size: 9.5px; }
.metro-hub .metro-mission-text { margin: 0; font-size: 11.5px; min-height: 0; }
@media (min-width: 821px) and (max-width: 1000px) {
  .metro-hub { --metro-mission-box: 94px; }
  .metro-hub .metro-mission { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 44px auto; row-gap: 6px; }
  .metro-hub .metro-mission-text { grid-column: 1 / -1; -webkit-line-clamp: 1; }
}
@media (max-width: 820px) {
  /* phones and tablets: its name and Follow, the seven steps, the news, stacked */
  .metro-hub { --metro-mission-box: 126px; }
  .metro-hub .metro-mission {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 44px auto auto; gap: 6px 10px;
    padding: 10px calc(8px + env(safe-area-inset-right, 0px)) 11px calc(14px + env(safe-area-inset-left, 0px));
  }
  .metro-hub .metro-mission-head { grid-column: 1; grid-row: 1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
  .metro-hub .metro-mission-kicker { display: none; }
  .metro-hub .metro-mission-follow { grid-column: 2; grid-row: 1; }
  .metro-hub .metro-mission-steps { grid-column: 1 / -1; grid-row: 2; gap: 2px; padding-right: 6px; }
  .metro-hub .metro-mission-name { display: block; font-size: 9px; }
  .metro-hub .metro-mission-text { grid-column: 1 / -1; grid-row: 3; padding-right: 6px; font-size: 11px; -webkit-line-clamp: 1; }
}
@media (max-width: 420px) {
  .metro-hub { --metro-mission-box: 112px; }
  .metro-hub .metro-mission-name { display: none; }
}
@media print { .metro-mission { display: none; } }
/* the home section: the stage gives the board its height (bridge band + model + board = one screen;
   this overrides site.css's --metro-stage-h there, which counted only the band) */
.home .home-solutions.solutions-combined .metro-hub { --metro-stage-h: max(340px, calc(100svh - var(--sol-band) - var(--metro-mission-box) - var(--metro-mission-gap))); }
/* (V51: elsewhere, where no --metro-stage-h is set, the fallback heights give the band ~68 px back on
   wide screens, so the whole hub still fits one chapter of the scroll; the minimum height stays) */
@media (min-width: 821px) {
  .metro-stage { height: var(--metro-stage-h, clamp(440px, calc(100svh - 358px), 620px)); }
}
@media (min-width: 901px) and (max-height: 800px) {
  .metro-stage { height: var(--metro-stage-h, clamp(400px, calc(100svh - 278px), 560px)); }
}