/* stations.css — content surfaces on painted screens + shared st-* vocabulary */
.surface {
  position: absolute; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--px) * 2) calc(var(--px) * 3);
  pointer-events: auto;
  color: var(--ink);
}
/* CRT: the screen is ON */
.surface.crt {
  background: rgba(8, 16, 24, 0.55);
  box-shadow: inset 0 0 calc(var(--px) * 6) rgba(41, 194, 230, 0.10);
}
.surface.crt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px);
}

.st-slogan {
  font-family: var(--font-pixel); font-weight: 400;
  font-size: calc(var(--px) * 15); line-height: 1.25; margin: 0; max-width: 15ch;
  color: #f6f8fc;
  text-shadow: 0 calc(var(--px) * 1) 0 rgba(0,0,0,.92),
    0 0 calc(var(--px) * 6) rgba(56,214,194,.45),
    0 0 calc(var(--px) * 14) rgba(255,61,127,.28);
}
.st-kicker { font-family: var(--font-pixel); font-size: calc(var(--px) * 2.5);
  letter-spacing: calc(var(--px) * 0.8); text-transform: uppercase;
  color: var(--teal); margin: 0 0 calc(var(--px) * 2); }
.st-title { font-family: var(--font-pixel); font-weight: 400;
  font-size: calc(var(--px) * 6); line-height: 1.35; color: var(--amber);
  text-shadow: 0 0 calc(var(--px) * 3) rgba(231,169,79,.5);
  margin: 0 0 calc(var(--px) * 2); }
.st-lead { color: var(--ink); font-size: calc(var(--px) * 3.2); line-height: 1.55;
  margin: 0 0 calc(var(--px) * 2); }
.st-body { color: var(--body-ink); font-size: calc(var(--px) * 2.8); line-height: 1.6; margin: 0; }

.st-svc { list-style: none; margin: calc(var(--px) * 2) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--px) * 1.5) calc(var(--px) * 3); }
.surface a, #panel a { text-decoration: none; }
.st-svc a { text-decoration: none; }
.st-svc a:hover b { color: var(--teal); }
.st-svc b { display: block; color: var(--ink); font-size: calc(var(--px) * 2.8); }
.st-svc span { color: var(--ink-dim); font-size: calc(var(--px) * 2.2); line-height: 1.4; }

.st-cases { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--px) * 2);
  margin-top: calc(var(--px) * 2); }
.st-cases-h { grid-column: 1 / -1; font-family: var(--font-pixel);
  font-size: calc(var(--px) * 2.2); color: var(--ink-dim); text-transform: uppercase;
  letter-spacing: calc(var(--px) * 0.6); margin: 0; }
.st-case i { display: block; height: calc(var(--px) * 12); border: 1px solid #243042; }
.st-case b { display: block; font-size: calc(var(--px) * 2.3); margin-top: calc(var(--px) * 1); }
.st-case span { color: var(--ink-dim); font-size: calc(var(--px) * 2); }

.st-steps { list-style: none; margin: calc(var(--px) * 2) 0 0; padding: 0;
  display: flex; gap: calc(var(--px) * 3); flex-wrap: wrap; }
.st-steps .num { color: var(--teal); font-family: var(--font-pixel);
  font-size: calc(var(--px) * 2.4); margin-right: calc(var(--px) * 1); }
.st-steps b { font-size: calc(var(--px) * 2.4); }

/* industries: metro departures board */
.st-ind { list-style: none; margin: calc(var(--px) * 1.5) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--px) * 1) calc(var(--px) * 5); }
.st-ind li { border-bottom: 1px dotted rgba(231,169,79,.25); }
.st-ind a { display: flex; justify-content: space-between; gap: calc(var(--px) * 3);
  align-items: baseline; text-decoration: none; padding: calc(var(--px) * 0.8) 0; }
.st-ind a:hover b { color: var(--teal); }
.st-ind a:hover span { color: var(--ink); }
.st-ind b { color: var(--amber); font-size: calc(var(--px) * 2.7);
  text-shadow: 0 0 calc(var(--px) * 2) rgba(231,169,79,.4); }
.st-ind span { color: var(--ink-dim); font-size: calc(var(--px) * 2.2); text-align: right; }

