/* Scroll effects. Only applies once motion.js has switched it on, so a page without script
   shows everything as usual. */
.motion-on .mo { opacity: 0; transition: opacity .7s ease var(--mo-delay, 0ms), transform .8s cubic-bezier(.2, .7, .2, 1) var(--mo-delay, 0ms); will-change: opacity, transform; }
.motion-on .mo--up { transform: translate3d(0, 34px, 0); }
.motion-on .mo--left { transform: translate3d(-44px, 0, 0); }
.motion-on .mo--right { transform: translate3d(44px, 0, 0); }
.motion-on .mo--zoom { transform: scale(.94); }
.motion-on .mo.mo-in { opacity: 1; transform: none; will-change: auto; }

/* How far down the page the guest is. */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200; pointer-events: none;
    background: var(--motion-accent, #f7941d); transform: scaleX(0); transform-origin: 0 50%; }

/* Figures guests can trust, counted up the first time they are seen. */
.trust-strip { padding: 46px 0; background: var(--trust-bg, #14233a); color: #fff; }
.trust-strip__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.trust-strip__item { text-align: center; padding: 8px 10px; }
.trust-strip__item + .trust-strip__item { border-left: 1px solid rgba(255, 255, 255, .16); }
.trust-strip__number { display: block; font-size: 44px; line-height: 1.1; font-weight: 700; color: var(--motion-accent, #f7941d); font-variant-numeric: tabular-nums; }
.trust-strip__label { display: block; margin-top: 8px; font-size: 15px; font-weight: 600; color: #fff; }
.trust-strip__note { display: block; margin-top: 3px; font-size: 13px; color: rgba(255, 255, 255, .72); }
@media (max-width: 767px) {
    .trust-strip { padding: 34px 0; }
    .trust-strip__list { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
    .trust-strip__item + .trust-strip__item { border-left: 0; }
    .trust-strip__number { font-size: 34px; }
}

/* For guests who have asked their device for less movement: things fade in, nothing slides. */
@media (prefers-reduced-motion: reduce) {
    .motion-on .mo, .motion-on .mo--up, .motion-on .mo--left, .motion-on .mo--right, .motion-on .mo--zoom { transform: none !important; transition: opacity .5s ease !important; }
}
@media print {
    .motion-on .mo { opacity: 1 !important; transform: none !important; }
    .scroll-progress { display: none; }
}

:root { --motion-accent: #f7941d; --trust-bg: #0E1317; }