/* Responsive composition of the original 1254-square Tourbillon.
   No asset, hit-path, selector-origin, stage content or motion engine changes. */
.service-system.journey-v4 { min-height: 0; }
.service-system.journey-v4 > .journey-v4__stage { min-height: 0; }
.service-system .journey-v4__brand { top: 78px; left: 4%; gap: 8px; }
.service-system .journey-v4__brand b { font-size: 10px; }
.service-system .journey-v4__brand small { font-size: 8px; }
.service-system .journey-v4__copy { left: 4%; width: min(30%, 480px); }
.service-system .journey-v4__copy > p { margin: 0 0 16px; font-size: 12px; line-height: 1.5; letter-spacing: .12em; }
.service-system .journey-v4__copy h2 { font-size: clamp(54px, 4.5vw, 80px); line-height: .95; }
.service-system .journey-v4__copy h3 { font-size: clamp(36px, 3vw, 54px); line-height: 1; letter-spacing: -.05em; }
.service-system .journey-v4__copy > div { padding: 4px 0 4px 16px; margin-top: 20px; font-size: clamp(17px, 1.25vw, 21px); line-height: 1.55; }
.service-system .journey-v4__copy > small { font-size: 11px; line-height: 1.6; margin-top: 18px; }
.service-system .journey-v4__copy dl { margin: 20px 0 0; gap: 24px; flex-wrap: wrap; }
.service-system .journey-v4__copy dt { font-size: 11px; line-height: 1.4; }
.service-system .journey-v4__copy dd { font-size: 15px; line-height: 1.4; }
.service-system .journey-v4__copy--active {
  top: 50%; max-height: calc(100svh - 230px);
  padding: 0 16px 8px 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #a2bada transparent;
  overscroll-behavior-y: contain; pointer-events: auto;
}
.service-system .journey-v4__copy--active::-webkit-scrollbar { display: block; width: 4px; }
.service-system .journey-v4__copy--active::-webkit-scrollbar-thumb { background: #a2bada; border-radius: 4px; }
.service-system .journey-v4__faq { max-width: none; margin-top: 24px; padding-top: 16px; }
.service-system .journey-v4__faq > span { margin-bottom: 8px; font-size: 11px; line-height: 1.5; }
.service-system .journey-v4__faq summary { min-height: 44px; padding: 14px 26px 14px 0; font-size: 18px; line-height: 1.4; }
.service-system .journey-v4__faq summary::after { top: 15px; right: 2px; }
.service-system .journey-v4__faq p { font-size: 17px; line-height: 1.6; margin: 0 0 18px; }
.service-system .journey-v4__related-link { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin-top: 20px; padding-bottom: 8px; border-bottom: 1px solid rgba(20, 87, 200, .35); color: #184b8d; font: 780 11px/1.4 var(--font-geist-mono, monospace); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.service-system .journey-v4__related-link span { transition: transform 180ms ease; }
.service-system .journey-v4__related-link:hover,
.service-system .journey-v4__related-link:focus-visible { border-color: #b96f00; color: #b96f00; outline: 2px solid rgba(20, 87, 200, .28); outline-offset: 4px; }
.service-system .journey-v4__related-link:hover span,
.service-system .journey-v4__related-link:focus-visible span { transform: translateX(3px); }
.service-system .journey-v4__clock,
.service-system:not([data-active-stage="idle"]) .journey-v4__clock { top: 51%; left: 62%; width: min(53vw, 820px, calc(100svh - 190px)); }
/* Keep pointer targets still on hover; recompose only after the click locks. */
.service-system[data-stage-lock] .journey-v4__clock { top: 51%; left: 57%; width: min(36vw, 680px, calc(100svh - 220px)); }
.service-system .journey-v4__context { top: 16%; right: 1%; width: min(26vw, 470px); height: 70%; }
.service-system .journey-v4__context figcaption { top: 4%; right: 20px; max-width: 90%; }
.service-system .journey-v4__context figcaption b { font-size: 10px; line-height: 1.5; }
.service-system .journey-v4__context figcaption strong { font-size: 14px; line-height: 1.4; margin-top: 8px; padding: 6px 0; }
.service-system .journey-v4__telemetry { right: 20px; bottom: 8%; font-size: 10px; line-height: 1.6; }
.service-system .journey-v4__rail { left: 4%; right: 4%; bottom: 36px; }
.service-system .journey-v4__rail span { padding-top: 12px; font-size: 10px; }

/* Keep a composed reading field on ultrawide displays. */
@media (min-width: 1800px) and (min-aspect-ratio: 4/3) and (min-height: 700px) {
  .service-system .journey-v4__brand,
  .service-system .journey-v4__copy { left: max(4%, calc((100% - 1720px) / 2)); }
  .service-system .journey-v4__clock,
  .service-system:not([data-active-stage="idle"]) .journey-v4__clock { left: calc(50% + 200px); }
  .service-system[data-stage-lock] .journey-v4__clock { left: calc(50% + 100px); }
  .service-system .journey-v4__context { right: max(1%, calc((100% - 1720px) / 2)); }
  .service-system .journey-v4__rail { left: max(4%, calc((100% - 1720px) / 2)); right: max(4%, calc((100% - 1720px) / 2)); }
}

/* Compact screens use document flow, so the clock and FAQ never cover each
   other. The single original clock stays in place when a stage is selected. */
@media (max-width: 1199px), (max-aspect-ratio: 4/3), (max-height: 699px) {
  .service-system.journey-v4,
  .service-system.journey-v4.journey-v4--entry { height: auto; min-height: 0; }
  .service-system.journey-v4 > .journey-v4__stage {
    position: relative; top: auto; display: grid; grid-template-columns: minmax(0, 1fr);
    gap: 28px; height: auto; min-height: 0; padding: 104px clamp(20px, 5vw, 64px) 48px;
  }
  .service-system .journey-v4__brand { display: none; }
  .service-system .journey-v4__copy--idle {
    grid-row: 1; position: relative; top: auto; left: auto; width: min(100%, 900px);
    margin: 0 auto; transform: none !important; translate: none !important;
    opacity: 1 !important; visibility: visible !important;
  }
  .service-system .journey-v4__copy h2 { font-size: clamp(44px, 6.2vw, 68px); }
  .service-system .journey-v4__copy > div { max-width: 680px; font-size: 18px; }
  .service-system .journey-v4__copy > small { font-size: 11px; }
  .service-system .journey-v4__clock,
  .service-system:not([data-active-stage="idle"]) .journey-v4__clock {
    grid-row: 2; position: relative; top: auto; left: auto;
    width: min(100%, 600px); height: auto; margin: 0 auto;
    transform: none; transition: filter .42s ease-out;
  }
  .service-system .journey-v4__rail { grid-row: 3; position: relative; inset: auto; width: min(100%, 900px); margin: 0 auto; }
  .service-system .journey-v4__copy--active {
    grid-row: 4; position: relative; inset: auto; width: min(100%, 760px);
    margin: 8px auto 0; padding: 0; max-height: none; overflow: visible;
    transform: none !important; translate: none !important; scroll-margin-top: 80px;
  }
  .service-system .journey-v4__copy--active[aria-hidden="true"],
  .service-system .journey-v4__context[aria-hidden="true"] { display: none; }
  .service-system .journey-v4__copy h3 { font-size: clamp(32px, 4.8vw, 50px); }
  .service-system .journey-v4__context {
    grid-row: 5; position: relative; inset: auto; width: min(100%, 760px);
    height: clamp(280px, 48vw, 460px); margin: 0 auto;
  }
  .service-system .journey-v4__context-media,
  .service-system .journey-v4__context-media:is(.journey-v4__context-media--01,.journey-v4__context-media--02,.journey-v4__context-media--06,.journey-v4__context-media--07,.journey-v4__context-media--08,.journey-v4__context-media--09,.journey-v4__context-media--10,.journey-v4__context-media--11) { inset: 0; }
  .service-system .journey-v4__context-media img { object-fit: contain; }
  .service-system .journey-v4__context figcaption { top: 8px; right: 0; }
  .service-system .journey-v4__telemetry { right: 0; bottom: 12px; }
  .service-system .journey-v4__signal-bridge { display: none; }
}
@media (max-width: 599px) {
  .service-system.journey-v4 > .journey-v4__stage { gap: 24px; padding: 92px 20px 40px; }
  .service-system .journey-v4__copy h2 { font-size: clamp(40px, 11.5vw, 62px); }
  .service-system .journey-v4__copy > p { font-size: 11px; margin-bottom: 12px; }
  .service-system .journey-v4__copy > div { font-size: 17px; margin-top: 16px; }
  .service-system .journey-v4__copy > small { font-size: 10px; margin-top: 14px; }
  .service-system .journey-v4__copy h3 { font-size: clamp(30px, 8.6vw, 42px); }
  .service-system .journey-v4__faq summary { font-size: 18px; }
  .service-system .journey-v4__faq p { font-size: 17px; }
  .service-system .journey-v4__rail { column-gap: 4px; }
  .service-system .journey-v4__rail span { font-size: 9px; }
}
/* Short landscape: full wheel beside the opening copy, with details below. */
@media (min-width: 700px) and (max-height: 699px) and (min-aspect-ratio: 4/3) {
  .service-system.journey-v4 > .journey-v4__stage { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px 32px; padding: 88px 32px 40px; }
  .service-system .journey-v4__copy--idle { grid-column: 1; grid-row: 1; align-self: center; }
  .service-system .journey-v4__copy h2 { font-size: clamp(38px, 4.8vw, 58px); }
  .service-system .journey-v4__clock,
  .service-system:not([data-active-stage="idle"]) .journey-v4__clock { grid-column: 2; grid-row: 1; width: min(100%, max(240px, calc(100svh - 126px))); max-width: 520px; align-self: center; }
  .service-system .journey-v4__rail { grid-column: 1/-1; grid-row: 2; }
  .service-system .journey-v4__copy--active { grid-column: 1; grid-row: 3; }
  .service-system .journey-v4__context { grid-column: 2; grid-row: 3; position: sticky; top: 80px; height: 340px; }
}