/* Each service owns one mobile frame, with a readable final fallback. */
.bridge-mobile-marker { display: none; }
@media (max-width:959px) {
  /* Keep the office and its dashboard in the original scene even without JS. */
  .bos-embedded .bos-after-static, .bos-embedded .bos-closeup { display: none; }
  .bos-embedded .bos-viewport { aspect-ratio: auto; height: auto; }
  .bos-embedded .bos-camera { position: relative; top: auto; width: 100%; aspect-ratio: auto; }
  .bos-embedded .bos-before { display: none; }
  .bos-embedded .bos-after { position: relative; height: auto; clip-path: none; }
  .bos-embedded .bos-before-figure .bos-monitor { display: block; position: relative; inset: auto; width: auto; height: auto; margin: 12px; border-radius: 12px; box-shadow: 0 12px 32px #17234828; }
  .bos-embedded.bos-images-unavailable .bos-before-figure { display: flex; }
  .bos-embedded.bos-images-unavailable .bos-plate { display: none; }
  .bos-embedded .bos-monitor .bos-app { height: 100%; font-size: 13px; }
  .bos-embedded .bos-monitor .bos-app-top { height: 44px; padding: 0 12px; }
  .bos-embedded .bos-monitor .bos-app-top strong { font-size: 17px; }
  .bos-embedded .bos-monitor .bos-app-top > span { font-size: 10px; }
  .bos-embedded .bos-monitor .bos-app-body { height: auto; min-height: 350px; }
  .bos-embedded .bos-monitor .bos-app-nav, .bos-embedded .bos-monitor .bos-connected { display: none; }
  .bos-embedded .bos-monitor .bos-app-main { padding: 12px; grid-template-rows: 54px 28px repeat(3, minmax(58px, 1fr)) 46px; }
  .bos-embedded .bos-monitor .bos-app-heading small { font-size: 10px; letter-spacing: 0; }
  .bos-embedded .bos-monitor .bos-app-heading h4 { font-size: 17px; line-height: 1.2; margin: 5px 0 0; }
  .bos-embedded .bos-monitor .bos-flow { font-size: 10px; }
  .bos-embedded .bos-monitor .bos-work-row { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; row-gap: 5px; align-content: center; padding: 6px 0; }
  .bos-embedded .bos-monitor .bos-work-symbol { grid-row: span 2; width: 22px; font-size: 15px; }
  .bos-embedded .bos-monitor .bos-work-row strong { font-size: 13px; }
  .bos-embedded .bos-monitor .bos-work-row small { font-size: 10px; margin-top: 2px; }
  .bos-embedded .bos-monitor .bos-state { grid-column: 2; justify-self: start; margin-left: 0; font-size: 10px; padding: 3px 5px; }
  .bos-embedded .bos-monitor .bos-team-spaces { font-size: 11px; gap: 8px; }
  .bos-embedded .bos-monitor .bos-team-spaces b { font-size: 10px; }

  .bos-embedded.is-mobile-motion .bos-journey { height: 320svh; }
  .iris-story.is-mobile-motion .iris-track { height: 240svh; }
  .bridge-story.is-mobile-motion .bridge-track { height: 220svh; }
  .bos-embedded.is-mobile-motion .bos-stage,
  .iris-story.is-mobile-motion .iris-stage,
  .bridge-story.is-mobile-motion .bridge-stage { position: sticky; display: flex; flex-direction: column; height: calc(100svh - var(--bos-header-height, var(--iris-header, var(--bridge-header)))); padding: 12px 0; box-sizing: border-box; }
  .bos-embedded.is-mobile-motion .bos-stage { top: var(--bos-header-height); }
  .iris-story.is-mobile-motion .iris-stage { top: var(--iris-header); }
  .bridge-story.is-mobile-motion .bridge-stage { top: var(--bridge-header); }
  .bos-embedded.is-mobile-motion .bos-intro,
  .services-page #iris .is-mobile-motion .iris-title,
  .services-page #bridget .is-mobile-motion .bridge-title { flex: 0 0 auto; margin: 0 0 12px; }
  .bos-embedded.is-mobile-motion .bos-intro h3,
  .services-page #iris .is-mobile-motion .iris-title,
  .services-page #bridget .is-mobile-motion .bridge-title { font-size: clamp(20px, 5.5vw, 28px); line-height: 1.15; }
  .bos-embedded.is-mobile-motion .bos-before-figure { display: flex; flex: 1; flex-direction: column; min-height: 0; margin: 0; }
  .bos-embedded.is-mobile-motion .bos-viewport,
  .iris-story.is-mobile-motion .iris-scene,
  .bridge-story.is-mobile-motion .bridge-scene { flex: 1; height: auto; min-height: 0; padding: 0; position: relative; overflow: hidden; border-radius: 16px; }
  .bos-embedded.is-mobile-motion .bos-before-figure figcaption,
  .iris-story.is-mobile-motion .iris-caption,
  .bridge-story.is-mobile-motion .bridge-caption { flex: 0 0 auto; padding: 8px 0 0; margin: 0; font-size: 10px; line-height: 1.3; gap: 2px; }
  .bos-embedded.is-mobile-motion .bos-before-figure figcaption > span { margin: 0; }

  .bos-embedded.is-mobile-motion .bos-camera { position: absolute; inset: 0; width: 100%; height: 100%; }
  .bos-embedded.is-mobile-motion .bos-plate { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }
  .bos-embedded.is-mobile-motion .bos-before-figure .bos-monitor { position: absolute; inset: 12px; width: auto; height: auto; margin: 0; z-index: 3; transform-origin: 75% 40%; }
  .bos-embedded.is-mobile-motion .bos-monitor .bos-app-body { height: calc(100% - 44px); min-height: 0; }
  .bos-embedded.is-mobile-motion .bos-monitor .bos-app-main { grid-template-rows: 54px 28px repeat(3, minmax(0, 1fr)) 46px; }
  .bos-embedded.is-mobile-motion .bos-paper-layer { display: block; position: absolute; inset: 0; }
  .bos-embedded.is-mobile-motion .bos-paper { width: 26%; }
  .bos-embedded.is-mobile-motion .bos-paper-ink strong { font-size: 13px; }
  .bos-embedded.is-mobile-motion .bos-paper-ink small { display: none; }
  .bos-embedded.is-mobile-motion .bos-before-label { display: none; }
  .bos-embedded.is-mobile-motion .bos-animation-label { display: block; }

  .iris-story.is-mobile-motion .iris-photo { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 16px; }
  .iris-story.is-mobile-motion .iris-photo img { object-position: 43% 42%; }
  .iris-story.is-mobile-motion .iris-photo::after { inset: 0; background: linear-gradient(transparent 35%, #17234860); }
  .iris-story.is-mobile-motion .iris-message,
  .iris-story.is-mobile-motion .iris-console,
  .iris-story.is-mobile-motion .iris-handoff { position: absolute; inset: auto 12px 12px; width: auto; margin: 0; padding: 16px; box-shadow: 0 12px 28px #17234825; }
  .iris-story.is-mobile-motion .iris-console { height: min(248px, calc(100% - 24px)); }
  .iris-story.is-mobile-motion .iris-console-header { height: 28px; padding-bottom: 12px; gap: 8px; }
  .iris-story.is-mobile-motion .iris-console-header strong { font-size: 15px; }
  .iris-story.is-mobile-motion .iris-assistant-icon { width: 24px; height: 24px; }
  .iris-story.is-mobile-motion .iris-waiting { display: none; }
  .iris-story.is-mobile-motion .iris-context,
  .iris-story.is-mobile-motion .iris-draft { position: absolute; top: 72px; left: 16px; right: 16px; margin: 0; }
  .iris-story.is-mobile-motion .iris-source { padding: 12px 0; }
  .iris-story.is-mobile-motion .iris-source > span { font-size: 13px; }
  .iris-story.is-mobile-motion .iris-check { font-size: 10px; }
  .services-page #iris .is-mobile-motion .iris-message p { font-size: 16px; line-height: 1.35; }
  .services-page #iris .is-mobile-motion .iris-draft p { font-size: 14px; line-height: 1.45; margin-top: 8px; }
  .iris-story.is-mobile-motion .iris-handoff strong { font-size: 17px; }
  .iris-story.is-mobile-motion .iris-handoff > span:last-child { font-size: 13px; }
  .iris-story.is-mobile-motion .iris-draft-line { display: inline; }
  .iris-story.is-mobile-motion .iris-routes { display: none; }

  .bridge-story.is-mobile-motion .bridge-photo { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; }
  .bridge-story.is-mobile-motion .bridge-photo img { object-position: 50% 30%; }
  .bridge-story.is-mobile-motion .bridge-rail { position: absolute; inset: 0; padding: 0; height: auto; }
  .bridge-story.is-mobile-motion .bridge-packet { position: absolute; inset: 12px 12px auto; width: auto; height: 64px; margin: 0; }
  .bridge-story.is-mobile-motion .bridge-stations { position: absolute; left: 12px; right: 12px; bottom: 80px; margin: 0; padding: 18px 18px 18px 42px; gap: 14px; background: #ffffffed; border-radius: 14px; }
  .bridge-story.is-mobile-motion .bridge-station { position: relative; inset: auto; width: auto; min-height: 44px; text-align: left; }
  .bridge-story.is-mobile-motion .bridge-station strong { font-size: 15px; line-height: 1.25; }
  .bridge-story.is-mobile-motion .bridge-station span { font-size: 13px; line-height: 1.4; }
  .bridge-story.is-mobile-motion .bridge-station::before { top: 16px; left: -24px; }
  .bridge-story.is-mobile-motion .bridge-stations::before,
  .bridge-story.is-mobile-motion .bridge-stations::after { left: 22px; top: 38px; bottom: 38px; width: 1px; }
  .bridge-story.is-mobile-motion .bridge-mobile-marker { display: block; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: #247b74; border: 2px solid #fff; box-shadow: 0 0 0 3px #247b7425; z-index: 2; }
  .bridge-story.is-mobile-motion .bridge-review { position: absolute; inset: auto 12px 12px; width: auto; min-height: 56px; padding: 10px 14px; background: #ffffffed; border-radius: 12px; }
  .bridge-story.is-mobile-motion .bridge-review small { font-size: 10px; }
  .bridge-story.is-mobile-motion .bridge-review strong { font-size: 13px; }
}
@media (max-width:959px) and (orientation:landscape) {
  .iris-story.is-mobile-motion .iris-message,
  .iris-story.is-mobile-motion .iris-console,
  .iris-story.is-mobile-motion .iris-handoff { left: auto; width: 56%; }
  .iris-story.is-mobile-motion .iris-photo img { object-position: 35% 35%; }
  .bridge-story.is-mobile-motion .bridge-packet { right: auto; width: 220px; }
  .bridge-story.is-mobile-motion .bridge-stations { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 28px 16px 12px; gap: 16px; bottom: 80px; }
  .bridge-story.is-mobile-motion .bridge-station { text-align: center; }
  .bridge-story.is-mobile-motion .bridge-station::before { top: -12px; left: calc(50% - 4px); }
  .bridge-story.is-mobile-motion .bridge-stations::before,
  .bridge-story.is-mobile-motion .bridge-stations::after { top: 20px; bottom: auto; left: calc(16.6667% + 4px); right: calc(16.6667% + 4px); width: auto; height: 1px; }
  .bridge-story.is-mobile-motion .bridge-stations::after { transform-origin: left; transform: scaleX(var(--bridge-progress, 0)); }
  .bos-embedded.is-mobile-motion .bos-monitor .bos-app-main { grid-template-rows: 42px 22px repeat(3, minmax(0, 1fr)) 36px; padding: 8px 12px; }
  .bos-embedded.is-mobile-motion .bos-monitor .bos-work-row { display: flex; gap: 12px; padding: 2px 0; }
  .bos-embedded.is-mobile-motion .bos-monitor .bos-work-symbol { flex: 0 0 22px; }
  .bos-embedded.is-mobile-motion .bos-monitor .bos-state { margin-left: auto; }
  .bos-embedded.is-mobile-motion .bos-monitor .bos-work-row small { display: none; }
}
@media (max-width:959px) {
  .bos-embedded.is-mobile-compact .bos-monitor .bos-app-top { height: 36px; }
  .bos-embedded.is-mobile-compact .bos-monitor .bos-app-body { height: calc(100% - 36px); }
  .bos-embedded.is-mobile-compact .bos-monitor .bos-app-main { padding: 8px 12px; grid-template-rows: 28px 22px repeat(3, minmax(0, 1fr)) 36px; }
  .bos-embedded.is-mobile-compact .bos-monitor .bos-app-heading small,
  .bos-embedded.is-mobile-compact .bos-monitor .bos-work-row small { display: none; }
  .bos-embedded.is-mobile-compact .bos-monitor .bos-app-heading h4 { margin: 0; }
  .bos-embedded.is-mobile-compact .bos-monitor .bos-work-row { padding: 2px 0; }
}
@media (max-width:959px) {
  .bos-embedded.is-mobile-compact .bos-monitor .bos-work-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .bos-embedded.is-mobile-compact .bos-monitor .bos-work-symbol { display: none; }
  .bos-embedded.is-mobile-compact .bos-monitor .bos-state { margin: 0; }
}
@media (max-width:959px) and (orientation:portrait) {
  .bridge-story.is-mobile-compact .bridge-stations { bottom: 72px; padding: 12px 12px 12px 42px; gap: 8px; }
  .bridge-story.is-mobile-compact .bridge-station { min-height: 40px; }
  .bridge-story.is-mobile-compact .bridge-station span { margin-top: 3px; }
  .bridge-story.is-mobile-compact .bridge-stations::before,
  .bridge-story.is-mobile-compact .bridge-stations::after { top: 32px; bottom: 32px; }
  .bridge-story.is-mobile-compact .bridge-review { min-height: 48px; bottom: 8px; padding: 8px 12px; }
}

@media (max-width:959px) {
  .bos-embedded .bos-monitor .bos-team-spaces > span { padding-top: 3px; line-height: 1.2; }
  .bos-embedded .bos-monitor .bos-team-spaces b { margin-top: 2px; line-height: 1.2; }
  .bos-embedded .bos-before-label { display: none; }
  .bos-embedded .bos-before-figure figcaption > .bos-animation-label { display: block; }
}

/* Matching portrait compositions, sized by width and the usable small viewport.
   Two title lines and two caption lines reserve the same space in both scenes. */
@media (max-width:959px) and (orientation:portrait) {
  .bos-embedded.is-mobile-motion .bos-stage,
  .bridge-story.is-mobile-motion .bridge-stage {
    --mobile-title-size: clamp(20px, 5.5vw, 28px);
    width: min(100%, 480px, calc((100svh - var(--bos-header-height, var(--bridge-header)) - 70px - var(--mobile-title-size) * 2.3) * .8));
    height: auto;
    margin-inline: auto;
  }
  .bos-embedded.is-mobile-motion .bos-intro,
  .services-page #bridget .is-mobile-motion .bridge-title {
    min-height: calc(var(--mobile-title-size) * 2.3);
    margin-bottom: 12px;
  }
  .bos-embedded.is-mobile-motion .bos-before-figure { flex: none; }
  .bos-embedded.is-mobile-motion .bos-viewport,
  .bridge-story.is-mobile-motion .bridge-scene {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
  }
  .bos-embedded.is-mobile-motion .bos-before-figure figcaption,
  .bridge-story.is-mobile-motion .bridge-caption { min-height: 34px; box-sizing: border-box; }
  .bos-embedded.is-mobile-motion .bos-plate { object-position: 92% 50%; }
}

/* Landscape phones retain a complete scroll sequence below the navigation. */
@media (max-width:959px) and (orientation:landscape) and (max-height:500px) {
  .bos-embedded.is-mobile-motion .bos-stage { padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px)); }
  .bos-embedded.is-mobile-motion .bos-intro { margin-bottom: 4px; }
  .bos-embedded.is-mobile-motion .bos-intro h3 { font-size: 18px; line-height: 1.15; }
  .bos-embedded.is-mobile-motion .bos-before-figure figcaption { display: flex; justify-content: space-between; gap: 8px; padding-top: 4px; line-height: 1.2; }
  .bos-embedded.is-mobile-motion .bos-before-figure .bos-monitor { inset: 6px; }
  .bos-embedded.is-mobile-motion .bos-monitor .bos-app-top { height: 28px; }
  .bos-embedded.is-mobile-motion .bos-monitor .bos-app-top strong { font-size: 15px; }
  .bos-embedded.is-mobile-motion .bos-monitor .bos-app-body { height: calc(100% - 28px); min-height: 0; }
  .bos-embedded.is-mobile-motion .bos-monitor .bos-app-main { padding: 4px 12px; grid-template-rows: 22px 18px repeat(3, minmax(22px, 1fr)) 24px; }
  .bos-embedded.is-mobile-motion .bos-monitor .bos-app-heading h4 { margin: 0; font-size: 14px; }
  .bos-embedded.is-mobile-motion .bos-monitor .bos-app-heading small,
  .bos-embedded.is-mobile-motion .bos-monitor .bos-work-row small { display: none; }
  .bos-embedded.is-mobile-motion .bos-monitor .bos-work-row { padding: 0; }
  .bos-embedded.is-mobile-motion .bos-monitor .bos-team-spaces > span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0; }
  .bos-embedded.is-mobile-motion .bos-monitor .bos-team-spaces b { display: inline; margin: 0; }

  .iris-story.is-mobile-motion .iris-stage,
  .bridge-story.is-mobile-motion .bridge-stage { padding: 4px 0; }
  .services-page #iris .is-mobile-motion .iris-title,
  .services-page #bridget .is-mobile-motion .bridge-title { font-size: 18px; line-height: 1.15; margin-bottom: 4px; }
  .iris-story.is-mobile-motion .iris-caption,
  .bridge-story.is-mobile-motion .bridge-caption { flex-direction: row; justify-content: space-between; padding-top: 4px; line-height: 1.2; gap: 8px; }
  .iris-story.is-mobile-motion .iris-message,
  .iris-story.is-mobile-motion .iris-console,
  .iris-story.is-mobile-motion .iris-handoff { right: 8px; bottom: 8px; width: 70%; padding: 8px; }
  .iris-story.is-mobile-motion .iris-console { height: min(190px, calc(100% - 16px)); }
  .iris-story.is-mobile-motion .iris-console-header { height: 20px; padding-bottom: 4px; }
  .iris-story.is-mobile-motion .iris-console-header strong { font-size: 13px; }
  .iris-story.is-mobile-motion .iris-assistant-icon { width: 20px; height: 20px; }
  .iris-story.is-mobile-motion .iris-context,
  .iris-story.is-mobile-motion .iris-draft { top: 40px; left: 8px; right: 8px; }
  .iris-story.is-mobile-motion .iris-label { line-height: 1.2; }
  .iris-story.is-mobile-motion .iris-source { padding: 4px 0; line-height: 18px; }
  .services-page #iris .is-mobile-motion .iris-draft p { margin-top: 4px; font-size: 13px; line-height: 1.3; }
  .iris-story.is-mobile-motion .iris-handoff strong { font-size: 15px; margin: 6px 0 8px; }
  .iris-story.is-mobile-motion .iris-handoff > span:last-child { line-height: 1.3; }

  .bridge-story.is-mobile-motion .bridge-packet { top: 8px; left: 8px; right: 8px; width: auto; height: 56px; }
  .bridge-story.is-mobile-motion .bridge-stations { top: 8px; bottom: auto; left: 8px; right: 8px; padding: 20px 12px 7px; gap: 12px; }
  .bridge-story.is-mobile-motion .bridge-station { min-height: 0; }
  .bridge-story.is-mobile-motion .bridge-station strong { font-size: 13px; line-height: 1.2; }
  .bridge-story.is-mobile-motion .bridge-station span { font-size: 13px; line-height: 1.3; margin-top: 2px; }
  .bridge-story.is-mobile-motion .bridge-stations::before,
  .bridge-story.is-mobile-motion .bridge-stations::after { top: 12px; }
  .bridge-story.is-mobile-motion .bridge-review { left: 8px; right: 8px; bottom: 8px; min-height: 0; padding: 4px 8px; }
  .bridge-story.is-mobile-motion .bridge-review small { line-height: 1.2; }
  .bridge-story.is-mobile-motion .bridge-review strong { line-height: 1.3; margin-top: 2px; }
}