/* UM-SVC-SCROLL-WORDS (Oct 26 2026): Gedalye: "each word should come up separately, in big. when scrolling it should change to the next and then to the 3rd word. then all the categories come up as now".
   The services section becomes a pinned scroll sequence: big "Think." -> "Create." -> "Launch." (slide up + fade), then the small one-line title + the category pills reveal exactly as before.
   Only active when um-svc-words.js adds .um-sw (not for prefers-reduced-motion, which keeps the old static final state).
   Undo: remove the 2 UM-SVC-SCROLL-WORDS tags in index.html and restore the UM-HIDDEN-SVC-OLD block in site.js. */
#services.um-svc.um-sw{display:block!important;min-height:0!important;height:400vh;padding-top:0!important;padding-bottom:0!important;overflow:visible!important;overflow-x:clip!important}
@media (max-width:900px){#services.um-svc.um-sw{height:340vh}}
#services.um-sw>.um-svc-inner{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:72px;padding-bottom:24px}
#services.um-sw .um-sw-big{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;overflow:hidden}
/* smooth hide when scrolling back up past the categories (the reveal itself keeps the existing transitions) */
#services.um-sw.is-armed .um-svc-title:not(.is-in) .um-svc-word{transition:opacity .3s ease,transform .35s ease,filter .3s ease!important;transition-delay:0s!important}
#services.um-sw.is-armed .um-svc-list:not(.is-in) .um-svc-label{transition:opacity .25s ease,transform .3s ease,filter .25s ease!important;transition-delay:0s!important}
#services.um-sw.is-armed .um-svc-list:not(.is-in) .um-svc-ring ellipse{transition:stroke-dashoffset .35s ease!important;transition-delay:0s!important}
/* UM-HIDDEN-SVC-WORDS-V1 (Oct 26 2026, v1 whole-word slide-up+fade, replaced by UM-OCT26-B letter transition below). Restore = paste these rules back and revert um-svc-words.js to the v1 block kept at its end:
#services.um-sw .um-sw-big span{grid-area:1/1;font-family:'Chopin-Trial',sans-serif;font-weight:600;color:#fcfcfc;font-size:clamp(76px,19vw,300px);line-height:1;letter-spacing:-.03em;white-space:nowrap;padding-top:.08em;
  opacity:0;transform:translateY(.5em);filter:blur(12px);
  transition:opacity .55s ease,transform .8s cubic-bezier(.16,1,.3,1),filter .55s ease;will-change:transform,opacity}
#services.um-sw .um-sw-big span.is-cur{opacity:1;transform:none;filter:blur(0)}
#services.um-sw .um-sw-big span.is-past{opacity:0;transform:translateY(-.5em);filter:blur(12px)}
#services.um-sw .um-sw-big span.is-out{opacity:0;transform:translateY(-.9em) scale(.45);filter:blur(8px)}
@media (max-width:640px){#services.um-sw .um-sw-big span{font-size:min(23vw,120px)}}
/UM-HIDDEN-SVC-WORDS-V1 */

/* UM-OCT26-C (Oct 26 2026, 5:29-5:37 PM, Gedalye): instant word swap + the hero -> services switch (see um-svc-words.js).
   No lead-in gap any more (UM-HIDDEN-SVC-SPACER). The section overlaps the hero's last screen (its sticky stage) and stays behind it
   until it pins, then is raised above it in one step (.is-live). Only at this boundary. */
#services.um-sw .um-sw-x{grid-area:1/1;display:block;visibility:hidden;opacity:0;transition:none!important;
  font-family:'Chopin-Trial',sans-serif;font-weight:600;color:#fcfcfc;font-size:clamp(76px,19vw,300px);line-height:1;letter-spacing:-.03em;white-space:nowrap;padding-top:.08em}
#services.um-sw .um-sw-x.is-on{visibility:visible;opacity:1}
@media (max-width:640px){#services.um-sw .um-sw-x{font-size:min(23vw,120px)}}
html body #top{z-index:2}
html body #services.um-svc.um-sw.um-sw-cut{margin-top:-100vh!important;margin-top:-100svh!important;z-index:1}
html body #services.um-svc.um-sw.um-sw-cut.is-live{z-index:3}
/* /UM-OCT26-C */

/* UM-OCT26-D (Oct 26 2026, 5:47 + 5:52 PM, Gedalye): "the color background should just change" + "scrolling to the next section takes too much scrolls".
   Hero: pinned length cut from 80vh (70svh phones) to an 80px switch point (max 10vh) (um-svc-words.js); the section is kept 75vh longer than one screen
   only so its stage stays pinned behind the services stage after the switch. Services: starts at the hero's top (overlaps all of it), its stage is
   pinned from the very start, invisible until the switch point, then simply visible in place. Both stages are pinned at the switch, so it can never
   show a split. Section 410vh (350vh phones) = old 400/340vh + the switch point, so the word steps keep their old lengths.
   Only when um-svc-words.js runs (html.um-sw-d-on / .um-sw-d). Undo: see UM-HIDDEN-OCT26-C in um-svc-words.js. The C rules above stay but are overridden. */
html.um-sw-d-on body #top{height:calc(100vh + 75vh)!important;height:calc(100svh + 75vh)!important}
html body #services.um-svc.um-sw.um-sw-cut.um-sw-d{margin-top:calc(-100vh - 75vh)!important;margin-top:calc(-100svh - 75vh)!important;height:410vh;z-index:3;visibility:hidden}
@media (max-width:900px){html body #services.um-svc.um-sw.um-sw-cut.um-sw-d{height:350vh}}
html body #services.um-svc.um-sw.um-sw-cut.um-sw-d.is-live{visibility:visible}
html body #services.um-svc.um-sw.um-sw-cut.um-sw-d:not(.is-live) .um-sw-x{visibility:hidden!important}
/* /UM-OCT26-D */

/* UM-HIDDEN-SVC-SPACER (UM-OCT26-B 30vh/22vh lead-in gap after the hero, replaced by the UM-OCT26-C instant switch). Restore = paste back:
html body #services.um-svc.um-sw{padding-top:30vh!important;height:430vh}
@media (max-width:900px){html body #services.um-svc.um-sw{padding-top:22vh!important;height:362vh}}
/UM-HIDDEN-SVC-SPACER */
/* UM-HIDDEN-SVC-LETTERS (UM-OCT26-B letter-by-letter change, replaced by the UM-OCT26-C instant swap). Restore = paste back (and the JS block of the same name in um-svc-words.js):
/* UM-OCT26-B (Oct 26 2026, 5:23-5:26 PM, Gedalye: "make it better how its changing" + "it shouldnt start right after the video").
   1) Breathing room: a 30vh lead-in (22vh on phones) of the section's own colour before the pinned stage, and the first word only
      comes in once the stage is pinned in view (um-svc-words.js). Same pinned scroll length as before.
   2) Letter-by-letter change: each big word sits in a mask; the outgoing word's letters slip up out of it in a quick stagger,
      the incoming word's letters rise in from below, blur to sharp, with a small skew that settles. Scrolling up runs it
      mirrored (letters drop back down, stagger right to left). Same font, size and colour as v1. *\/
#services.um-sw .um-sw-w{grid-area:1/1;display:block;overflow:hidden;padding:.1em .14em .12em;margin:0 -.14em;
  font-family:'Chopin-Trial',sans-serif;font-weight:600;color:#fcfcfc;font-size:clamp(76px,19vw,300px);line-height:1;letter-spacing:-.03em;white-space:nowrap}
@media (max-width:640px){#services.um-sw .um-sw-w{font-size:min(23vw,120px)}}
#services.um-sw .um-sw-l{display:inline-block;white-space:pre;transform-origin:0 100%;will-change:transform,opacity,filter;
  opacity:0;filter:blur(10px);transform:translateY(118%) skewY(7deg);
  transition:transform .62s cubic-bezier(.6,0,.4,1) calc(var(--k,0) * 32ms),opacity .4s ease calc(var(--k,0) * 32ms + .14s),filter .5s ease calc(var(--k,0) * 32ms)}
/* waiting above (already left, scrolling down) *\/
#services.um-sw .um-sw-w[data-st="above"] .um-sw-l{transform:translateY(-118%) skewY(-5deg);filter:blur(8px)}
/* current: letters rise in, slower and softer than the exit, starting while the old word is still leaving *\/
#services.um-sw .um-sw-w[data-st="cur"] .um-sw-l{opacity:1;filter:blur(0);transform:none;
  transition:transform 1.05s cubic-bezier(.16,1,.3,1) calc(var(--k,0) * 52ms + .3s),opacity .55s ease calc(var(--k,0) * 52ms + .3s),filter .8s cubic-bezier(.16,1,.3,1) calc(var(--k,0) * 52ms + .3s)}
/* first appearance (nothing leaving): no wait *\/
#services.um-sw .um-sw-big.is-first .um-sw-w[data-st="cur"] .um-sw-l{transition-delay:calc(var(--k,0) * 52ms)}
/* jumps between non-neighbouring words while hidden: no visible travel *\/
#services.um-sw .um-sw-w.is-snap .um-sw-l{transition:none!important}
/* /UM-OCT26-B *\/
/UM-HIDDEN-SVC-LETTERS */


/* UM-OCT29-SW (Oct 29 email: "it takes too much scrolls to go from one word to the next"): the services stage is ~40% shorter, so each
   Think. / Create. / Launch. step needs about half the scrolling (was ~70vh per word, now ~38vh). Undo: delete this block. */
html body #services.um-svc.um-sw{height:260vh!important}
html body #services.um-svc.um-sw.um-sw-cut.um-sw-d{height:270vh!important}
@media (max-width:900px){html body #services.um-svc.um-sw{height:220vh!important} html body #services.um-svc.um-sw.um-sw-cut.um-sw-d{height:230vh!important}}
/* /UM-OCT29-SW */

/* UM-HIDDEN-OCT29-RISE (whole-word rise, replaced 4:47 PM by letter-by-letter UM-OCT29-LETTERS) */

/* UM-OCT29-LETTERS (Oct 29 4:46 PM email: "the same way this animates in [Our Ads are designed to stop your scroll.] should be the 3 big words,
   separately"): each big word (Think. / Create. / Launch.) comes in letter by letter, each letter fading up from a small drop, like the ads
   headline. Undo: delete this block + the UM-OCT29-LETTERS script tag in index.html. */
html body #services.um-sw .um-sw-x{transform:none;transition:opacity .25s ease-out,visibility 0s linear .25s!important}
html body #services.um-sw .um-sw-x.is-on{transition:opacity .01s,visibility 0s!important}
#services.um-sw .um-sw-x .um-sx{display:inline-block;opacity:0;transform:translate3d(0,.3em,0);transition:opacity .3s ease-out,transform .5s cubic-bezier(.16,1,.3,1)}
#services.um-sw .um-sw-x.is-on .um-sx{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){#services.um-sw .um-sw-x .um-sx{opacity:1;transform:none;transition:none}}
/* /UM-OCT29-LETTERS */