.mobile-only { display: none; }
.mobile-service-menu { display: none; }
.film-dialog { max-width: 1120px; width: calc(100% - 48px); max-height: calc(100dvh - 32px); }
.film-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #171717; border-radius: 12px; overflow: hidden; }
.film-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; }
.film-youtube-link { margin-top: 14px; }
.service-media-player, .mobile-demo-label, .media-frame.mobile-design-art { display: none; }
.portfolio-card .mobile-demo-label { display: none; }
.portfolio-card .caption-title { color: var(--text); font-size: inherit; }

@media (max-width: 640px) {
  .motion-room { display: none; }
  .mobile-demos-active .desktop-demo-label,
  .mobile-demos-active #google .screen-tabs,
  .mobile-demos-active #google .screen-panel,
  .mobile-demos-active .site-example-body,
  .mobile-demos-active .analytics-preview > a,
  .mobile-demos-active .portfolio-card:first-child > .media-frame,
  .mobile-demos-active .portfolio-card:nth-child(2) > .video-cover { display: none; }
  .mobile-demos-active .mobile-demo-label { display: inline; }
  .mobile-demos-active .portfolio-card .mobile-demo-label { display: block; }
  .mobile-demos-active .portfolio-label .mobile-demo-label { display: inline; }
  .mobile-demos-active .media-frame.mobile-design-art { display: grid; }
  .mobile-demos-active .service-media-player { display: block; width: 100%; max-width: 270px; margin-inline: auto; overflow: hidden; background: var(--stage); }
  .service-media-player video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; }
  .screen-demo .service-media-player { margin-block: 10px; width: calc(100% - 20px); border-radius: 10px; }
  .site-example .service-media-player { max-width: none; }
  .analytics-preview .service-media-player { margin-block: 12px; width: calc(100% - 20px); border-radius: 10px; }
  .portfolio-mobile-demo { border-block: 1px solid var(--line); }
  .services > .service-shortcuts { display: none; }
  .mobile-service-menu:not([hidden]) { display: grid; position: fixed; top: max(8px, env(safe-area-inset-top)); left: 16px; right: 16px; margin: 0; }
  .dialog-open .mobile-service-menu { visibility: hidden; }
  .desktop-only { display: none; }
  .mobile-only { display: inline; }
  .hero-note, .hero-demo-link, .welcome-description p, .motion-steps { display: none; }
  .hero .lead { max-width: 300px; }
  .welcome-description { padding: 18px 20px; }
  .welcome-description h2 { font-size: 26px; }
  .motion-story h3 { margin-top: 12px; }
  .motion-offer-link { margin-top: 14px; }
  .site-notes li p, .service-benefits li p { display: none; }
  .offer-box .button, .package .button { padding-inline: 14px; font-size: 13px; }
  .sticky-cta .button { justify-content: flex-start; }
  .service-heading > p { line-height: 1.55; }
  .approach { padding-block: 42px; }
  .questions { padding-block: 38px; }
  .film-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .film-frame { aspect-ratio: 9 / 16; }
  .film-top { margin-bottom: 14px; }
  .film-youtube-link { font-size: 12px; }
}