/* The two service pages (Ad Films /blank, Wedding Films /blank-2) and the contact page (/blank-1).
   Wix built the service pages as one tall section (3.5 screens) with a sticky stage: the poster and three
   text cards slide left as you scroll, and the title slides out. Each slide is tied to an invisible marker,
   exactly as on Wix: --m1 moves the text cards, --m2 moves the whole track. */

body.inner { background: #000; }

/* ---------- header: a black bar with a white panel (desktop), the phone bar (phones) ---------- */
.ihead { position: relative; z-index: 51; height: calc(102 * var(--u)); background: #000; }
.ihead.sticky { position: sticky; top: 0; }
.ipanel { position: absolute; left: calc(70 * var(--u)); top: calc(2 * var(--u)); width: calc(1300 * var(--u)); height: calc(98 * var(--u));
  background: #fff; border-radius: calc(34.15 * var(--u)); }
.ipanel .logo img { width: 100%; height: 100%; object-fit: cover; }
.mbar.dark { background: #000; }

/* ---------- the service stage ---------- */
.svc { position: relative; height: 350vh; background: #000; timeline-scope: --m1, --m2; display: flow-root; }
.marker { position: absolute; display: block; width: calc(2 * var(--u)); visibility: hidden; pointer-events: none; }
.marker.m1 { left: calc(433 * var(--u)); top: 92vh; height: calc(209 * var(--u)); view-timeline: --m1 block; }
.marker.m2 { left: calc(325 * var(--u)); top: 217vh; height: calc(333 * var(--u)); view-timeline: --m2 block; }
.stage { position: sticky; top: 0; height: 100vh; margin-top: calc(-90 * var(--u)); overflow: clip; }
.glow { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.track { position: absolute; left: calc(791 * var(--u)); top: calc(50% - 245 * var(--u)); width: calc(2377 * var(--u)); height: calc(461 * var(--u)); }
.svc-poster { position: absolute; left: calc(15 * var(--u)); top: calc(7 * var(--u)); width: calc(300 * var(--u)); height: calc(450 * var(--u));
  border: 2px solid #fff; border-radius: 20px; overflow: hidden; }
.svc-poster { transition: transform .5s cubic-bezier(.25, .46, .45, .94); }
.svc-poster img { width: 100%; height: 100%; object-fit: cover; }
.tcards { position: absolute; left: calc(871 * var(--u)); top: calc(4 * var(--u)); width: calc(1843 * var(--u)); height: calc(452 * var(--u)); }
.tcard { position: absolute; top: 0; width: calc(590 * var(--u)); height: calc(452 * var(--u)); background: rgba(0, 0, 0, .15); border-radius: calc(16.88 * var(--u)); color: #fff; }
.tcard:nth-child(1) { left: 0; } .tcard:nth-child(2) { left: calc(626 * var(--u)); } .tcard:nth-child(3) { left: calc(1253 * var(--u)); }
.tcard .label { font: 400 calc(18 * var(--u)) / calc(28.8 * var(--u)) var(--text); }
.tcard h2 { font-family: var(--display); font-weight: 700; font-size: calc(49.5 * var(--u)); line-height: calc(64.35 * var(--u)); }
.tcard .copy { font: 400 calc(18 * var(--u)) / calc(28.8 * var(--u)) var(--text); }
.stitle { position: absolute; left: calc(86 * var(--u)); top: calc(50% - 138 * var(--u)); width: calc(479 * var(--u)); height: calc(248 * var(--u)); color: #fff; }
@media (min-width: 751px) { .stitle.wed { top: calc(50% - 160 * var(--u)); height: calc(291 * var(--u)); } }
.stitle h1 { font-family: var(--display); font-weight: 700; font-size: calc(84.38 * var(--u)); line-height: calc(101.25 * var(--u)); }
.stitle p { font: 400 calc(18 * var(--u)) / calc(25.2 * var(--u)) var(--text); letter-spacing: -.03em; }
.icons { position: absolute; left: 0; right: 0; bottom: 12px; height: calc(90 * var(--u)); }
.icons a { position: absolute; top: calc(34 * var(--u)); width: calc(23 * var(--u)); height: calc(23 * var(--u)); opacity: .5; }
.icons a:first-child { opacity: 1; }
.icons a:hover { opacity: 1; }
.icons img { width: 100%; height: 100%; object-fit: contain; }
.more { display: none; }

/* scroll-driven slides (cover 0% to 100% of each marker, like Wix) */
@keyframes s-track { to { transform: translateX(-120vw); } }
@keyframes s-cards { to { transform: translateX(-35vw); } }
@keyframes s-out { to { transform: translateX(-800px); } }
.track { animation: s-track linear both; animation-duration: auto; animation-timeline: --m2; animation-range: cover 0% cover 100%; --r0: cover 0%; --r1: cover 100%; }
.tcards { animation: s-cards linear both; animation-duration: auto; animation-timeline: --m1; animation-range: cover 0% cover 100%; --r0: cover 0%; --r1: cover 100%; }
.stitle { animation: s-out linear both; animation-duration: auto; animation-timeline: view(); animation-range: cover 45% cover 55%; --r0: cover 45%; --r1: cover 55%; }
.sd-js .track, .sd-js .tcards, .sd-js .stitle { animation-duration: 1000ms; animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .track, .tcards, .stitle { animation: none !important; } }

@media (max-width: 750px) {
  .ihead { display: none; }
  .svc { height: 500vh; }
  .marker.m1 { left: calc(113 * var(--u)); height: calc(165 * var(--u)); }
  .marker.m2 { left: calc(85 * var(--u)); height: calc(263 * var(--u)); }
  .stage { margin-top: calc(-70 * var(--u)); }
  .track { left: calc(64 * var(--u)); top: calc(94 * var(--u)); width: calc(1390 * var(--u)); height: calc(365 * var(--u)); }
  .svc-poster { left: calc(1 * var(--u)); top: calc(8 * var(--u)); width: calc(243 * var(--u)); height: calc(365 * var(--u)); }
  .tcards { left: calc(393 * var(--u)); top: 0; width: calc(938 * var(--u)); height: calc(338 * var(--u)); }
  .tcard { width: calc(300 * var(--u)); height: calc(338 * var(--u)); border-radius: calc(27.17 * var(--u)); }
  .tcard:nth-child(2) { left: calc(319 * var(--u)); } .tcard:nth-child(3) { left: calc(638 * var(--u)); }
  .tcard .label { font-size: calc(13.46 * var(--u)); line-height: calc(16.15 * var(--u)); }
  .tcard h2 { font-size: calc(32.61 * var(--u)); line-height: calc(39.13 * var(--u)); }
  .tcard .copy { font-size: 16px; line-height: 19.2px; letter-spacing: -.02em; }
  .stitle { left: calc(28 * var(--u)); top: calc(464 * var(--u)); width: calc(318 * var(--u)); height: auto; text-align: center; }
  .stitle h1 { font-size: 60px; line-height: 72px; }
  .stitle p { font-size: calc(15.38 * var(--u)); line-height: calc(21.54 * var(--u)); }
  @keyframes s-track { to { transform: translateX(-245vw); } }
  .icons { display: none; }
  .more { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: calc(38 * var(--u)); }
  .more p { position: absolute; left: 0; right: 0; top: calc(17 * var(--u)); text-align: center; color: #fff; font: 400 calc(13.04 * var(--u)) / calc(20.87 * var(--u)) var(--text); }
}

/* ---------- the contact page ---------- */
.contact.page { background: linear-gradient(135deg, #007cff, #00adf4); }