/* motion.css — Lenis base (lenis/dist/lenis.css, v1.3.26) plus scroll effects.
   Effects only apply under html.fx; reveals hide only under html.fx-armed. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* ---- reveal (motion/fx/reveal.js) ---- */
.reveal { transition: opacity 1.2s var(--ease-expo), transform 1.2s var(--ease-expo); transition-delay: calc(var(--d, 0) * 80ms); }
html.fx-armed .reveal:not(.is-in) { opacity: 0; transform: translateY(28px); }

/* ---- masked heading words (motion/fx/lines.js) ---- */
.lw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.lw__i { display: inline-block; transition: transform 1s var(--ease-expo); transition-delay: calc(var(--w, 0) * 35ms); }
html.fx-armed [data-fx-lines]:not(.is-in) .lw__i { transform: translateY(110%); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .lw__i { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* ---- E: diagonal stair stack (home Why) ---- */
html.fx .fx-stair { height: calc(100vh + var(--n) * 40vh); padding: 0; }
html.fx .fx-stair__pin { position: sticky; top: 0; height: 100vh; display: grid; align-content: center; }
html.fx .fx-stair__pin .shead { position: absolute; z-index: 2; right: var(--gutter); top: 16vh; text-align: right; justify-items: end; max-width: 420px; margin: 0; }
html.fx .fx-stair__deck { position: relative; z-index: 1; display: block; height: min(64vh, 560px); margin: 0; padding: 0; list-style: none; background: none; border: 0; }
html.fx .fx-stair__deck > [data-fx-card] {
  position: absolute; left: calc(var(--i) * clamp(90px, 12vw, 190px)); top: calc(var(--i) * 34px);
  width: min(360px, 27vw); aspect-ratio: 1; margin: 0; padding: 28px; border: 1px solid var(--glass-line); border-radius: 16px;
  background: rgba(36, 17, 50, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; translate: 100% 100%; transition: opacity 1.2s var(--ease-expo), translate 1.2s var(--ease-expo);
}
html.fx .fx-stair__deck > [data-fx-card].is-in { opacity: 1; translate: 0 0; }
html.fx .fx-stair__deck .why__n { font-size: clamp(3rem, 6vw, 5rem); line-height: 1; }
html.fx .fx-stair__deck h3 { margin-top: auto; }

/* ---- C: type zoom (home closing CTA) ---- */
html.fx .fx-zoom { height: 180vh; padding: 0; }
html.fx .fx-zoom__pin { position: sticky; top: 0; height: 100vh; display: grid; place-content: center; justify-items: center; text-align: center; overflow: hidden; }
html.fx .fx-zoom__type { transform: scale(var(--s, 1)); transform-origin: 50% 50%; will-change: transform; font-size: clamp(2.4rem, 5.5vw, 4.6rem); max-width: 18ch; margin-inline: auto; }
html.fx .fx-zoom__rest { opacity: 0; translate: 0 24px; transition: opacity 1.2s var(--ease-expo), translate 1.2s var(--ease-expo); display: grid; justify-items: center; gap: 22px; margin-top: 28px; }
html.fx .fx-zoom.is-done .fx-zoom__rest { opacity: 1; translate: 0 0; }
/* a keyboard user reaching the button sees it, whatever the zoom progress */
html.fx .fx-zoom:focus-within .fx-zoom__rest { opacity: 1; translate: 0 0; }

/* ---- B: rise (services): pillar cards lift into the grid one after another ---- */
html.fx [data-fx="rise"] > [data-fx-card] { opacity: var(--ro, 1); transform: translateY(calc(var(--ry, 0) * 90px)) scale(calc(1 - var(--ry, 0) * 0.06)); will-change: transform, opacity; }

/* shared offer numbering */
.offer-card__n { display: block; font-family: var(--font-serif); color: var(--accent); font-weight: 700; margin-bottom: 14px; }
.fx-offers > .sfoot { margin-top: var(--space-block); }

/* ---- A: pinned title list (GTM Consulting) ---- */
html.fx .fx-pinlist .fx-offers { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); }
html.fx .fx-pinlist .fx-offers__head { position: sticky; top: 24vh; align-self: start; }
html.fx .fx-pinlist__list { display: grid; grid-template-columns: 1fr; gap: 16vh; padding-block: 8vh 12vh; margin: 0; }
html.fx .fx-pinlist__list > [data-fx-card] { height: auto; filter: blur(calc(var(--v, 0) * 10px)); opacity: calc(1 - var(--v, 0) * 0.8); transform: translateY(calc(var(--v, 0) * 24px)); will-change: filter, opacity, transform; }
html.fx .fx-pinlist .fx-offers > .sfoot { grid-column: 2; margin-top: 0; }

/* ---- sticky pile (Sales Development) ---- */
html.fx .fx-pile__list { display: grid; grid-template-columns: 1fr; gap: 16vh; max-width: 760px; margin: 0 auto; padding-bottom: 12vh; }
html.fx .fx-pile__list > [data-fx-card] { position: sticky; top: calc(18vh + var(--i) * 18px); min-height: 34vh; height: auto;
  transform: scale(var(--sc, 1)); transform-origin: 50% 0; filter: brightness(calc(1 - var(--dim, 0))); background: rgb(36, 17, 50);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.35); will-change: transform, filter; }
html.fx .fx-pile .fx-offers > .sfoot { max-width: 760px; margin-inline: auto; }

/* ---- fan-out (Outreach Automation) ---- */
html.fx .fx-fan { height: 200vh; padding: 0; }
html.fx .fx-fan .fx-offers { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 100%; align-content: center; gap: var(--space-block); }
html.fx .fx-fan .fx-offers__head .shead { margin: 0 auto; text-align: center; justify-items: center; }
html.fx .fx-fan__list { position: relative; display: block; height: 40vh; min-height: 360px; margin: 0; }
html.fx .fx-fan__list > [data-fx-card] { position: absolute; left: 50%; top: 0; width: min(270px, 21vw); height: 100%; margin-left: calc(min(270px, 21vw) / -2);
  transform: translateX(var(--fx, 0px)) rotate(var(--fr, 0deg)); transform-origin: 50% 100%; z-index: calc(10 - var(--i)); background: rgb(36, 17, 50); will-change: transform; }
html.fx .fx-fan .fx-offers > .sfoot { margin: 0; text-align: center; }

/* ---- D: word reveal (About) ---- */
.fx-words { max-width: 980px; }
.fx-words .hlead { font-family: var(--font-serif); font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); }
html.fx .fx-words .ww { opacity: 0.16; transition: opacity 0.35s linear; }
html.fx .fx-words .ww.is-lit { opacity: 1; }