.st-contacts .row { display: flex; justify-content: space-between; gap: calc(var(--px) * 3);
  border-bottom: 1px dashed #243042; padding: calc(var(--px) * 1.2) 0;
  font-size: calc(var(--px) * 2.6); }
.st-contacts .row span:first-child { color: var(--ink-dim); text-transform: uppercase;
  font-size: calc(var(--px) * 2); letter-spacing: calc(var(--px) * 0.5); }
.st-contacts a { color: var(--accent-2); }
.surface .cta-send { margin-top: calc(var(--px) * 3); align-self: flex-start;
  font-size: calc(var(--px) * 2.5); }

/* ============================================================
   READING PANEL — the "website layer" (fixed sizes, not the vpx grid)
   ============================================================ */
#panel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; align-items: center;
  transform: translateY(-101%);
  transition: transform .5s cubic-bezier(.22, .9, .3, 1);
  pointer-events: none;
}
#panel.open { transform: translateY(0); pointer-events: auto; }
.reduced-motion #panel { transition: none; }

#panel-body { padding: 6vh 3.2vw; width: 100%; max-height: 100%; overflow: hidden; }
#panel .st-kicker { font-size: 11px; letter-spacing: 3px; margin-bottom: 18px; }
#panel .st-title { font-size: clamp(28px, 3.4vw, 52px); line-height: 1.3; color: #f4f7fb;
  text-shadow: none; margin-bottom: 26px; }
#panel .st-lead { font-size: 17px; line-height: 1.6; color: var(--ink); max-width: 58ch; margin-bottom: 16px; }
#panel .st-body { font-size: 15px; line-height: 1.75; color: var(--body-ink); max-width: 60ch; }
/* list-only panel: a clean, generously spaced single column with dividers */
#panel .st-svc { display: block; gap: 0; margin-top: 30px; border-top: 1px solid rgba(231,169,79,.22); }
#panel .st-svc li { border-bottom: 1px solid rgba(231,169,79,.22); }
#panel .st-svc a, #panel .st-svc > li > b { display: block; padding: clamp(13px, 2vh, 20px) 2px; }
#panel .st-svc b { font-size: clamp(17px, 1.5vw, 23px); color: var(--ink); transition: color .15s, padding-left .15s; }
#panel .st-svc a:hover b { color: var(--teal); padding-left: 8px; }
#panel .st-cases { grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 22px; }
#panel .st-case i { height: 52px; }
#panel .st-case b { font-size: 12px; }
#panel .st-case span { font-size: 11px; }
#panel .st-steps { display: block; margin-top: 22px; }
#panel .st-steps li { margin-bottom: 10px; }
#panel .st-steps .num { font-size: 11px; }
#panel .st-steps b { font-size: 14px; }
#panel .st-ind { display: block; gap: 0; margin-top: 30px; border-top: 1px solid rgba(231,169,79,.22); }
#panel .st-ind li { border-bottom: 1px solid rgba(231,169,79,.22); }
#panel .st-ind a { padding: clamp(12px, 1.9vh, 18px) 2px; align-items: baseline; }
#panel .st-ind b { font-size: clamp(16px, 1.4vw, 22px); text-shadow: none; }
#panel .st-ind span { font-size: 13px; }
#panel .st-contacts .row { font-size: 15px; }
#panel .st-contacts .row span:first-child { font-size: 11px; }
#panel .sci-btn { margin-top: 30px; font-size: 13px; padding: 14px 28px; }

/* mobile stack reuses the vocabulary at fixed sizes */
.station-flow .st-slogan { font-size: clamp(30px, 9vw, 54px); max-width: none; }
.station-flow .st-title { font-size: clamp(22px, 7vw, 34px); }
.station-flow .st-lead { font-size: 16px; }
.station-flow .st-body, .station-flow .st-svc b { font-size: 14px; }
.station-flow .st-cases { grid-template-columns: 1fr 1fr; }
/* mobile industries: a clean 2-column name list like services — hooks dropped,
   readable fixed size (the right-aligned hooks were unreadable at pixel scale) */
.station-flow .st-ind { grid-template-columns: 1fr 1fr; gap: calc(var(--px) * 1.5) calc(var(--px) * 3); }
.station-flow .st-ind li { border-bottom: none; }
.station-flow .st-ind a { display: block; padding: 0; }
.station-flow .st-ind span { display: none; }
.station-flow .st-ind b { font-size: 14px; text-shadow: none; }