/* Boulder "words-stack" section, ported from wearebouldergroup.com (s-words-stack
   component): NEED / MORE / PROOF? punch in one after another as the page scrolls,
   over a flat brand panel. Their brand orange #F55A00 becomes our yellow #EEB603
   with cinema-black type; PP Neue Montreal becomes Geist, the neutral grotesk this
   site already substitutes for it (see boulder-logo-text.css).

   The panel is a position:fixed child of the section: clip-path on the section makes
   it the containing block, so the panel pins to the viewport but is cropped to the
   section's own box — that is what lets the next section wipe over it at the end.
   Their root font-size is a fixed 18px, ours is fluid, so the size cap is anchored
   to --fws-rem instead of a bare rem unit. */

.s-words-stack{--fws-rem:18px;position:relative;z-index:2;height:calc(var(--words, 1)*150lvh);clip-path:inset(0);color:#0A0A0A;font-family:Geist,sans-serif;font-size:min(20vw,calc(19.444*var(--fws-rem)));font-style:normal;font-weight:500;line-height:1;text-transform:uppercase}
.s-words-stack .s__inner{position:fixed;top:0;left:0;width:100%;height:100lvh;background-color:#EEB603}
.s-words-stack .s__word{position:absolute;top:50%;left:50%;translate:-50% -50%;scale:10;text-align:center;text-rendering:geometricPrecision;white-space:nowrap}
.s-words-stack .s__word--border{padding:0 .35em;border:.086em solid #0A0A0A;border-radius:1em}
.s-words-stack.is-out-viewport .s__inner{display:none}

/* No-JS / reduced-motion fallback: the words never get scaled down by the timeline,
   so the stack collapses to a single static panel with the three words centred. */
.s-words-stack.is-static{height:100lvh}
.s-words-stack.is-static .s__inner{position:absolute;display:flex;align-items:center;align-content:center;justify-content:center;flex-wrap:wrap;gap:.16em .28em;padding:0 6vw;font-size:min(11vw,calc(10*var(--fws-rem)))}
.s-words-stack.is-static .s__word{position:static;translate:none;scale:none;font-size:1em}
