/* Text is immediately readable on mobile, including offscreen sections. */
@media (max-width: 767px) {
  [data-reveal="text"],
  .js-reveal-effect-text,
  .js-reveal-effect-title,
  .js-reveal-effect-left,
  .js-reveal-effect-right,
  .reveal-line > span,
  .js-reveal-effect-line > span {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
    transition-delay: 0s !important;
    will-change: auto !important;
  }
}

/* These sections appear immediately at every screen size. */
:is(#services, #pricing, .find-us) :is([data-reveal], [class*="js-reveal-effect-"], .reveal-line > span) {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  transition: none !important;
  transition-delay: 0s !important;
  will-change: auto !important;
}

/* Landing copy stays still; only the italic final title line reveals. */
#top :is([data-reveal="text"], .js-reveal-effect-text, .js-reveal-effect-title, .js-reveal-effect-left, .js-reveal-effect-right, .reveal-line > span) {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  transition: none !important;
  transition-delay: 0s !important;
  will-change: auto !important;
}

#top .hero__title .reveal-line:has(em) > span {
  transform: translateY(115%) !important;
  transition: transform 1500ms var(--ap-ease) !important;
}

#top .hero__title.is-visible .reveal-line:has(em) > span {
  transform: translateY(0) !important;
}

@media (prefers-reduced-motion: reduce) {
  #top .hero__title .reveal-line:has(em) > span {
    transform: none !important;
    transition: none !important;
  }
}

/* Direction Before Design copy appears immediately at every screen size. */
#purpose :is([data-reveal="text"], .js-reveal-effect-text, .js-reveal-effect-title, .js-reveal-effect-left, .js-reveal-effect-right, .reveal-line > span, .js-reveal-effect-line > span) {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  transition: none !important;
  transition-delay: 0s !important;
  will-change: auto !important;
}

/* Loaded mobile pictures are visible before they enter the viewport. */
@media (max-width: 767px) {
  [data-reveal="media"],
  .js-reveal-effect-img {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
    transition-delay: 0s !important;
    will-change: auto !important;
  }
}