/* ---- 3D tilt-up cards (About) ---- */
html.fx .fx-tilt { perspective: 1100px; }
html.fx .fx-tilt > [data-fx-card] { transform: rotateX(calc(var(--t, 0) * 1deg)); transform-origin: 50% 100%; opacity: calc(1 - var(--t, 0) / 70); will-change: transform, opacity; }
.fx-tilt { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

/* ---- scroll-drawn timeline (Process) ---- */
html.fx .psteps[data-fx="timeline"] { position: relative; padding-left: 0; gap: 22px; }
html.fx .psteps[data-fx="timeline"]::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--line-2); }
html.fx .psteps[data-fx="timeline"]::after { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 100%; background: var(--accent); transform: scaleY(var(--fill, 0)); transform-origin: 0 0; }
html.fx .psteps[data-fx="timeline"] > .pstep { width: calc(50% - 40px); padding: 22px 26px; background: rgba(36, 17, 50, 0.72); border: 1px solid var(--glass-line); border-radius: 16px;
  opacity: 0; transition: opacity 1.2s var(--ease-expo), translate 1.2s var(--ease-expo); }
html.fx .psteps[data-fx="timeline"] > .pstep:nth-child(odd) { translate: -60px 0; }
html.fx .psteps[data-fx="timeline"] > .pstep:nth-child(even) { margin-left: auto; translate: 60px 0; }
html.fx .psteps[data-fx="timeline"] > .pstep.is-in { opacity: 1; translate: 0 0; }

/* ---- cascade (Contact) ---- */
.fx-cascade > .reveal { transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); transition-duration: 0.9s; }
html.fx-armed .fx-cascade > .reveal:not(.is-in) { transform: translateY(-36px) rotate(-1.5deg); }