.video-page {
  --video-line: rgba(255, 255, 255, .13);
  --video-muted: #959eac;
  color: #f5f7fa;
  background: #080b10;
}

.video-shell { width: min(1200px, calc(100% - var(--page-pad) * 2)); margin-inline: auto; }
.video-page button { cursor: pointer; }
.video-page [hidden] { display: none !important; }
.video-eyebrow { color: var(--brand-cyan); font: 11px/1.5 "SFMono-Regular", monospace; letter-spacing: .08em; }
.video-back { display: inline-flex; align-items: center; gap: 8px; color: var(--video-muted); font-size: 12px; }
.video-back:hover { color: white; }
.video-hero { overflow: hidden; padding-top: calc(119px + var(--promo-notice-offset)); }
.video-hero-layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: 54px; align-items: center; margin-top: 60px; }
.video-hero-copy { position: relative; z-index: 1; }
.video-hero-copy .video-eyebrow { display: flex; align-items: center; gap: 10px; }
.video-hero-copy .video-eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-cyan); }
.video-hero h1 { margin-top: 24px; font-size: clamp(48px, 5.3vw, 76px); font-weight: 600; line-height: 1.18; letter-spacing: -.04em; }
.video-hero h1 span { color: var(--brand-cyan); }
.video-hero-subtitle { margin-top: 24px; font-size: 18px; color: #e2e6ec; }
.video-hero-description { max-width: 450px; margin-top: 12px; color: var(--video-muted); font-size: 15px; line-height: 1.9; }
.video-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; margin-top: 30px; }
.video-text-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: #c1c8d2; }
.video-text-link:hover { color: var(--brand-cyan); }
.video-hero-tags { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 38px; color: #8793a3; font-size: 11px; }
.video-hero-tags > span { display: inline-flex; align-items: center; gap: 7px; }
.video-hero-tags svg { width: 14px; height: 14px; }
.video-hero-art { min-width: 0; position: relative; padding: 0 0 36px 18px; }
.video-main-frame { position: relative; height: 480px; overflow: hidden; border: 1px solid var(--video-line); border-radius: 12px; background: #111820; }
.video-main-frame > img { width: 100%; height: 100%; object-fit: cover; object-position: 61% center; }
.video-main-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2), transparent 34%, rgba(0,0,0,.78)); pointer-events: none; }
.video-frame-top { position: absolute; top: 22px; right: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; z-index: 1; color: #c8ced6; font: 9px/1.5 "SFMono-Regular", monospace; letter-spacing: .07em; }
.video-frame-top > span:first-child { display: flex; align-items: center; gap: 7px; }
.video-frame-top svg { width: 15px; height: 15px; }
.video-main-frame figcaption { position: absolute; left: 28px; right: 28px; bottom: 35px; z-index: 1; }
.video-main-frame figcaption p { font-size: 25px; line-height: 1.4; font-weight: 500; }
.video-main-frame figcaption > span { display: block; margin-top: 14px; color: #aab4bf; font-size: 10px; }
.video-frame-corner { position: absolute; right: 24px; bottom: 26px; z-index: 1; width: 30px; height: 30px; border-right: 1px solid #7a95a6; border-bottom: 1px solid #7a95a6; }
.video-inset-frame { position: absolute; width: 170px; aspect-ratio: 4 / 3; overflow: hidden; border: 5px solid #111720; border-radius: 9px; box-shadow: 0 16px 32px #0005; }
.video-inset-people { top: -26px; left: -38px; transform: rotate(-7deg); }
.video-inset-frame img { width: 100%; height: 100%; object-fit: cover; }
.video-inset-frame figcaption { position: absolute; inset: auto 0 0; display: flex; align-items: center; gap: 5px; padding: 22px 9px 9px; background: linear-gradient(transparent,#000c); font-size: 9px; }
.video-art-label { position: absolute; right: 20px; bottom: 7px; left: 66px; display: flex; align-items: center; gap: 18px; color: #758597; font: 9px "SFMono-Regular", monospace; letter-spacing: .12em; }
.video-art-label > i { flex: 1; height: 1px; background: #ffffff20; }
.video-art-label > span { display: flex; gap: 10px; align-items: center; }
.video-section-nav { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; margin-top: 65px; border-top: 1px solid var(--video-line); border-bottom: 1px solid var(--video-line); }
.video-section-nav > * { padding: 25px 0; font-size: 12px; }
.video-section-nav > span { color: #768190; }
.video-section-nav > a { display: flex; align-items: center; justify-content: space-between; margin-left: 36px; color: #b7c1ce; }
.video-section-nav > a:hover { color: var(--brand-cyan); }
.video-section-nav svg { color: #65788d; }
.video-section { padding: 115px 0; }
.video-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 48px; }
.video-section-head h2 { margin-top: 21px; font-size: clamp(34px, 3.8vw, 50px); font-weight: 550; line-height: 1.22; letter-spacing: -.025em; }
.video-section-head > p { padding-bottom: 4px; color: var(--video-muted); font-size: 14px; line-height: 1.9; }
.video-showcase { background: #080b10; }
.video-gallery-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 30px; }
.video-filters { display: flex; gap: 7px; }
.video-filters button { display: flex; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: 999px; padding: 9px 17px; background: transparent; color: #969fae; font-size: 13px; white-space: nowrap; }
.video-filters button[aria-pressed="true"] { border-color: #4c5664; background: #ffffff0d; color: white; }
.video-filters button:hover { color: white; background: #ffffff0d; }
.video-filters small { color: #7f9dac; font: 9px "SFMono-Regular", monospace; }
.video-gallery-note { color: #657080; font-size: 10px; }
.video-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
.video-scene-card { min-width: 0; }
.video-scene-button { width: 100%; text-align: left; border: 0; background: transparent; color: inherit; }
.video-scene-image { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 8px; background: #17212b; }
.video-scene-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0004, transparent 36%, #0004); pointer-events: none; }
.video-scene-image > img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease), filter .55s; filter: saturate(.72); }
.video-scene-button:hover img { transform: scale(1.045); filter: saturate(1); }
.video-scene-index { position: absolute; top: 17px; left: 17px; z-index: 1; color: #fffd; text-shadow: 0 1px 8px #000b; font: 9px "SFMono-Regular", monospace; letter-spacing: .06em; }
.video-scene-open { position: absolute; right: 15px; bottom: 15px; z-index: 1; display: inline-flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid #ffffff26; border-radius: 999px; background: #0b11197a; backdrop-filter: blur(10px); color: white; font-size: 10px; }
.video-scene-caption { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; }
.video-scene-caption h3 { font-size: 21px; font-weight: 550; }
.video-scene-caption > svg { color: #7f8c9c; width: 19px; height: 19px; }
.video-scene-button > p { margin-top: 10px; color: #959eac; font-size: 13px; line-height: 1.8; }
.video-production { color: var(--brand-ink); background: #f4f6f9; }
.video-production .video-eyebrow { color: var(--brand-primary); }
.video-production .video-section-head > p { color: #6b7684; }
.video-production-layout { display: grid; grid-template-columns: .76fr 1.4fr; gap: 60px; align-items: start; }
.video-craft-tabs { border-top: 1px solid #cbd3df; }
.video-craft-tabs > button { display: flex; width: 100%; align-items: flex-start; gap: 20px; padding: 28px 10px 28px 0; text-align: left; color: #8490a0; background: transparent; border: 0; border-bottom: 1px solid #cbd3df; }
.video-craft-tabs > button > span:nth-child(2) { flex: 1; }
.video-craft-tabs > button[aria-selected="true"] { color: var(--brand-ink); }
.video-craft-tabs > button[aria-selected="true"] .video-craft-number { color: var(--brand-primary); }
.video-craft-tabs > button > svg { width: 20px; height: 20px; margin-top: 4px; }
.video-craft-number { font: 13px/2 "SFMono-Regular", monospace; }
.video-craft-tabs strong { display: block; font-size: 22px; font-weight: 550; }
.video-craft-tabs small { display: block; margin-top: 9px; font-size: 12px; line-height: 1.8; color: #6b7684; }
.video-craft-panels { min-width: 0; }
.video-craft-visual { min-height: 285px; overflow: hidden; border: 1px solid #dce2e9; border-radius: 10px; padding: 24px; background: white; }
.video-visual-label { display: flex; justify-content: space-between; align-items: center; gap: 20px; color: #576575; font-size: 11px; }
.video-visual-label > span { display: flex; align-items: center; gap: 8px; }
.video-visual-label svg { color: #6888a6; width: 16px; height: 16px; }
.video-visual-label small { color: #8d98a4; font-size: 9px; }
.video-storyboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.video-storyboard img { width: 100%; height: 114px; object-fit: cover; border-radius: 4px; }
.video-storyboard figcaption { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 9px; color: #7a8696; }
.video-storyboard figcaption span { color: #7090ac; font-family: monospace; }
.video-script-line { margin-top: 25px; padding-top: 16px; border-top: 1px solid #e1e7ed; display: flex; gap: 18px; color: #677689; font-size: 11px; }
.video-script-line > span { flex-shrink: 0; color: #99a3b0; }
.video-craft-copy h3 { margin-top: 25px; font-size: 22px; font-weight: 550; line-height: 1.45; }
.video-craft-copy > p { margin-top: 12px; font-size: 14px; line-height: 1.9; color: #6b7684; }
.video-craft-copy ul { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 20px; list-style: none; }
.video-craft-copy li { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #5a6879; }
.video-craft-copy li svg { color: var(--brand-primary); width: 13px; height: 13px; }
.video-edit-preview { position: relative; height: 156px; margin-top: 18px; overflow: hidden; border-radius: 4px; }
.video-edit-preview > img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.video-edit-preview > span { position: absolute; right: 0; bottom: 0; left: 0; padding: 23px 14px 10px; background: linear-gradient(transparent,#000a); color: white; font-size: 11px; }
.video-timeline { display: grid; grid-template-columns: 26px 1fr; gap: 6px 10px; margin-top: 14px; color: #8a99aa; font-size: 8px; }
.video-timeline > div { display: flex; gap: 3px; }
.video-timeline i { flex: 1; padding: 1px 6px; border: 1px solid #8fb1d3; border-radius: 2px; background: #d8e8f7; color: #6884a1; font-style: normal; }
.video-timeline .video-audio-track { border: 1px solid #a7c5c2; border-radius: 2px; background: repeating-linear-gradient(90deg, #d3e4e0 0 4px, #98b9b2 4px 5px); }
.video-format-stage { display: flex; align-items: center; justify-content: center; height: 205px; margin: 18px 0; }
.video-format-stage > img { width: 310px; max-width: 100%; height: 174px; border-radius: 4px; object-fit: cover; }
.video-format-stage[data-format-stage="portrait"] > img { width: 112px; height: 200px; }
.video-format-stage[data-format-stage="square"] > img { width: 200px; height: 200px; }
.video-format-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.video-format-controls > button { padding: 6px 12px; border: 1px solid #d8e0e8; border-radius: 6px; background: white; color: #738294; font-size: 10px; }
.video-format-controls > button[aria-pressed="true"] { border-color: #7997b9; background: #edf4fa; color: #285078; }
.video-delivery { background: #10151d; }
.video-delivery-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; list-style: none; }
.video-delivery-steps > li { position: relative; padding-top: 25px; padding-right: 12px; border-top: 1px solid #36414f; }
.video-step-number { color: #688aa8; font: 12px "SFMono-Regular", monospace; }
.video-delivery-steps h3 { margin-top: 30px; font-size: 21px; font-weight: 500; }
.video-delivery-steps p { margin-top: 15px; color: #929daf; font-size: 13px; line-height: 1.8; }
.video-delivery-steps > li > svg { position: absolute; right: 6px; top: 25px; width: 16px; height: 16px; color: #6b8096; }
.video-contact { position: relative; isolation: isolate; overflow: hidden; padding: 112px 0; text-align: center; background: #080b10; }
.video-contact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#080b10, #080b10b8 50%,#080b10), url('assets/video-event.jpg') center 27% / cover; opacity: .28; }
.video-contact h2 { margin-top: 23px; font-size: clamp(36px, 4.5vw, 60px); font-weight: 550; line-height: 1.22; }
.video-contact .video-shell > p:not(.video-eyebrow) { margin-top: 24px; font-size: 14px; color: var(--video-muted); line-height: 1.9; }
.video-contact-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 30px; margin-top: 32px; }
.video-contact-actions .contact-phones { margin-top: 0; justify-content: center; font-size: 14px; color: #b9c4d1; }
.video-return-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; color: #768699; font-size: 11px; }
.video-return-link:hover { color: white; }
.video-scene-dialog { width: min(850px, calc(100% - 36px)); max-height: calc(100svh - 36px); margin: auto; overflow: auto; padding: 0; color: #f5f7fa; border: 1px solid #36404d; border-radius: 12px; background: #111720; box-shadow: 0 30px 100px #0006; }
.video-scene-dialog::backdrop { background: #03060bc9; backdrop-filter: blur(12px); }
.video-dialog-close { position: absolute; top: 14px; right: 14px; z-index: 1; color: white; background: #080b10b3; }
.video-dialog-image { width: 100%; height: 280px; object-fit: cover; }
.video-dialog-copy { padding: 30px 36px 36px; }
.video-dialog-copy h2 { margin-top: 13px; font-size: 32px; font-weight: 550; }
.video-dialog-copy > p:not(.video-eyebrow) { margin-top: 15px; color: #a5b0bf; font-size: 14px; line-height: 1.8; }
.video-dialog-brief { margin-top: 24px; padding: 20px 0; border-top: 1px solid var(--video-line); border-bottom: 1px solid var(--video-line); }
.video-dialog-brief > span { color: #708a9e; font-size: 10px; }
.video-dialog-brief p { margin-top: 9px; font-size: 14px; line-height: 1.8; }
.video-dialog-copy ul { margin: 20px 0 0; padding-left: 18px; color: #aab7c7; font-size: 12px; line-height: 1.9; }
.video-dialog-actions { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.video-dialog-actions > span { color: #8193a6; font-size: 11px; }
.video-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 1080px) {
  .video-hero-layout { gap: 38px; }
  .video-hero h1 { font-size: 58px; }
  .video-main-frame { height: 440px; }
  .video-inset-frame { width: 144px; }
  .video-hero-tags { gap: 14px; }
  .video-production-layout { gap: 32px; grid-template-columns: .8fr 1.2fr; }
  .video-craft-visual { padding: 18px; }
  .video-storyboard img { height: 94px; }
  .video-gallery-note { display: none; }
  .video-section-nav { grid-template-columns: 1fr 1fr 1fr; }
  .video-section-nav > span { display: none; }
  .video-section-nav > a { margin-left: 0; padding-right: 28px; }
}

@media (max-width: 820px) {
  .video-hero { padding-top: calc(112px + var(--promo-notice-offset)); }
  .video-hero-layout { grid-template-columns: 1fr; gap: 56px; margin-top: 40px; }
  .video-hero-copy { max-width: 620px; }
  .video-hero h1 { font-size: 64px; }
  .video-hero-description { max-width: 510px; }
  .video-hero-art { max-width: 650px; width: 100%; margin-inline: auto; padding-left: 30px; }
  .video-main-frame { height: 380px; }
  .video-inset-people { left: 0; }
  .video-section-nav { margin-top: 36px; }
  .video-section { padding: 85px 0; }
  .video-section-head { align-items: flex-start; gap: 22px; flex-direction: column; margin-bottom: 35px; }
  .video-section-head h2 { font-size: 42px; }
  .video-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .video-production-layout { grid-template-columns: 1fr; gap: 30px; }
  .video-craft-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 0; gap: 16px; }
  .video-craft-tabs > button { display: block; padding: 0 0 15px; border-color: #cbd3df; }
  .video-craft-tabs > button[aria-selected="true"] { border-color: var(--brand-primary); }
  .video-craft-tabs > button > svg,.video-craft-tabs small { display: none; }
  .video-craft-tabs strong { margin-top: 8px; font-size: 18px; }
  .video-craft-number { font-size: 10px; }
  .video-craft-visual { padding: 24px; }
  .video-storyboard img { height: 140px; }
  .video-delivery-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}

@media (max-width: 560px) {
  .video-hero { padding-top: calc(104px + var(--promo-notice-offset)); }
  .video-hero-layout { margin-top: 31px; }
  .video-eyebrow { font-size: 9px; }
  .video-hero h1 { font-size: clamp(46px, 12vw, 60px); }
  .video-hero-subtitle { font-size: 15px; margin-top: 22px; }
  .video-hero-description { font-size: 13px; }
  .video-hero-actions { gap: 20px; margin-top: 27px; }
  .video-hero-actions .button { font-size: 13px; padding-inline: 18px; }
  .video-text-link { font-size: 11px; }
  .video-hero-tags { gap: 13px; margin-top: 27px; font-size: 9px; }
  .video-hero-tags svg { width: 12px; height: 12px; }
  .video-hero-art { padding-left: 17px; padding-bottom: 30px; }
  .video-main-frame { height: 310px; }
  .video-inset-frame { width: 126px; border-width: 4px; }
  .video-inset-people { top: -23px; left: 0; }
  .video-frame-top { top: 15px; right: 15px; left: auto; }
  .video-frame-top > span:first-child { display: none; }
  .video-main-frame figcaption { left: 20px; bottom: 24px; }
  .video-main-frame figcaption p { font-size: 23px; }
  .video-frame-corner { right: 16px; bottom: 20px; width: 22px; height: 22px; }
  .video-art-label { left: 36px; right: 5px; font-size: 8px; gap: 11px; }
  .video-section-nav { gap: 16px; margin-top: 26px; }
  .video-section-nav > a { font-size: 10px; padding: 20px 0; }
  .video-section-nav svg { display: none; }
  .video-section { padding: 68px 0; }
  .video-section-head { gap: 20px; margin-bottom: 30px; }
  .video-section-head h2 { margin-top: 17px; font-size: 32px; }
  .video-section-head > p { font-size: 12px; }
  .video-gallery-toolbar { margin-bottom: 24px; }
  .video-filters { width: 100%; gap: 4px; flex-wrap: wrap; }
  .video-filters button { padding: 8px 11px; font-size: 11px; gap: 6px; }
  .video-gallery { grid-template-columns: 1fr; gap: 34px; }
  .video-scene-image { aspect-ratio: 16 / 10; }
  .video-scene-caption { margin-top: 17px; }
  .video-scene-caption h3 { font-size: 20px; }
  .video-scene-button > p { font-size: 12px; }
  .video-craft-tabs { gap: 14px; }
  .video-craft-tabs strong { font-size: 16px; }
  .video-craft-visual { min-height: 0; padding: 16px; }
  .video-visual-label { gap: 10px; font-size: 10px; }
  .video-visual-label small { font-size: 8px; }
  .video-storyboard { gap: 7px; margin-top: 22px; }
  .video-storyboard img { height: 94px; }
  .video-storyboard figcaption { display: block; font-size: 8px; }
  .video-storyboard figcaption span { display: block; margin-bottom: 3px; }
  .video-script-line { font-size: 10px; gap: 10px; margin-top: 18px; }
  .video-craft-copy h3 { font-size: 20px; }
  .video-craft-copy > p { font-size: 12px; }
  .video-craft-copy ul { gap: 8px 14px; }
  .video-craft-copy li { font-size: 10px; }
  .video-delivery-steps { gap: 34px 22px; }
  .video-delivery-steps > li { padding-right: 0; }
  .video-delivery-steps h3 { margin-top: 23px; font-size: 18px; line-height: 1.4; }
  .video-delivery-steps p { font-size: 11px; }
  .video-contact { padding: 80px 0; }
  .video-contact h2 { font-size: 34px; }
  .video-contact .video-shell > p:not(.video-eyebrow) { font-size: 12px; }
  .video-contact-actions { gap: 24px; flex-direction: column; }
  .video-dialog-image { height: 200px; }
  .video-dialog-copy { padding: 25px 20px; }
  .video-dialog-copy h2 { font-size: 26px; }
  .video-dialog-copy > p:not(.video-eyebrow), .video-dialog-brief p { font-size: 12px; }
  .video-dialog-actions { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .video-scene-image > img { transition: none; }
}