#loop{height:400vh}
#loop .lp-bleed{position:absolute;inset:0;z-index:5;pointer-events:none;background:var(--void);opacity:1}
#loop .lp-stage{background:radial-gradient(ellipse 70% 80% at 66% 50%,#111a33 0%,#0d1326 38%,var(--void) 72%)}
#loop .gl{z-index:0;cursor:grab;touch-action:pan-y}
#loop .gl.drag{cursor:grabbing}
#loop .lp-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,15,28,.9) 0%,rgba(11,15,28,.55) 26%,rgba(11,15,28,0) 46%),
             linear-gradient(0deg,rgba(11,15,28,.7) 0%,rgba(11,15,28,0) 22%)}
#loop .lp-labels{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
#loop .lp-lab{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity;font:700 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--paper);white-space:nowrap}
#loop .lp-lab span{position:absolute;left:0;top:0;padding:4px 6px;background:rgba(11,15,28,.55);border-left:1px solid var(--orange);transform:translate(12px,-50%)}
#loop .lp-lab[data-side="l"] span{transform:translate(calc(-100% - 12px),-50%);border-left:0;border-right:1px solid var(--orange)}
#loop .lp-lab[data-side="t"] span{transform:translate(-50%,calc(-100% - 10px))}
#loop .lp-lab[data-side="b"] span{transform:translate(-50%,10px)}
#loop .lp-lab.in span{border-color:var(--teal)}
#loop .lp-lab.india{font-size:11px;color:var(--orange-hi)}
#loop .lp-lab.india span{background:none;border:0;letter-spacing:.42em}

#loop .lp-ui{position:absolute;inset:0;z-index:3;pointer-events:none}
#loop .lp-top{position:absolute;left:var(--gut);top:clamp(84px,13vh,124px)}
#loop .lp-sub{margin-top:12px;font:400 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mute-d);padding-left:42px}

#loop .lp-copy{position:absolute;left:var(--gut);top:52%;transform:translateY(-50%);width:min(40vw,600px)}
#loop .lp-index{max-width:520px;list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:34px;transition:opacity .6s}
#loop .lp-index li{font:700 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute-d);opacity:.55;transition:opacity .4s,color .4s}
#loop .lp-index li i{display:block;height:2px;background:var(--line-d);margin-bottom:12px;position:relative;overflow:hidden}
#loop .lp-index li i:after{content:"";position:absolute;inset:0;background:var(--orange);transform:scaleX(var(--f,0));transform-origin:0 50%}
#loop .lp-index li.on{opacity:1;color:var(--paper)}
#loop .lp-index li.done{opacity:.85}
#loop .lp-index li b{font-weight:700;color:inherit}

#loop .lp-steps{display:grid}
#loop .lp-step{grid-area:1/1;align-self:center}
#loop.lp-live .lp-step{opacity:0;will-change:opacity,transform}
#loop .lp-k{font:700 12px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--orange);margin-bottom:18px}
#loop .lp-t{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.45vw,40px);line-height:1.08;letter-spacing:-.028em;color:var(--paper);max-width:17ch;text-wrap:balance}
#loop .lp-t em{font-style:normal;color:var(--mute-d)}
#loop .lp-final .h2{font-size:clamp(40px,5.2vw,84px);max-width:9.5ch;text-wrap:balance}

#loop .lp-chipbar{margin-top:40px;width:max-content;max-width:min(48vw,680px);display:flex;align-items:center;gap:18px;flex-wrap:wrap}
#loop.lp-live .lp-chipbar{opacity:0}
#loop .lp-chips{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 0}
#loop .lp-chips li{font:700 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute-d);padding:8px 8px;border:1px solid var(--line-d);transition:color .35s,border-color .35s,background .35s,box-shadow .35s;white-space:nowrap}
#loop .lp-chips li{position:relative;margin-right:19px}
#loop .lp-chips li:before{content:"→";position:absolute;right:-16px;top:50%;transform:translateY(-50%);color:var(--mute-d);opacity:.6;letter-spacing:0}
#loop .lp-chips li:last-child:before{content:"↺";right:-19px;font-size:15px;color:var(--orange);opacity:1}
#loop .lp-chips li.on{color:#fff;border-color:var(--orange);background:rgba(227,91,50,.16);box-shadow:0 0 22px rgba(227,91,50,.35)}
#loop .lp-lap{flex-basis:100%;font:400 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mute-d)}
#loop .lp-lap b{color:var(--orange-hi);font-weight:700}

