/* Digital growth: a staircase that climbs left to right — light grey, through black, to purple. */
.growthx { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-top: clamp(2rem, 4vw, 3.5rem); }
.growthx .lead { max-width: 52ch; letter-spacing: -0.03em; }
.stairs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: end; margin-top: clamp(2rem, 4vw, 4rem); }
.stair { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.4rem; min-height: calc(250px + var(--i) * 54px); padding: 1.2rem 1.1rem 1.4rem; border-radius: 12px; overflow: hidden; background: var(--st-bg); color: var(--st-fg); transition: transform .5s var(--ease), background-color .4s; }
.stair:nth-child(1) { --st-bg: #f0f0f2; --st-fg: var(--ink-2); }
.stair:nth-child(2) { --st-bg: #e6e6ea; --st-fg: var(--ink-2); }
.stair:nth-child(3) { --st-bg: #d9d9de; --st-fg: var(--ink-2); }
.stair:nth-child(4) { --st-bg: #bdbdc4; --st-fg: var(--ink); }
.stair:nth-child(5) { --st-bg: #0b0b0e; --st-fg: #fff; }
.stair:nth-child(6) { --st-bg: var(--purple); --st-fg: #fff; }
.stair:hover { transform: translateY(-8px); }
.stair__n { font-family: var(--ff-mono); font-size: .8rem; font-weight: 600; opacity: .7; }
.stair:nth-child(6)::after { content: ""; position: absolute; right: 1rem; top: 1rem; width: 2.2rem; height: 1.4rem; background: url("../images/brand/novva-n-light.svg") center / contain no-repeat; }
.stair__t h3 { font-size: clamp(1.15rem, .8rem + .9vw, 1.6rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1.05; }
.stair__t p { margin-top: .7rem; font-size: .9rem; letter-spacing: -0.015em; line-height: 1.4; opacity: .78; }

/* rise from the floor, one step after another (uses the site-wide reveal: fade + move, staggered) */
.js .stair[data-reveal] { transform: translateY(90px); transition: opacity .9s var(--ease) calc(var(--i) * 110ms), transform 1.1s var(--ease) calc(var(--i) * 110ms), background-color .4s; }
.js .stair[data-reveal].is-in { transform: none; }
.js .stair[data-reveal].is-in:hover { transform: translateY(-8px); transition-delay: 0s; }

@media (max-width: 1100px) { .stair__t p { font-size: .85rem; } .stair { padding: 1rem .9rem 1.2rem; } }
@media (max-width: 900px) {
  .growthx { flex-direction: column; align-items: flex-start; }
  .stairs { grid-template-columns: 1fr; align-items: stretch; }
  .stair { min-height: 0; width: calc(52% + var(--i) * 9.6%); gap: 2rem; }
  .stair:hover { transform: none; }
}
@media (max-width: 560px) { .stair { width: calc(80% + var(--i) * 4%); } }
@media (prefers-reduced-motion: reduce) { .js .stair[data-reveal] { transform: none; transition: none; } }