/* Product imagery extends the existing dark theme and scroll reveals. */
.platform-trio.image-trio {
  border-top: 0;
  padding-top: 0;
  gap: 24px;
}
.platform-preview { display: block; min-width: 0; }
.platform-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--dark);
  margin-bottom: 24px;
}
.platform-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.platform-image > span, .image-expand-icon {
  position: absolute; right: 16px; top: 16px;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid #ffffff59; border-radius: 50%;
  color: #fff; background: #0b101bbb; backdrop-filter: blur(12px);
  font-size: 19px; pointer-events: none;
  transition: background .3s, transform .4s var(--ease);
}
.platform-preview:hover .platform-image img { transform: scale(1.04); }
.image-trio .mini-label { color: var(--muted); }
.image-trio h3 { margin: 14px 0 7px; font-size: clamp(21px, 2vw, 28px); }
.image-trio p { font-size: 14px; text-align: left; }

/* Preserve the complete station interface in the existing four-scene story. */
.metro-scene-media > img { object-fit: contain; background: #0a1016; }

.metro-project { margin-bottom: 80px; scroll-margin-top: 32px; }
.metro-project-heading {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; margin-bottom: 32px;
}
.metro-project-heading .eyebrow { color: var(--muted); margin-bottom: 15px; }
.metro-project-heading h3 { font-size: clamp(38px, 4vw, 62px); letter-spacing: -.055em; }
.metro-project-heading h3 > span {
  display: block; margin-top: 14px;
  font-size: 18px; font-weight: 400; letter-spacing: -.035em; color: var(--muted);
}
.metro-project-heading .text-link { font-size: 14px; white-space: nowrap; gap: 24px; }
.image-expand {
  display: block; position: relative; overflow: hidden;
  border: 1px solid #353e48; border-radius: 10px;
  background: #0b1016; cursor: zoom-in;
}
.image-expand > img { width: 100%; height: auto; transition: transform 1s var(--ease); }
.image-expand:hover > img { transform: scale(1.018); }
.image-expand:hover .image-expand-icon { background: #1b3248; transform: translate(2px, -2px); }
.metro-panorama figcaption, .metro-gallery-item figcaption {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 17px 2px 0;
  font-size: 14px; line-height: 1.5;
}
.metro-panorama figcaption > span:last-child, .metro-gallery-item figcaption > span:last-child {
  color: var(--muted); font-size: 12px; letter-spacing: .055em;
}
.metro-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 30px; }
.metro-gallery-item { min-width: 0; }
.metro-gallery .image-expand { aspect-ratio: 16 / 9; }
.metro-gallery .image-expand > img { height: 100%; object-fit: contain; }
.metro-report .image-expand { background: #eef1f6; }
.approach-image { margin-top: 38px; }
.approach-image img { aspect-ratio: 16 / 10; object-fit: cover; }
.approach-steps { align-self: center; }

.history-visual .history-layout { grid-template-columns: 1.1fr .9fr; align-items: start; }
.history-visual h2 { margin-bottom: 42px; }
.credential { display: block; justify-self: end; width: 100%; max-width: 470px; }
.credential-paper {
  padding: clamp(22px, 3vw, 40px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.credential-paper img {
  width: 100%; max-width: 360px; margin-inline: auto;
  box-shadow: 0 16px 36px #0005;
  transition: transform .7s var(--ease);
}
.credential:hover img { transform: translateY(-4px) rotate(.4deg); }
.credential figcaption {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; margin-top: 20px; font-size: 16px;
}
.credential figcaption small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.credential figcaption > span:last-child { font-size: 23px; }

@media (max-width: 900px) {
  .platform-trio.image-trio { gap: 18px; }
  .platform-image { aspect-ratio: 4 / 3; margin-bottom: 19px; }
  .image-trio h3 { font-size: 21px; }
  .metro-project { margin-bottom: 60px; }
  .metro-project-heading h3 { font-size: 42px; }
  .metro-project-heading h3 > span { font-size: 16px; }
  .metro-gallery { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .metro-report { grid-column: 1 / -1; }
  .metro-gallery-item figcaption > span:last-child { display: none; }
  .history-visual .history-layout { gap: 45px; }
}
@media (max-width: 600px) {
  .platform-trio.image-trio { gap: 30px; }
  .platform-image { aspect-ratio: 16 / 9; margin-bottom: 16px; }
  .image-trio h3 { margin: 10px 0 5px; font-size: 24px; }
  .image-trio p { text-align: left; font-size: 14px; }
  .platform-image > span, .image-expand-icon { right: 12px; top: 12px; width: 33px; height: 33px; }
  .metro-project-heading { display: block; margin-bottom: 25px; }
  .metro-project-heading h3 { font-size: 39px; }
  .metro-project-heading .text-link { margin-top: 22px; }
  .metro-project-heading .eyebrow { font-size: 12px; }
  .metro-project-heading h3 > span { margin-top: 10px; }
  .metro-panorama figcaption, .metro-gallery-item figcaption { padding-top: 13px; font-size: 14px; }
  .metro-panorama figcaption > span:last-child { display: none; }
  .metro-gallery { grid-template-columns: 1fr; gap: 26px; margin-top: 26px; }
  .image-expand { border-radius: 7px; }
  .approach-image { margin-top: 27px; }
  .history-visual .history-layout { grid-template-columns: 1fr; gap: 38px; }
  .history-visual h2 { margin-bottom: 30px; }
  .credential { justify-self: center; max-width: 420px; }
  .credential-paper { padding: 24px; }
  .credential figcaption { font-size: 15px; }
}
@media print {
  .platform-image > span, .image-expand-icon { display: none; }
  .metro-gallery-item, .credential { break-inside: avoid; }
  .credential-paper { background: white; }
}