/* Preview-only styles for ross-scroll.js. Everything is scoped to .tx-motion, which the
   script adds only when motion is allowed; without JavaScript or with reduced motion,
   the page renders exactly as before. */
/* The mask clips only below each line (where text rises from), so layout is unchanged. */
tx-line{display:block;clip-path:inset(-.5em -.5em -.14em -.5em)}
tx-line-in{display:block}
.tx-motion .tx-sweep{position:relative}
.tx-motion .tx-sweep::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.085em;background:currentColor;pointer-events:none;
  transform:scaleX(calc(1 - max(var(--sp,0) - 1, 1 - var(--sp,0))));transform-origin:calc(clamp(0, (var(--sp,0) - 1) * 1000, 1) * 100%) 50%}

/* Hero to #people: the hero settles back like a card; #people slides over it. */
.tx-motion .mf-hero{overflow:hidden}
.tx-hero-shade{position:absolute;inset:0;z-index:20;background:#071d66;opacity:0;pointer-events:none}
.tx-motion #people{position:relative;z-index:2;border-radius:36px 36px 0 0;box-shadow:0 -34px 60px -34px #071d6666}
@media(max-width:899px){.tx-motion #people{border-radius:20px 20px 0 0}}

/* #services: pointer glare on the cobalt cards */
.tx-motion .ms-service{position:relative}
.tx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),#d5ff8347,transparent 46%)}
.tx-motion .ms-service:hover .tx-glare{opacity:1}

/* #process: step numbers roll up inside their own window; the phone is scroll-driven */
.tx-motion .tx-odo{overflow:hidden}
tx-odo{display:inline-block}
.tx-motion .ms-phone{animation:none!important}

/* #meet-bryan: a lime disc for the portrait to rise from */
.tx-motion .ms-founder-portrait{position:relative;isolation:isolate}
.tx-founder-disc{position:absolute;left:6%;top:9%;width:88%;aspect-ratio:1;border-radius:50%;background:#d5ff83;z-index:-2;pointer-events:none}

/* Footer: oversized outline wordmark */
.tx-motion #footer{position:relative;overflow:hidden}
.tx-footer-word{display:block;margin:48px 0 -.14em;font:800 clamp(110px,21vw,400px)/.8 Barlow,Arial,sans-serif;letter-spacing:-.04em;text-align:center;
  color:transparent;-webkit-text-stroke:1px #ffffff2e;pointer-events:none;user-select:none;white-space:nowrap}

/* #the-shift (desktop): the dark panel holds while the decision list slides over it */
@media(min-width:900px){
 .tx-motion .tx-shift-sticky{position:sticky;top:max(110px,calc(50vh - 260px));z-index:0}
 .tx-motion #approach{position:relative;z-index:1}
}

/* #reviews: white page with a lime layer that fades in on scroll */
.tx-motion #reviews.tx-washed{position:relative;isolation:isolate;background:#fff}
.tx-wash{position:absolute;inset:0;z-index:-1;background:#d5ff83;opacity:0;pointer-events:none}