/* One 16:9 source. Portrait layout and the timeline share the same orientation
   query; the source and current playback position never change on rotation. */
@font-face {
  font-family: 'DrillMark Film Condensed';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url('/assets/fonts/barlow-condensed-800-latin-v1.woff2') format('woff2');
}
@font-face {
  font-family: 'DrillMark Film Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-500-latin-v1.woff2') format('woff2');
}
.page-home .site-header {
  color: #f4f3ed;
  background: #171a1b;
  border-color: #ffffff17;
}
.page-home .site-header .brand span { color: #f4f3ed; }
.page-home .site-header .header-contact { background: transparent; border-color: #626466; color: #f4f3ed; }
.page-home .site-header .header-contact:hover { border-color: #f4f3ed; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.motion-hero { background: #171a1b; color: #f4f3ed; }
.motion-hero-inner { display: flex; flex-direction: column; width: 100%; padding: 0; }
.motion-copy { order: 1; display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 100px; width: min(calc(100% - var(--gutter)*2), var(--max)); margin: 65px auto 55px; }
.motion-copy .eyebrow { grid-column: 1; color: #c4c5bf; font-size: .625rem; letter-spacing: .15em; margin-bottom: 28px; }
.motion-copy h1 { grid-column: 1; grid-row: 2 / span 3; }
.motion-copy .motion-lead { grid-column: 2; grid-row: 2; }
.motion-copy .motion-actions { grid-column: 2; grid-row: 3; }
.motion-copy .motion-product-note { grid-column: 2; grid-row: 4; }
.motion-copy h1 { font-size: clamp(2.9rem, 4.55vw, 4.4rem); line-height: 1.28; letter-spacing: -.065em; font-weight: 650; }
.motion-copy h1 span { color: #b6b9b3; }
.motion-copy h1:lang(en) { font-size: clamp(3.4rem, 5.4vw, 5.1rem); line-height: 1.055; letter-spacing: -.059em; }
.motion-lead { color: #b2b6b5; font-size: 1rem; line-height: 1.9; max-width: 460px; }
.motion-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; margin-top: 32px; }
.motion-actions .button { color: #fff; background: #cf3530; border-color: #cf3530; padding-inline: 24px; }
.motion-actions .button:hover { background: #b52623; border-color: #b52623; }
.motion-text-link { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; font-size: .875rem; text-decoration: none; }
.motion-text-link:hover { color: #fa8279; }
.motion-text-link span { font-size: 1.2rem; }
.motion-product-note { display: flex; gap: 14px; align-items: center; margin-top: 32px; }
.product-mark { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 1.5rem; font-weight: 600; border: 1px solid #505554; line-height: 1; position: relative; }
.product-mark img { width: 25px; height: 25px; }
.motion-product-note>div { display: flex; flex-direction: column; gap: 2px; }
.motion-product-note strong { font-size: .75rem; font-weight: 550; color: #dedfd8; }
.motion-product-note>div>span { font-size: .6875rem; color: #959d99; }
.film-player { --film-inset: 5%; --film-super-size: clamp(28px, min(8vw, 16cqh), 148px); --film-mono-size: clamp(10px, 1vw, 15px); container-type: size; position: relative; width: min(100%, calc((100svh - var(--header-height))*1.777778)); aspect-ratio: 16 / 9; margin-inline: auto; background: #414239; }
.film-heading { position: absolute; inset: 0 0 auto; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px var(--film-inset) 46px; background: linear-gradient(#171a1b90, transparent); color: #f4f3ed; font-size: .5625rem; font-weight: 550; letter-spacing: .13em; pointer-events: none; }
.film-heading>span:first-child { display: flex; align-items: center; gap: 7px; }
.film-dot { width: 5px; height: 5px; background: #dc5b50; border-radius: 50%; }
.film-screen { position: absolute; inset: 0; background: #414239; overflow: hidden; }
.hero-film { display: block; width: 100%; height: 100%; object-fit: contain; }
.film-screen [hidden], .film-player.is-unavailable .film-progress, .film-player.is-unavailable .film-time { display: none; }
.film-progress { position: absolute; inset: auto 0 0; z-index: 4; display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 2px; border: 0; background: #434744; color: #dc5b50; }
.film-progress::-webkit-progress-bar { background: #434744; }
.film-progress::-webkit-progress-value { background: #dc5b50; }
.film-progress::-moz-progress-bar { background: #dc5b50; }
.film-footer { position: absolute; inset: auto 0 2px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 90px; padding: 30px var(--film-inset) 26px; background: linear-gradient(transparent, #171a1bbf); }
.film-footer>span { color: #fff; font-size: .625rem; }
.film-time { color: #d4d8d1; font-size: .5625rem; display: block; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.film-controls { display: flex; gap: 4px; align-items: center; }
.film-controls button { display: flex; gap: 8px; align-items: center; justify-content: center; border: 0; background: transparent; color: #fff; font-size: .625rem; cursor: pointer; min-height: 44px; padding: 0 9px; }
.film-controls button:hover { color: #fff; }
.film-controls button[hidden], .film-error[hidden] { display: none; }
.film-controls .film-restart { font-size: 1.4rem; width: 36px; }
.playback-icon { width: 0; height: 0; border-left: 7px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.film-toggle.is-playing .playback-icon { width: 7px; height: 9px; border-block: 0; border-inline: 2px solid currentColor; }
.film-error { position: absolute; bottom: 105px; inset-inline: var(--film-inset); z-index: 5; color: #ffb3a9; font-size: .75rem; padding: 10px; background: #171a1b; }
.film-seek { position: absolute; inset: auto 0 0; z-index: 5; display: block; width: 100%; height: 24px; margin: 0; appearance: none; -webkit-appearance: none; opacity: 0; cursor: pointer; }
.film-seek:focus-visible { opacity: 1; background: #171a1bcc; outline: 2px solid #d93531; outline-offset: -2px; }
.film-seek::-webkit-slider-runnable-track { height: 2px; background: #dc5b50; }
.film-seek::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; margin-top: -6px; }
.film-seek::-moz-range-track { height: 2px; background: #dc5b50; }
.film-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.film-seek[hidden], .film-overlay[hidden], .film-overlay [hidden] { display: none; }
.film-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; color: #f4f3ed; }
.film-cue-scrim { position: absolute; inset: 28% 0 0; background: linear-gradient(transparent, #171a1b9e 58%, #171a1bce); opacity: 0; }
.has-cues .film-cue-scrim { opacity: 1; }
.film-cue-label, .film-ticker, .film-timer-status { font-family: 'DrillMark Film Mono', ui-monospace, Menlo, Consolas, monospace; font-weight: 500; font-size: var(--film-mono-size); line-height: 1.5; letter-spacing: .055em; }
.film-super, .film-timer { position: absolute; inset-inline-start: var(--film-inset); bottom: 122px; width: calc(100% - var(--film-inset)*2); }
.film-super .film-cue-label { margin-bottom: 13px; }
.film-super-lines { font-family: 'DrillMark Film Condensed', 'Arial Narrow', sans-serif; font-weight: 800; font-size: var(--film-super-size); line-height: .92; letter-spacing: -.018em; }
.film-line-mask { height: .92em; overflow: hidden; }
.film-line-mask>span { display: block; height: 100%; white-space: nowrap; }
.film-ticker { position: absolute; inset-inline: var(--film-inset); bottom: 90px; color: #adb5aa; font-size: calc(var(--film-mono-size)*.85); letter-spacing: .02em; }
.film-ticker span { display: inline-block; }
.film-ticker .is-latest { color: #fff; }
.film-timer-status { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
.film-beep { display: block; width: 8px; height: 8px; background: #f0d461; }
.film-timer-number { font-family: 'DrillMark Film Condensed', 'Arial Narrow', sans-serif; font-weight: 800; font-size: calc(var(--film-super-size)*1.45); font-variant-numeric: tabular-nums; letter-spacing: -.025em; line-height: .92; margin-top: 9px; }
.film-shot-bars { display: flex; gap: 5px; margin-top: 16px; }
.film-shot-bars>span { display: block; width: 25px; height: 5px; background: #ffffff38; }
.film-shot-bars>span.is-fired { background: #f4f3ed; }
.film-shot-bars>span:first-child.is-fired { background: #d93531; }
.motion-index { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #ffffff24; padding-block: 20px; }
.motion-index a { display: flex; align-items: center; gap: 20px; font-size: .6875rem; text-decoration: none; padding-inline: 28px; border-left: 1px solid #ffffff24; }
.motion-index a:first-child { padding-left: 0; border: 0; }
.motion-index a:last-child { padding-right: 0; }
.motion-index a>span:first-child { color: #939b92; font-size: .5625rem; }
.motion-index strong { color: #dcdfd6; font-weight: 550; letter-spacing: .15em; }
.motion-index a>span:last-child { margin-left: auto; color: #939b92; }
.motion-index a:hover strong { color: #fb8579; }
.film-story { padding-block: 105px 72px; }
.story-heading { display: grid; grid-template-columns: 1.25fr 1fr; gap: 100px; align-items: end; margin-bottom: 48px; }
.story-heading h2 { font-size: clamp(2.2rem, 3.8vw, 3.4rem); font-weight: 640; }
.story-heading>p { font-size: 1rem; line-height: 1.9; padding-bottom: 3px; max-width: 440px; }
.story-heading .eyebrow { font-size: .6875rem; margin-bottom: 22px; }
.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.story-chapter { scroll-margin-top: 30px; }
.story-visual { aspect-ratio: 4 / 5; position: relative; overflow: hidden; background: #a5a18e; }
.story-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.story-frame-number { position: absolute; left: 16px; top: 14px; color: #fff; background: #222a23; width: 25px; height: 25px; display: grid; place-items: center; font: 10px/1 monospace; }
.story-chapter-title { margin-top: 23px; }
.story-chapter-title>span { font-size: .625rem; letter-spacing: .13em; color: #a3302a; font-weight: 650; }
.story-chapter h3 { margin-top: 7px; font-size: 1.5rem; font-weight: 620; }
.story-chapter>p { margin-top: 13px; font-size: .9375rem; line-height: 1.85; max-width: 340px; }
.story-bottom { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 42px; padding-top: 25px; border-top: 1px solid var(--line); }
.story-bottom>span { color: #7c817a; font-size: .625rem; letter-spacing: .1em; }
.story-bottom .text-link { font-size: .875rem; }
.home-partnership { background: #e9ebe5; border-block: 1px solid #d8dcd3; padding-block: 95px; }
.partnership-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 110px; align-items: center; }
.partnership-copy .eyebrow { font-size: .625rem; margin-bottom: 24px; }
.partnership-copy h2 { font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 640; }
.partnership-copy>p:not(.eyebrow) { max-width: 460px; margin-top: 25px; line-height: 1.9; font-size: 1rem; }
.partnership-action { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; margin-top: 30px; }
.partnership-action>span { font-size: .6875rem; color: #676f65; }
.partnership-list>div { display: flex; gap: 25px; padding-block: 28px; border-top: 1px solid #bfc6b8; }
.partnership-list>div:last-child { border-bottom: 1px solid #bfc6b8; }
.partnership-list>div>span { font-size: .625rem; padding-top: 5px; color: #747e6c; }
.partnership-list h3 { font-size: 1.1875rem; font-weight: 620; }
.partnership-list p { margin-top: 10px; font-size: .875rem; line-height: 1.8; }
@media (min-width: 1600px) {
  .motion-copy h1 { font-size: 4.3rem; }
}
@media (max-width: 1100px) {
  .motion-copy { column-gap: 55px; }
  .motion-copy h1 { font-size: clamp(2.5rem, 4.7vw, 3.4rem); }
  .motion-copy h1:lang(en) { font-size: clamp(3rem, 5.3vw, 3.8rem); }
  .motion-actions { gap: 18px; }
  .motion-actions .button { padding-inline: 18px; font-size: .875rem; }
  .motion-product-note { margin-top: 44px; }
  .story-heading, .partnership-grid { gap: 60px; }
  .story-grid { gap: 23px; }
}
@media (max-width: 820px) {
  .motion-copy { column-gap: 30px; }
  .motion-copy .eyebrow { font-size: .5625rem; margin-bottom: 25px; letter-spacing: .09em; }
  .motion-copy h1 { font-size: clamp(2.1rem, 4.7vw, 2.8rem); }
  .motion-copy h1:lang(en) { font-size: clamp(2.7rem, 5.1vw, 3.2rem); }
  .motion-lead { font-size: .875rem; }
  .motion-lead br { display: none; }
  .motion-actions { gap: 10px; flex-direction: column; align-items: flex-start; }
  .motion-product-note { margin-top: 28px; }
  .film-story { padding-block: 76px 60px; }
  .story-heading { gap: 35px; }
  .story-heading>p { font-size: .875rem; }
  .story-grid { gap: 18px; }
  .story-chapter h3 { font-size: 1.2rem; }
  .story-chapter>p { font-size: .8125rem; }
  .home-partnership { padding-block: 75px; }
  .partnership-grid { gap: 45px; }
}
@media (max-width: 620px) {
  .page-home .menu-lines { border-color: #f4f3ed; }
  .page-home .mobile-menu nav { background: #171a1b; border-color: #424645; }
  .page-home .mobile-menu nav a { border-color: #424645; }
  .motion-copy { display: block; margin: 37px auto 28px; }
  .motion-copy .eyebrow { margin-bottom: 22px; font-size: .5625rem; letter-spacing: .12em; }
  .motion-copy h1 { font-size: clamp(2.1rem, 8.4vw, 3.25rem); line-height: 1.28; }
  .motion-copy h1:lang(en) { font-size: clamp(2.75rem, 10.2vw, 4.3rem); }
  .motion-lead { margin-top: 20px; font-size: .875rem; max-width: 380px; line-height: 1.8; }
  .motion-lead br { display: block; }
  .motion-actions { flex-direction: row; align-items: center; gap: 19px; margin-top: 24px; }
  .motion-actions .button { min-height: 48px; padding: 12px 17px; font-size: .8125rem; }
  .motion-text-link { font-size: .8125rem; gap: 10px; }
  .motion-product-note { display: none; }
  .film-footer>span, .film-controls button { font-size: .6875rem; }
  .film-time { font-size: .5625rem; }
  .film-controls .film-restart { width: 42px; }
  .motion-index { padding-block: 20px; }
  .motion-index a { gap: 9px; padding-inline: 13px; }
  .motion-index a>span:first-child { font-size: .5rem; }
  .motion-index strong { font-size: .5625rem; letter-spacing: .08em; }
  .motion-index a>span:last-child { display: none; }
  .film-story { padding-block: 65px 48px; }
  .story-heading { grid-template-columns: 1fr; gap: 23px; margin-bottom: 35px; }
  .story-heading h2 { font-size: 2.15rem; }
  .story-heading .eyebrow { margin-bottom: 20px; font-size: .625rem; }
  .story-heading>p { font-size: .9375rem; max-width: 420px; }
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
  .story-chapter { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; align-content: center; }
  .story-visual { grid-row: span 2; align-self: center; aspect-ratio: 3 / 4; }
  .story-frame-number { left: 10px; top: 10px; width: 22px; height: 22px; }
  .story-chapter-title { align-self: end; margin: 10px 0 0; }
  .story-chapter-title>span { font-size: .5625rem; }
  .story-chapter h3 { font-size: 1.25rem; line-height: 1.45; margin-top: 8px; }
  .story-chapter>p { font-size: .8125rem; line-height: 1.85; margin: 10px 0; align-self: start; }
  .story-bottom { gap: 18px; margin-top: 35px; padding-top: 20px; }
  .story-bottom>span { max-width: 125px; font-size: .5625rem; line-height: 1.8; }
  .story-bottom .text-link { font-size: .8125rem; }
  .home-partnership { padding-block: 60px; }
  .partnership-grid { grid-template-columns: 1fr; gap: 45px; }
  .partnership-copy h2 { font-size: 2.15rem; }
  .partnership-copy>p:not(.eyebrow) { font-size: .9375rem; }
  .partnership-list>div { padding-block: 23px; gap: 21px; }
  .partnership-list h3 { font-size: 1.125rem; }
}
@media (orientation: portrait) {
  .film-player { --film-inset: 6.7%; --film-super-size: clamp(28px, min(13.3vw, 16cqh), 104px); --film-mono-size: clamp(10px, 2.65vw, 16px); width: 100%; height: calc(100svh - var(--header-height)); min-height: 360px; aspect-ratio: 9 / 16; }
  .hero-film { object-fit: cover; }
}
@media (orientation: landscape) and (max-height: 480px) {
  .film-player { --film-super-size: clamp(24px, min(8vw, 13cqh), 64px); }
  .film-heading { padding-top: 10px; }
  .film-super, .film-timer { bottom: 96px; }
  .film-super .film-cue-label { margin-bottom: 7px; }
  .film-ticker { bottom: 72px; }
  .film-footer { min-height: 64px; padding-block: 10px; }
  .film-timer-status { margin-top: 4px; }
  .film-shot-bars { margin-top: 8px; }
}
@media (max-width: 360px) {
  .motion-copy h1 { font-size: 1.98rem; }
  .motion-actions { gap: 12px; }
  .motion-actions .button { padding-inline: 13px; }
  .motion-text-link { font-size: .75rem; gap: 6px; }
  .story-chapter { column-gap: 16px; }
  .story-chapter h3 { font-size: 1.06rem; }
  .story-chapter>p { font-size: .75rem; }
}