/* Large, unhurried film chapters. Camera motion is in the footage, never the page. */
.film-chapter {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #e8f0f6;
  color: #122939;
}
.chapter-film { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.chapter-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-chapter::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.film-chapter-content { width: min(1264px, calc(100% - 112px)); margin: auto; }
.film-chapter-heading { padding-top: 93px; }
.film-chapter-heading .micro { color: inherit; font-size: 10px; letter-spacing: .15em; }
.studio .film-chapter h2 { font-size: clamp(56px, 5.4vw, 86px); line-height: 1.035; font-weight: 500; letter-spacing: -.055em; margin: 28px 0; }
.film-chapter-heading > p:last-of-type { font-size: 17px; line-height: 1.75; }
.model-chapter { text-align: center; }
.model-chapter::after { background: linear-gradient(180deg, #eff6fcbb, #f4f8fc66 55%, #eaf1f9bb); }
.model-chapter .chapter-film video { opacity: .78; }
.model-chapter h2 span { color: #467a99; }
.model-bridge { display: grid; grid-template-columns: 1fr 300px 1fr; align-items: center; max-width: 1030px; margin: 75px auto 63px; }
.model-branch .micro { font-size: 9px; color: #476078; }
.model-branch h3 { font-size: 26px; letter-spacing: -.9px; font-weight: 500; margin: 18px 0 15px; }
.model-branch p { font-size: 13px; line-height: 1.8; color: #455d72; }
.model-branch .text-link { font-size: 12px; margin-top: 22px; border-color: #7699b3; }
.model-connections { display: flex; align-items: center; }
.model-connections > div { padding: 18px; background: #122a3b; color: #d6e9f6; box-shadow: 0 22px 65px #27445e24; flex-shrink: 0; }
.model-connections svg { display: block; width: 69px; height: 69px; fill: currentColor; }
.model-connections i { display: block; height: 1px; flex: 1; position: relative; background: #7e9eb2; overflow: hidden; }
.model-connections i::after { content: ''; position: absolute; top: 0; left: -60%; height: 1px; width: 60%; background: #f5fcff; animation: model-signal 5s linear infinite; animation-play-state: paused; }
.model-connections i:last-child::after { animation-direction: reverse; }
[data-playing="true"] .model-connections i::after { animation-play-state: running; }
@keyframes model-signal { from { transform: translateX(0); } to { transform: translateX(270%); } }
.film-chapter-bottom { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 22px 0; min-height: 88px; border-top: 1px solid #6f8da345; text-align: left; }
.film-chapter-bottom > span { font-size: 10px; letter-spacing: .015em; }
.film-control { color: inherit; border: 1px solid #617f925c; background: #f7fbff85; padding: 12px 16px; font-family: inherit; font-size: 10px; min-height: 42px; cursor: pointer; }
.film-control:hover { background: #fff; }
.film-control[hidden] { display: none; }
.perspective-chapter { color: #fff; background: #111e29; }
.perspective-chapter::after { background: linear-gradient(90deg, #07131dc9 0%, #0818245c 60%, #07131d0a), linear-gradient(0deg,#07131daa,transparent 55%); }
.perspective-chapter .film-chapter-content { min-height: 760px; display: flex; flex-direction: column; }
.perspective-chapter .film-chapter-heading { flex: 1; padding-top: 110px; padding-bottom: 95px; }
.perspective-chapter .film-chapter-heading > p:last-of-type { color: #d5e2eb; }
.perspective-chapter .cinema-link { margin-top: 30px; }
.perspective-chapter .film-chapter-bottom { border-color: #ffffff45; }
.perspective-chapter .film-control { background: #0c1f3066; border-color: #ffffff66; }
.perspective-chapter .film-control:hover { background: #203e52; }
.perspective-chapter :focus-visible { outline-color: #fff; }
.studio .scope-section[data-film-scene] { position: relative; isolation: isolate; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); padding: 80px max(56px, calc((100vw - 1264px) / 2)) 25px; border-top: 0; margin-bottom: 70px; background: #eef4f9; }
.scope-section .chapter-film { opacity: .27; }
.scope-section .scope-grid { margin-bottom: 40px; }
.studio .scope-section .scope-card { border-color: #7d9aaf; }
.studio .scope-section .scope-card p { color: #394f62; }
.studio .business-checklist { padding-top: 75px; }
@media (max-width: 1100px) {
  .film-chapter-content { width: calc(100% - 64px); }
  .model-bridge { grid-template-columns: 1fr 200px 1fr; }
  .model-branch h3 { font-size: 23px; }
  .studio .scope-section[data-film-scene] { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 800px) {
  .film-chapter-content { width: calc(100% - 48px); }
  .film-chapter-heading { padding-top: 65px; }
  .studio .film-chapter h2 { font-size: 59px; }
  .film-chapter-heading > p:last-of-type { font-size: 15px; }
  .model-bridge { grid-template-columns: 1fr 110px 1fr; gap: 10px; margin: 60px 0 50px; }
  .model-connections > div { padding: 12px; }
  .model-connections svg { width: 42px; height: 42px; }
  .model-branch h3 { font-size: 21px; }
  .model-branch p { font-size: 11px; }
  .model-branch .text-link { font-size: 10px; gap: 8px; }
  .perspective-chapter .film-chapter-content { min-height: 680px; }
  .perspective-chapter .film-chapter-heading { padding-top: 86px; padding-bottom: 80px; }
  .studio .scope-section[data-film-scene] { padding: 60px 24px 20px; }
}
@media (max-width: 480px) {
  .film-chapter-content { width: calc(100% - 40px); }
  .studio .film-chapter h2 { font-size: 46px; }
  .film-chapter-heading .micro { font-size: 8px; }
  .film-chapter-heading > p:last-of-type br { display: none; }
  .model-bridge { grid-template-columns: 1fr 1fr; column-gap: 25px; margin: 40px 0; }
  .model-connections { grid-column: 1 / 3; grid-row: 1; width: 65%; justify-self: center; margin-bottom: 33px; }
  .model-branch h3 { font-size: 21px; line-height: 1.2; }
  .model-branch .micro { font-size: 8px; }
  .film-chapter-bottom { gap: 16px; }
  .film-chapter-bottom > span { font-size: 9px; line-height: 1.6; max-width: 175px; }
  .film-control { font-size: 9px; padding: 10px 12px; flex-shrink: 0; }
  .perspective-chapter .film-chapter-content { min-height: 620px; }
  .perspective-chapter .chapter-film video { object-position: 58% center; }
  .studio .scope-section[data-film-scene] { padding-left: 20px; padding-right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .model-connections i::after { animation: none; }
}