/* Rishikesh Yoga Association · index-2 only: course photo as full hero background */
/* ================= INDEX 2 · PHOTO BACKGROUND HERO ================= */
.hero{background:#1E1E1E}
.hero:after{display:none}
.hero .toran{position:relative;z-index:4}
.cs-stage{position:relative;z-index:1;overflow:clip;isolation:isolate;margin-top:-58px;padding-top:58px}
.cs-bg{position:absolute;inset:0;z-index:0;transform-origin:50% 40%;background:#1E1E1E}
.cs-bg .cs-slide{position:absolute;inset:0;margin:0;border:0;border-radius:0;box-shadow:none;background:#1E1E1E;transform:none!important;filter:none!important;
  clip-path:circle(0% at 76% 52%);z-index:1;transition:none;animation:none}
.cs-bg .cs-slide:before,.cs-bg .cs-slide:after,.cs-bg .cs-chip,.cs-bg .cs-fc{display:none}
.cs-bg .cs-slide[data-pos="0"]{clip-path:circle(150% at 76% 52%);z-index:3;transition:clip-path 1.7s var(--breath)}
.cs-bg .cs-slide.leave{clip-path:circle(150% at 76% 52%);z-index:2;animation:none}
.cs-bg .cs-slide > .cs-img{scale:calc(var(--z,1) * 1.1);transition:scale 1.2s ease}
.cs-bg .cs-slide[data-pos="0"] > .cs-img{scale:var(--z,1);transition:scale 10s cubic-bezier(.2,.6,.3,1)}
.cs-bg.intro .cs-slide[data-pos="0"]{clip-path:circle(0% at 76% 52%)}
.cs-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(20,20,20,.94) 0%,rgba(20,20,20,.86) 34%,rgba(20,20,20,.42) 62%,rgba(20,20,20,.12) 100%),
             linear-gradient(0deg,rgba(20,20,20,.92) 0%,rgba(20,20,20,.4) 22%,transparent 40%),
             linear-gradient(180deg,rgba(20,20,20,.55) 0%,transparent 22%)}
.cs-stage > .cs{position:relative;z-index:2}

/* light-on-dark text */
.cs-stage .cs-h1{color:var(--marigold)}
.cs-stage .cs-h1:before{background:var(--marigold)}
.cs-stage .cs-ya{color:rgba(246,231,207,.78)}
.cs-stage .cs-ya b{color:#fff}
.cs-stage .cs-num{color:color-mix(in srgb,var(--acc) 45%,#F3F7E6)}
.cs-stage .cs-num b{text-shadow:0 6px 30px rgba(0,0,0,.35)}
.cs-stage .cs-unit span{color:rgba(246,231,207,.85)}
.cs-stage .cs-tag{background:rgba(255,255,255,.12);color:#E4F3A8;border:1px solid rgba(255,231,176,.3);backdrop-filter:blur(6px)}
.cs-stage .cs-name{color:#FFFFFF;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.cs-stage .cs-name em{color:color-mix(in srgb,var(--acc) 40%,#E6F59A)}
.cs-stage .cs-desc{color:rgba(250,240,224,.88)}
.cs-stage .cs-facts li{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18);backdrop-filter:blur(10px)}
.cs-stage .cs-facts svg{color:var(--marigold)}
.cs-stage .cs-facts small{color:rgba(246,231,207,.66)}
.cs-stage .cs-facts b{color:#FFFFFF}
.cs-stage .cs-learn{color:#FFFFFF}
.cs-stage .cs-learn small{color:rgba(246,231,207,.66)}
.cs-stage .cs-learn span{border-color:rgba(255,231,176,.4);background:rgba(255,255,255,.05)}
.cs-stage .cs-price small,.cs-stage .cs-seats small{color:rgba(246,231,207,.7)}
.cs-stage .cs-price b{color:#fff}
.cs-stage .cs-seats .meter{background:rgba(255,255,255,.18)}
.cs-stage .cs-seats .meter i{background:linear-gradient(90deg,var(--marigold),color-mix(in srgb,var(--acc) 50%,#E6F59A))}
.cs-stage .btn-ghost{color:#FFFFFF;border-color:rgba(255,248,236,.55);background:rgba(255,255,255,.06);backdrop-filter:blur(6px)}
.cs-stage .btn-ghost:hover{background:#FFFFFF;color:var(--forest);border-color:#FFFFFF}
.cs-stage .btn-acc{box-shadow:0 12px 28px -12px var(--acc)}

/* right side over the photo */
.cs-stage .cs-visual{min-height:470px;padding:0}
.cs-stage .cs-visual .cs-date{left:auto;right:150px;top:40px}
.cs-stage .cs-visual .cs-seal{right:0;bottom:70px}
.cs-pcap{position:absolute;right:0;bottom:12px;margin:0;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(20,20,20,.55);backdrop-filter:blur(8px);color:#F3F7E6;font-size:12px;font-weight:700;letter-spacing:.04em}
.cs-pcap svg{color:var(--marigold)}

/* course rail as glass over the photo */
.cs-stage .cs-card{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);backdrop-filter:blur(12px);color:#FFFFFF}
.cs-stage .cs-card:hover{border-color:var(--marigold)}
.cs-stage .cs-card .h{color:color-mix(in srgb,var(--c) 45%,#F3F7E6)}
.cs-stage .cs-card .h small,.cs-stage .cs-card .mt{color:rgba(246,231,207,.7)}
.cs-stage .cs-card .nm{color:#FFFFFF}
.cs-stage .cs-card .bar{background:rgba(255,255,255,.18)}
.cs-stage .cs-rail .on .cs-card{background:var(--c);border-color:var(--c)}
.cs-stage .cs-ctl button{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#FFFFFF;backdrop-filter:blur(8px)}
.cs-stage .cs-ctl button:hover,.cs-stage .cs-ctl button:focus-visible{background:var(--marigold);border-color:var(--marigold);color:var(--ink)}

@media (max-width:1000px){
  .cs-stage .cs-visual{min-height:360px;order:-1}
  .cs-stage .cs-visual .cs-date{left:0;right:auto;top:30px}
  .cs-stage .cs-visual .cs-seal{bottom:30px}
  .cs-bg{bottom:auto;height:min(760px,100%)}
  .cs-bg:after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;z-index:5;background:linear-gradient(180deg,transparent,#1E1E1E)}
  .cs-scrim{background:linear-gradient(180deg,rgba(20,20,20,.45) 0,rgba(20,20,20,.2) 160px,rgba(20,20,20,.35) 360px,rgba(20,20,20,.9) 560px,#1E1E1E 760px)}
  .cs-bg .cs-slide[data-pos="0"],.cs-bg .cs-slide.leave{clip-path:circle(150% at 50% 30%)}
  .cs-bg .cs-slide,.cs-bg.intro .cs-slide[data-pos="0"]{clip-path:circle(0% at 50% 30%)}
}
@media (max-width:760px){
  .cs-stage .cs-visual{min-height:300px}
  .cs-bg{height:620px}
  .cs-scrim{background:linear-gradient(180deg,rgba(20,20,20,.4) 0,rgba(20,20,20,.15) 140px,rgba(20,20,20,.4) 300px,rgba(20,20,20,.92) 470px,#1E1E1E 620px)}
  .cs-pcap{font-size:10.5px;padding:6px 11px;bottom:6px}
}
@media (prefers-reduced-motion:reduce){.cs-bg .cs-slide,.cs-bg .cs-slide > .cs-img{transition:none!important}}

.cs-img{background-size:cover;background-repeat:no-repeat}