/* Why connected matters: a relay. A baton passes along Strategy -> Design -> Engineering -> Growth; each hand-over card lights up as the baton crosses it. */
.rly { background: #ececef; color: var(--ink-2); }
.rly .label__name, .rly .label__side { color: var(--ink-2); }
.rly .label__side small { color: var(--ink-3); }
.rly .label__name .mark { background-image: url("../images/brand/novva-n-dark.svg"); }
.rly__title { margin-top: clamp(1.5rem, 3vw, 3rem); max-width: 15ch; font-size: clamp(2.2rem, 1rem + 4.6vw, 5.4rem); font-weight: 700; letter-spacing: -0.065em; line-height: .96; text-transform: uppercase; word-spacing: .1em; color: var(--ink-2); }
.rly__lead { margin-top: 1.4rem; max-width: 56ch; font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem); letter-spacing: -0.025em; line-height: 1.45; color: var(--ink-3); }

.rly__track { --p: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(2.4rem, 5vw, 4.5rem); }
.rly__rail { position: absolute; left: 12.5%; right: 12.5%; top: 31px; height: 3px; background: rgba(11,11,14,.14); border-radius: 2px; }
.rly__rail i { display: block; height: 100%; width: calc(var(--p) * 100%); background: linear-gradient(90deg, var(--purple), var(--purple-light)); border-radius: 2px; transition: width 1.6s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 12px rgba(144,15,255,.5); }
.rly__stop { position: relative; display: grid; justify-items: center; gap: .7rem; z-index: 1; }
.rly__ic { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #fff; color: var(--ink-3); border: 2px solid rgba(11,11,14,.12); transition: background-color .9s ease, color .9s ease, border-color .9s ease, transform 1.1s var(--ease), box-shadow 1.1s ease; }
.rly__ic svg { width: 26px; height: 26px; }
.rly__stop b { font-size: clamp(.95rem, .85rem + .4vw, 1.2rem); font-weight: 700; letter-spacing: -0.04em; color: var(--ink-3); transition: color .9s ease; }
.rly__stop.is-reached .rly__ic { background: var(--ink); color: #fff; border-color: var(--ink); }
.rly__stop.is-reached b { color: var(--ink-2); }
.rly__stop.is-here .rly__ic { background: var(--purple); border-color: var(--purple); color: #fff; transform: scale(1.12); box-shadow: 0 0 0 8px rgba(144,15,255,.16); }

.rly__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(1.6rem, 3vw, 2.6rem); }
.rly__card { position: relative; display: flex; flex-direction: column; gap: .8rem; padding: clamp(1.3rem, 2.4vw, 2.1rem); border-radius: 20px; background: #fff; outline-offset: 4px; transition: background-color 1s ease, color .25s ease .45s, translate 1.1s var(--ease), box-shadow 1.1s var(--ease); }
.rly__card { overflow: hidden; isolation: isolate; }
.rly__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, #6a0bbf, #2b0a55); opacity: 0; transition: opacity 1.1s cubic-bezier(.4,0,.2,1); }
.rly__hand { display: inline-flex; align-items: center; gap: .55rem; align-self: flex-start; padding: .35rem .8rem; border-radius: 999px; background: rgba(144,15,255,.1); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--purple); transition: background-color .25s ease .45s, color .25s ease .45s; }
.rly__hand i { font-style: normal; }
.rly__card h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); font-weight: 700; letter-spacing: -0.055em; line-height: 1.03; }
.rly__card p:last-child { color: var(--ink-3); letter-spacing: -0.02em; line-height: 1.5; transition: color .25s ease .45s; }
.rly__card.is-on { color: #fff; translate: 0 -6px; box-shadow: 0 30px 60px -30px rgba(106,11,191,.8); }
.rly__card.is-on::before { opacity: 1; }
.rly__card.is-on .rly__hand { background: rgba(255,255,255,.16); color: #fff; }
.rly__card.is-on p:last-child { color: rgba(255,255,255,.86); }

@media (max-width: 860px) {
  .rly__track { grid-template-columns: 1fr; gap: 0; justify-items: start; padding-left: 2px; }
  .rly__rail { display: none; }
  .rly__stop { grid-auto-flow: column; justify-content: start; align-items: center; gap: 1rem; padding-bottom: 1rem; }
  .rly__ic { width: 48px; height: 48px; } .rly__ic svg { width: 22px; height: 22px; }
  .rly__cards { grid-template-columns: 1fr; } .rly__card.is-on { translate: none; }
}
@media (prefers-reduced-motion: reduce) { .rly__rail i, .rly__ic, .rly__card, .rly__card::before { transition: none; } }

/* The site-wide scroll-reveal rule (.js [data-reveal]) sets its own `transition` on these cards and was silently replacing the ones above,
   so colour / lift / shadow switched instantly. Re-declare the full list here with higher specificity (keeping the reveal fade). */
.rly__cards .rly__card[data-reveal] { transition: opacity .9s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms), background-color 1s ease, color .25s ease .45s, translate 1.1s var(--ease), box-shadow 1.1s var(--ease); }
@media (prefers-reduced-motion: reduce) { .rly__cards .rly__card[data-reveal] { transition: none; } }