/* Large, connected screens inspired by the supplied horizontal-flow recording.
   Native scrolling stays local to this gallery; the case-study page never pins. */
.fns-final-journey {
  --fns-screen-width: clamp(248px, 20vw, 320px);
  --fns-screen-gap: clamp(48px, 5vw, 80px);
  --fns-flow-gutter: clamp(24px, 5vw, 88px);
}
.fns-final-journey .fns-flow-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 36px 0 12px;
}
.fns-case-study .fns-final-journey .fns-flow-tools p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--case-muted);
}
.fns-flow-tools p span { margin-left: 8px; }
.fns-flow-buttons { display: flex; gap: 10px; }
.fns-flow-buttons[hidden] { display: none; }
.fns-flow-buttons button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  color: var(--portfolio-ink);
  background: transparent;
  border: 1px solid #ccd6df;
  border-radius: 50%;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.fns-flow-buttons button:hover:not(:disabled) {
  color: var(--case-blue-ink);
  background: #f1f5f7;
  border-color: #90acc6;
}
.fns-flow-buttons button:disabled { opacity: .35; cursor: default; }
.fns-flow-buttons svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.fns-final-journey .case-flow-viewport {
  width: 100vw;
  max-width: none;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 28px var(--fns-flow-gutter) 32px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--fns-flow-gutter);
  scrollbar-width: thin;
  scrollbar-color: #aebdca #f1f5f7;
}
.fns-final-journey .case-flow-viewport::-webkit-scrollbar { height: 7px; }
.fns-final-journey .case-flow-viewport::-webkit-scrollbar-track { background: #f1f5f7; }
.fns-final-journey .case-flow-viewport::-webkit-scrollbar-thumb { background: #aebdca; border-radius: 8px; }
.fns-final-journey .case-flow-collage {
  display: flex;
  width: max-content;
  min-width: 0;
  align-items: flex-start;
  gap: var(--fns-screen-gap);
  padding: 0 0 16px;
}
.fns-final-journey .case-flow-collage > figure:nth-child(n) {
  position: relative;
  grid-column: auto;
  flex: 0 0 var(--fns-screen-width);
  width: var(--fns-screen-width);
  min-width: 0;
  margin: 0;
  padding: 0;
  transform: none;
  rotate: none;
  scroll-snap-align: start;
}
.fns-final-journey .case-flow-collage > figure::after { content: none; }
.fns-final-journey .case-flow-collage a {
  display: block;
  padding: 7px;
  overflow: hidden;
  border: 2px solid #b5b7b8;
  border-radius: 34px;
  background: #202326;
  box-shadow: 0 20px 34px -15px rgb(27 44 57 / 25%), 0 0 0 1px #e7e9eb;
}
.fns-final-journey .case-flow-collage img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 25px;
}
.fns-flow-connector {
  position: absolute;
  left: calc(100% + 6px);
  top: calc((var(--fns-screen-width) - 18px) * 1.1111 + 1px);
  width: calc(var(--fns-screen-gap) - 12px);
  height: 16px;
  color: #becbd5;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fns-flow-connector circle { fill: var(--selected-work-surface, #fdfdfc); }
.fns-case-study .fns-final-journey .case-flow-collage .fns-flow-note {
  display: block;
  margin: 30px 8px 0;
  padding: 16px 18px;
  background: #eef4f7;
  border-radius: 12px;
  color: #45586a;
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
  text-wrap: pretty;
}
/* The final cart is deliberately an address-free detail, never stretched into a phone. */
.fns-final-journey .case-flow-collage > figure.case-flow-cart {
  margin-top: calc(var(--fns-screen-width) * .58 - 12px);
}
.fns-final-journey .case-flow-cart a {
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 30px rgb(31 58 85 / 9%);
}
.fns-final-journey .case-flow-cart img { border-radius: 0; }

@media (max-width: 700px) {
  .fns-final-journey {
    --fns-screen-width: min(72vw, 280px);
    --fns-screen-gap: 44px;
    --fns-flow-gutter: 24px;
  }
  .fns-final-journey .fns-flow-tools { margin-top: 28px; gap: 12px; }
  .fns-flow-buttons { gap: 6px; }
  .fns-case-study .fns-final-journey .fns-flow-tools p { max-width: 170px; }
  .fns-final-journey .case-flow-viewport { padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .fns-flow-buttons button { transition: none; }
  .fns-final-journey .case-flow-viewport { scroll-behavior: auto; }
}