/* Scoped Instagram stage. Keep the film full portrait and the interface quiet. */
.bus-hero[data-instagram-hero-media="reel"] .bus-hero-stage {
  --bus-hero-stage-height: min(60svh, 720px, calc(100vw * 16 / 9));
  --bus-hero-film-width: min(100vw, calc(var(--bus-hero-stage-height) * .5625));
  --bus-hero-ease: cubic-bezier(.23, 1, .32, 1);
  height: var(--bus-hero-stage-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--bus-hero-film-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  touch-action: pan-y;
  background: #171715;
}
.bus-hero[data-instagram-hero-media="reel"] .bus-hero-stage::before,
.bus-hero[data-instagram-hero-media="reel"] .bus-hero-stage::after {
  background: none;
  opacity: 0;
}
.bus-hero[data-instagram-hero-media="reel"] .bus-hero-film {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  justify-self: center;
  z-index: 1;
}
.bus-hero .bus-hero-screen { position: relative; }
.bus-hero .bus-hero-preview {
  position: relative;
  grid-row: 1;
  width: min(350px, calc(var(--bus-hero-stage-height) * .478125));
  height: auto;
  aspect-ratio: 9 / 16;
  max-height: 85%;
  max-width: calc(100% - 32px);
  min-width: 44px;
  padding: 0;
  border: 1px solid #d4cbbd40;
  border-radius: 0;
  overflow: hidden;
  background: #242321;
  color: #fffaf0;
  cursor: pointer;
  opacity: .58;
  transition: opacity 180ms var(--bus-hero-ease), border-color 180ms var(--bus-hero-ease);
}
.bus-hero .bus-hero-preview--previous { grid-column: 1; justify-self: end; margin-right: 24px; }
.bus-hero .bus-hero-preview--next { grid-column: 3; justify-self: start; margin-left: 24px; }
.bus-hero .bus-hero-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bus-hero .bus-hero-preview-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  font: 600 12px/1.5 Arial, Helvetica, sans-serif;
  text-align: center;
}
.bus-hero .bus-hero-reel-controls {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--bus-hero-film-width) minmax(0, 1fr);
  align-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.bus-hero .bus-hero-reel-step {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid #ff6500;
  border-radius: 50%;
  background: #ff6500;
  color: #242321;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 140ms var(--bus-hero-ease), background-color 140ms var(--bus-hero-ease), color 140ms var(--bus-hero-ease), border-color 140ms var(--bus-hero-ease);
}
.bus-hero .bus-hero-reel-step svg { display: block; width: 24px; height: 24px; }
.bus-hero .bus-hero-reel-step:first-child { grid-column: 1; grid-row: 1; justify-self: end; margin-right: 12px; }
.bus-hero .bus-hero-reel-step:last-of-type { grid-column: 3; grid-row: 1; justify-self: start; margin-left: 12px; }
.bus-hero .bus-hero-reel-counter {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  margin: 20px;
  padding: 7px 10px;
  border: 1px solid #d4cbbd40;
  border-radius: 4px;
  background: #242321;
  color: #fffaf0;
  font: 500 11px/1.4 Arial, Helvetica, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.bus-hero .bus-hero-play {
  --bus-hero-play-size: 80px;
  --bus-hero-sound-size: 56px;
  position: absolute;
  inset: 0;
  width: var(--bus-hero-play-size);
  height: var(--bus-hero-play-size);
  margin: auto;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #ff6500;
  color: #242321;
  cursor: pointer;
  box-shadow: 0 8px 24px #0005;
  opacity: 1;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1), background-color 140ms cubic-bezier(.23, 1, .32, 1), opacity 180ms cubic-bezier(.23, 1, .32, 1);
  z-index: 2;
}
.bus-hero .bus-hero-play svg { width: 54px; height: 54px; display: block; }
.bus-hero .bus-hero-play-label { display: none; font: 600 11px/1.2 Arial, Helvetica, sans-serif; }
.bus-hero .bus-hero-play:is([data-playback-state="muted"], [data-playback-state="audible"]) {
  background: transparent;
  color: #242321;
  box-shadow: none;
  transform: none;
}
.bus-hero .bus-hero-play:is([data-playback-state="muted"], [data-playback-state="audible"])::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--bus-hero-sound-size);
  height: var(--bus-hero-sound-size);
  border-radius: 50%;
  background: #ff6500;
  transform: translate(-50%, -50%);
}
.bus-hero .bus-hero-play:is([data-playback-state="muted"], [data-playback-state="audible"]) svg {
  position: relative;
  width: calc(var(--bus-hero-sound-size) * .55);
  height: calc(var(--bus-hero-sound-size) * .55);
}
.bus-hero .bus-hero-play:is([data-playback-state="muted"], [data-playback-state="audible"])[data-controls-hidden="true"]:not(:focus-visible) { opacity: 0; }
.bus-hero .bus-hero-reel-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bus-hero .bus-hero-preview:focus-visible,
.bus-hero .bus-hero-reel-step:focus-visible,
.bus-hero .bus-hero-play:focus-visible,
.bus-hero[data-instagram-hero-media="reel"] .bus-hero-stage:focus-visible {
  outline: 3px solid #fffaf0;
  outline-offset: -5px;
  opacity: 1;
}
.bus-hero .bus-hero-preview:focus-visible { outline-color: #ff6500; }
.bus-hero .bus-hero-reel-step:focus-visible,
.bus-hero .bus-hero-play:focus-visible { outline-color: #242321; }
.bus-hero .bus-hero-play:is([data-playback-state="muted"], [data-playback-state="audible"]):focus-visible { outline-color: #ff6500; }
.bus-hero .bus-hero-play:active,
.bus-hero .bus-hero-reel-step:active { transform: scale(.94); }
.bus-hero .bus-hero-preview[hidden],
.bus-hero .bus-hero-reel-controls[hidden],
.bus-hero .bus-hero-reel-step[hidden],
.bus-hero .bus-hero-play[hidden] { display: none; }
.bus-hero ::selection { color: #242321; background: #ff6500; }
@media (hover: hover) and (pointer: fine) {
  .bus-hero .bus-hero-preview:hover { opacity: .84; border-color: #d4cbbd99; }
  .bus-hero .bus-hero-reel-step:hover { color: #242321; background: #fffaf0; border-color: #fffaf0; }
  .bus-hero .bus-hero-play:hover { background: #fffaf0; transform: scale(1.04); }
  .bus-hero .bus-hero-play:is([data-playback-state="muted"], [data-playback-state="audible"]):hover { background: transparent; color: #242321; transform: none; }
  .bus-hero .bus-hero-play:active { transform: scale(.94); }
}
@media (max-width: 900px) and (min-height: 600px) {
  .bus-hero[data-instagram-hero-media="reel"] .bus-hero-stage {
    --bus-hero-stage-height: min(60svh, calc(100vw * 16 / 9));
    --bus-hero-film-width: min(100vw, calc(var(--bus-hero-stage-height) * .5625));
  }
  .bus-hero .bus-hero-preview { width: calc(var(--bus-hero-stage-height) * .478125); max-width: none; height: 85%; }
  .bus-hero .bus-hero-preview--previous { margin-right: 8px; }
  .bus-hero .bus-hero-preview--next { margin-left: 8px; }
}
@media (max-width: 600px) {
  .bus-hero[data-instagram-hero-media="reel"] .bus-hero-stage {
    --bus-hero-stage-height: min(60svh, calc(100vw * 16 / 9));
    --bus-hero-film-width: min(100vw, calc(var(--bus-hero-stage-height) * .5625));
  }
  .bus-hero .bus-hero-preview { width: calc(var(--bus-hero-stage-height) * .478125); max-width: none; height: 85%; }
  .bus-hero .bus-hero-preview--previous { margin-right: 8px; }
  .bus-hero .bus-hero-preview--next { margin-left: 8px; }
  .bus-hero .bus-hero-reel-step { width: 44px; height: 44px; }
  .bus-hero .bus-hero-reel-step:first-child { justify-self: start; margin: 0 0 0 4px; }
  .bus-hero .bus-hero-reel-step:last-of-type { justify-self: end; margin: 0 4px 0 0; }
  .bus-hero .bus-hero-reel-counter { margin: 12px; padding: 5px 8px; font-size: 10px; }
  .bus-hero .bus-hero-play { --bus-hero-play-size: 64px; --bus-hero-sound-size: 44px; }
  .bus-hero .bus-hero-play svg { width: 44px; height: 44px; }
}

/* Filmstrip navigation uses the current centre7 player and sound controls. */
.bus-hero .reel-browser { min-width: 0; padding: 18px max(24px, calc((100vw - 1280px) / 2)) 14px; color: #fffaf0; background: #242321; }
.bus-hero .reel-browser[hidden], .bus-hero .reel-browser [hidden] { display: none !important; }
.bus-hero .reel-browser-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.bus-hero .reel-browser-label { margin: 0; font: 600 12px/1.4 Arial, Helvetica, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.bus-hero .reel-browser .bus-hero-reel-controls { display: flex; align-items: center; gap: 10px; width: auto; height: auto; pointer-events: auto; }
.bus-hero .reel-browser .bus-hero-reel-step { margin: 0; }
.bus-hero .reel-browser .bus-hero-reel-counter { min-width: 45px; margin: 0; padding: 0; border: 0; background: transparent; text-align: center; }
.bus-hero .reel-filmstrip { position: relative; display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 5px; scrollbar-color: #625c54 #242321; scrollbar-width: thin; padding: 5px 5px 12px; margin: 0 -5px; }
.bus-hero .reel-thumb { position: relative; display: flex; flex-direction: column; align-items: stretch; flex: 0 0 92px; width: 92px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #d4cbbd; text-align: left; cursor: pointer; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; }
.bus-hero .reel-thumb-image, .bus-hero .reel-thumb-placeholder { display: block; width: 100%; height: 136px; object-fit: cover; background: #171715; border: 2px solid transparent; box-sizing: border-box; border-radius: 3px; transition: border-color 150ms ease, opacity 150ms ease; }
.bus-hero .reel-thumb-placeholder { display: grid; place-items: center; padding: 10px; font: 400 11px/1.5 Arial, Helvetica, sans-serif; text-align: center; }
.bus-hero .reel-thumb-number { position: absolute; top: 8px; left: 8px; min-width: 23px; padding: 3px 4px; background: #171715df; color: #fffaf0; text-align: center; font: 600 10px/1.2 Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; border-radius: 2px; }
.bus-hero .reel-thumb-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-height: 31px; margin-top: 8px; font: 500 11px/1.4 Arial, Helvetica, sans-serif; }
.bus-hero .reel-thumb[aria-current="true"] { color: #fffaf0; }
.bus-hero .reel-thumb[aria-current="true"] .reel-thumb-image, .bus-hero .reel-thumb[aria-current="true"] .reel-thumb-placeholder { border-color: #ff6500; }
.bus-hero .reel-thumb[aria-current="true"] .reel-thumb-number { background: #ff6500; color: #242321; }
.bus-hero .reel-thumb.is-loading .reel-thumb-image { opacity: .5; }
.bus-hero .reel-thumb:focus-visible { outline: 3px solid #ff6500; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .bus-hero .reel-thumb:hover .reel-thumb-image, .bus-hero .reel-thumb:hover .reel-thumb-placeholder { border-color: #d4cbbd; }
  .bus-hero .reel-thumb[aria-current="true"]:hover .reel-thumb-image { border-color: #ff6500; }
}
@media (max-width: 600px) {
  .bus-hero .reel-browser { padding: 14px 20px 10px; }
  .bus-hero .reel-browser-header { gap: 8px; margin-bottom: 8px; }
  .bus-hero .reel-browser-label { font-size: 11px; letter-spacing: .06em; }
  .bus-hero .reel-browser .bus-hero-reel-controls { gap: 8px; }
  .bus-hero .reel-browser .bus-hero-reel-counter { min-width: 36px; }
  .bus-hero .reel-filmstrip { gap: 10px; }
  .bus-hero .reel-thumb { flex-basis: 76px; width: 76px; }
  .bus-hero .reel-thumb-image, .bus-hero .reel-thumb-placeholder { height: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .bus-hero .reel-thumb-image, .bus-hero .reel-thumb-placeholder { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bus-hero .bus-hero-preview,
  .bus-hero .bus-hero-reel-step,
  .bus-hero .bus-hero-play { transition: none; }
  .bus-hero .bus-hero-play:active,
  .bus-hero .bus-hero-play:hover,
  .bus-hero .bus-hero-reel-step:active { transform: none; }
}