/* TRAIN case study — the portfolio shell keeps its existing visual identity. */
.train-showcase { border: 1px solid #d6d0c6; background: #ece7df; color: #1c1d19; border-radius: 18px; padding: 28px 35px 0; overflow: hidden; font-family: 'DM Sans', sans-serif; }
.train-showcase-top, .train-showcase-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 10px; letter-spacing: .1em; }
.train-showcase-top { padding-bottom: 24px; border-bottom: 1px solid #1c1d1926; }
.train-wordmark { font: italic 800 44px/.85 'Barlow Condensed', sans-serif; letter-spacing: -.04em; }
.train-wordmark small { display: block; font: 700 8px/1.5 'DM Sans', sans-serif; letter-spacing: .15em; margin-top: 7px; }
.train-showcase-grid { display: grid; grid-template-columns: 42% 58%; }
.train-showcase-copy { padding: 32px 0; }
.train-showcase-copy > p:first-child { font-size: 10px; letter-spacing: .07em; margin-bottom: 24px; }
.train-showcase-copy h2 { font: 700 clamp(84px, 11vw, 139px)/.82 'Barlow Condensed', sans-serif; letter-spacing: -.02em; margin: 0 0 25px; }
.train-showcase-copy h2 span { color: #f45b25; }
.train-showcase-baseline { font-size: 12px; max-width: 260px; }
.train-showcase-bottom { padding: 20px 0; border-top: 1px solid #1c1d1926; }
.train-scene { position: relative; min-height: 440px; min-width: 0; }
.train-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; opacity: 0; }
.train-scene canvas:active { cursor: grabbing; }
.train-scene.scene-ready canvas { opacity: 1; }
.train-scene [hidden] { display: none !important; }
.train-scene .scene-fallback { position: absolute; inset: 15% 0; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; color: #a64320; }
.train-scene .scene-fallback span { font-size: 12px; letter-spacing: .2em; margin-bottom: 8px; }
.train-scene .scene-fallback b { font: 700 clamp(42px, 6vw, 68px)/.95 'Barlow Condensed', sans-serif; }
.train-scene.scene-ready .scene-fallback { display: none; }
.train-scene .scene-caption { position: absolute; left: 5%; right: 5%; bottom: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 10px; visibility: hidden; }
.train-scene.scene-ready .scene-caption { visibility: visible; }
.train-scene .motion-button { border: 0; border-bottom: 1px solid #1c1d1950; background: transparent; color: #1c1d19; font-size: 11px; padding: 8px 0; }
.train-identity { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 30px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-alt); }
.train-identity h2 { margin: 12px 0; font-size: 1.6rem; letter-spacing: -.035em; line-height: 1.25; }
.train-identity p { color: var(--muted); margin: 0; }
.train-swatches { display: grid; grid-template-columns: repeat(3,1fr); border-radius: 12px; overflow: hidden; min-height: 150px; }
.train-swatch { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding: 18px 12px; font-size: .7rem; }
.train-swatch strong { font-weight: 500; letter-spacing: .03em; }
.train-swatch.orange { background: #f45b25; color: #1c1d19; }.train-swatch.beige { background: #ece7df; color: #1c1d19; }.train-swatch.black { background: #1c1d19; color: #ece7df; }
.train-type { border-top: 1px solid var(--border); padding-top: 24px; }
.train-type p { font: 700 clamp(33px, 4vw, 49px)/1.1 'Barlow Condensed', sans-serif; margin: 15px 0 0; color: var(--text); }
.train-type-body p { font: 400 23px/1.3 'DM Sans', sans-serif; }
.train-type-body small { display: block; color: var(--muted); margin-top: 12px; line-height: 1.5; }
.train-location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.train-location { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--bg-alt); transition: box-shadow .2s; }
.train-location:hover { box-shadow: var(--shadow-soft); }
.train-location img { width: 100%; aspect-ratio: 1.6; height: auto; object-fit: cover; }
.train-location > div { padding: 20px; }
.train-location span, .train-location small { font-size: .7rem; color: var(--muted); letter-spacing: .07em; }
.train-location h3 { margin: 8px 0 0; font-size: 1.25rem; }
.train-credits { font-size: .75rem; color: var(--muted); margin-top: 16px; }
@media(max-width:760px) {
  .train-showcase { padding: 23px 22px 0; }
  .train-showcase-grid { grid-template-columns: 1fr; }
  .train-showcase-copy { padding-bottom: 0; }
  .train-showcase-copy h2 { font-size: clamp(84px, 20vw, 135px); }
  .train-showcase-baseline { max-width: none; }
  .train-scene { min-height: 340px; }
  .train-identity { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .train-showcase-bottom { font-size: 8px; gap: 15px; flex-wrap: wrap; }
  .train-showcase-top > span:last-child { max-width: 110px; text-align: right; }
}
@media(max-width:620px) { .train-location-grid { grid-template-columns: 1fr; } }