/* The Yardex Difference: scroll-controlled process section.
   Isolated: every selector is scoped to .ydx. Uses the site tokens from style.css. */
.ydx{position:relative;background:var(--green-950);color:var(--cream-50);isolation:isolate}
.ydx h2{color:var(--cream-50);margin:.4rem 0 .6rem}
.ydx .eyebrow{color:var(--gold-400)}

/* ---- Static mode (default, no JS, reduced motion, save-data) ---- */
.ydx__track{padding:var(--section-y) var(--pad-x)}
.ydx__stage{max-width:var(--max-w);margin:0 auto}
.ydx__canvas,.ydx__shade,.ydx__rail,.ydx__cue{display:none}
.ydx__badge{display:inline-block;margin:0 0 1rem;padding:.3rem .6rem;border:1px dashed rgba(217,183,106,.7);border-radius:var(--radius-s);font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-400)}
.ydx__intro{margin-bottom:2.5rem}
.ydx__sub{font-family:var(--font-display);font-size:clamp(1.15rem,2vw,1.45rem);color:#D8D2C2;margin:0}
.ydx__steps{list-style:none;margin:0;padding:0;display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.ydx__poster{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-m);background:#1d3a28;margin-bottom:.9rem}
.ydx__num{display:block;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400)}
.ydx__num{margin:0;font-family:var(--font-body)}
.ydx__line{font-family:var(--font-display);font-size:1.35rem;line-height:1.25;margin:.35rem 0 0;color:var(--cream-50)}
.ydx__desc{margin:.6rem 0 0;font-size:.95rem;line-height:1.55;color:#D8D2C2;max-width:46ch}
.ydx__end{margin-top:3rem;text-align:center}
.ydx__brand{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,5vw,3.4rem);letter-spacing:.06em;text-transform:uppercase;margin:0;line-height:1}
.ydx__tag{margin:.5rem 0 1.4rem;font-size:.85rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-400)}

/* ---- Live mode: sticky, scroll-scrubbed ---- */
.ydx--live .ydx__track{padding:0;height:560vh}
.ydx--live .ydx__stage{position:sticky;top:0;height:100vh;height:100svh;max-width:none;overflow:hidden;background:#13281c}
.ydx--live .ydx__canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.ydx--live .ydx__shade{display:block;position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,30,19,.78) 0%,rgba(10,30,19,.15) 38%,rgba(10,30,19,0) 60%),
             linear-gradient(to right,rgba(10,30,19,.45) 0%,rgba(10,30,19,0) 45%)}
.ydx--live .ydx__badge{position:absolute;right:clamp(16px,3vw,32px);top:calc(var(--header-h) + 34px);margin:0;z-index:3;background:rgba(15,46,29,.75)}

.ydx--live .ydx__intro{position:absolute;inset:0;margin:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--pad-x);
  background:radial-gradient(ellipse at center,rgba(10,30,19,.72) 0%,rgba(10,30,19,.35) 70%);
  opacity:var(--ydx-intro,1);transform:translateY(calc((1 - var(--ydx-intro,1)) * -24px));will-change:opacity,transform}
.ydx--live .ydx__intro h2{font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02}
.ydx--live .ydx__cue{display:block;margin-top:2rem;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:#D8D2C2}
.ydx--live .ydx__cue::after{content:"";display:block;width:1px;height:38px;margin:.8rem auto 0;background:linear-gradient(var(--gold-400),transparent);animation:ydx-cue 1.8s ease-in-out infinite}
@keyframes ydx-cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.ydx--live .ydx__steps{display:block;position:absolute;left:clamp(16px,5vw,72px);bottom:clamp(88px,14vh,140px);z-index:2;width:min(560px,calc(100% - 32px));height:0}
.ydx--live .ydx__step{position:absolute;left:0;bottom:0;width:100%;opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
.ydx--live .ydx__step.is-on{opacity:1;transform:none}
.ydx--live .ydx__poster{display:none}
.ydx--live .ydx__line{font-size:clamp(1.6rem,3.4vw,2.6rem);text-shadow:0 2px 18px rgba(0,0,0,.35)}
.ydx--live .ydx__desc{font-size:clamp(.95rem,1.15vw,1.05rem);color:rgba(250,247,240,.9);text-shadow:0 1px 10px rgba(0,0,0,.5)}

.ydx--live .ydx__rail{display:flex;gap:10px;position:absolute;left:clamp(16px,5vw,72px);right:clamp(16px,5vw,72px);bottom:clamp(36px,6vh,56px);z-index:2;max-width:620px}
.ydx__rail span{flex:1;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,247,240,.6)}
.ydx__rail i{display:block;height:2px;margin-bottom:.5rem;background:rgba(250,247,240,.25);position:relative;overflow:hidden}
.ydx__rail i::after{content:"";position:absolute;inset:0;background:var(--gold-500);transform-origin:left;transform:scaleX(var(--f,0))}

.ydx--live .ydx__end{position:absolute;inset:0;margin:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,rgba(10,30,19,.78) 0%,rgba(10,30,19,.45) 75%);
  opacity:var(--ydx-end,0);visibility:hidden;transform:scale(calc(.97 + var(--ydx-end,0) * .03))}
.ydx--live .ydx__end.is-on{visibility:visible}

/* loading hint while the first frames arrive */
.ydx--live .ydx__stage::before{content:"";position:absolute;inset:0;background:#1d3a28}
.ydx--live.ydx--ready .ydx__stage::before{display:none}

@media (max-width:767px){
  .ydx--live .ydx__track{height:460vh}
  .ydx--live .ydx__steps{bottom:170px;width:calc(100% - 32px)}
  .ydx--live .ydx__desc{font-size:.88rem;line-height:1.45}
  .ydx--live .ydx__line{font-size:1.45rem}
  .ydx--live .ydx__badge{top:84px;right:12px;font-size:.65rem}
  .ydx--live .ydx__rail{top:118px;bottom:auto;left:16px;right:16px}
  .ydx__rail span{font-size:.58rem;letter-spacing:.08em}
}