@media (max-width:899px){
  #loop .lp-shade{background:linear-gradient(0deg,rgba(11,15,28,.96) 0%,rgba(11,15,28,.88) 34%,rgba(11,15,28,0) 52%),linear-gradient(180deg,rgba(11,15,28,.6) 0%,rgba(11,15,28,0) 18%)}
  #loop .lp-stage{background:radial-gradient(ellipse 90% 50% at 50% 32%,#111a33 0%,var(--void) 75%)}
  #loop .lp-top{top:84px;left:16px}
  #loop .lp-sub{display:none}
  #loop .lp-copy{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;padding:0 16px calc(22px + env(safe-area-inset-bottom))}
  #loop .lp-index{margin-bottom:18px;gap:6px}
  #loop .lp-index li{font-size:9px;letter-spacing:.12em;white-space:nowrap}
  #loop .lp-index li:not(.on) span{font-size:0}
  #loop .lp-index li:not(.on) span b{font-size:9px}
  #loop .lp-index li i{margin-bottom:8px}
  #loop .lp-k{font-size:10.5px;margin-bottom:10px}
  #loop .lp-t{font-size:clamp(21px,5.8vw,28px);max-width:22ch}
  #loop .lp-final .h2{font-size:clamp(36px,10.4vw,56px)}
  #loop .lp-chipbar{margin-top:18px;gap:10px}
  #loop .lp-chips li{font-size:8.5px;letter-spacing:.1em;padding:6px 7px;margin-right:16px}
  #loop .lp-chips li:before{right:-13px}
  #loop .lp-chips li:last-child:before{right:-15px}
  #loop .lp-lab{font-size:8.5px;letter-spacing:.12em}
  #loop .lp-lab span{padding:3px 4px}
}
@media (max-width:899px) and (min-width:600px){
  #loop .lp-copy{padding-left:var(--gut);padding-right:var(--gut)}
}
#loop .lp-lab.region{font-size:11px;letter-spacing:.3em;color:#ffd2bf}
#loop .lp-lab.region span{background:none;border:0;transform:translate(-50%,-50%);text-shadow:0 0 14px rgba(11,15,28,.9),0 0 3px rgba(11,15,28,.9)}
@media (max-width:899px){#loop .lp-lab.region{font-size:8.5px;letter-spacing:.18em}}
#loop .lp-lab.office{color:#ffd9c9}
#loop .lp-lab.office span{border-color:var(--orange-hi);background:rgba(227,91,50,.18)}
#loop .lp-legend{position:absolute;right:calc(var(--gut) + 40px);bottom:32px;display:flex;gap:22px;opacity:0;font:400 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute-d)}
#loop .lp-legend span{display:flex;align-items:center;gap:9px}
#loop .lp-legend i{display:block;width:8px;height:8px}
#loop .lp-legend i.d{background:var(--orange-hi);transform:rotate(45deg);box-shadow:0 0 8px var(--orange)}
#loop .lp-legend i.c{border:1.5px solid var(--orange);border-radius:50%;width:9px;height:9px}
@media (max-width:899px){
  #loop .lp-legend{right:16px;bottom:auto;top:86px;flex-direction:column;align-items:flex-end;gap:8px;font-size:8.5px;letter-spacing:.14em}
}
@media (max-width:899px){#loop .lp-chipbar{width:auto;max-width:none}}