/* Galaxy branches page (/branches, /branches-ru). Tokens from galaxy-2.css.
   Marker colour = card colour: Dubai puck orange (open), Jakarta ice cyan (opening). */
.br-hero{position:relative;overflow:hidden;isolation:isolate;padding-top:clamp(92px,10vw,124px);padding-bottom:clamp(40px,6vw,88px);
  background:radial-gradient(70% 80% at 70% 46%,oklch(0.22 0.09 300) 0,transparent 70%),oklch(0.12 0.03 300)}
.br{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:var(--s-6) var(--s-5);align-items:center;min-height:calc(100svh - 230px)}
.br-copy h1{font-size:clamp(38px,4.1vw,76px);line-height:1;max-width:none;margin-top:var(--s-4);overflow-wrap:break-word}
.br-copy h1.h1-ru{font-size:clamp(38px,4.6vw,84px)}
.br-copy .lead{margin-top:var(--s-5);max-width:40ch}
.br-stats{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;gap:var(--s-5) clamp(24px,3.4vw,56px);margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line)}
.br-stats b{display:block;font:700 clamp(32px,3.6vw,58px)/.9 var(--f-display);font-stretch:151%;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.br-stats span{display:block;margin-top:10px;font:500 12px/1.35 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--mist);max-width:14ch}

.br-stage{position:relative;aspect-ratio:1/1;width:min(100%,calc(100svh - 120px),880px);margin:0 auto 34px}
.br-stage canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:pan-y;opacity:0;transition:opacity 1.4s var(--ease)}
.br-stage.ready canvas{opacity:1}
.br-stage.drag canvas{cursor:grabbing}
.br-stage.failed::after{content:"";position:absolute;inset:14%;border-radius:50%;box-shadow:0 0 0 1px var(--line-2) inset}
.br-hint{position:absolute;left:0;right:0;bottom:-34px;text-align:center;font-size:13px;color:var(--dim);pointer-events:none}

.br-pins{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease) .6s}
.br-stage.ready .br-pins{opacity:1}
.br-pin{position:absolute;left:0;top:0;width:0;height:0;pointer-events:auto;will-change:transform;transition:opacity .45s var(--ease);outline-offset:14px}
.br-pin::before{content:"";position:absolute;left:0;bottom:8px;width:1px;height:30px;background:var(--c);opacity:.7}
.br-pin::after{content:"";position:absolute;left:-24px;top:-24px;width:48px;height:48px;border-radius:50%}
.br-lab{position:absolute;bottom:38px;display:block;white-space:nowrap;padding:9px 13px 10px;border-radius:var(--r);
  background:oklch(0.13 0.03 300 / .88);box-shadow:0 0 0 1px var(--line-2);transition:box-shadow .4s var(--ease)}
.br-pin[data-pos="b"]::before{bottom:auto;top:8px}
.br-pin[data-pos="b"] .br-lab{bottom:auto;top:38px}
.br-pin[data-side="r"] .br-lab{left:-1px}
.br-pin[data-side="l"] .br-lab{right:0}
.br-pin[data-side="l"] .br-lab{text-align:right}
.br-pin.is-on .br-lab,.br-pin:focus-visible .br-lab{box-shadow:0 0 0 1px var(--c)}
.br-lab b{display:block;font:700 13px/1.1 var(--f-display);font-stretch:140%;letter-spacing:.07em;text-transform:uppercase;color:var(--snow)}
.br-lab i{display:block;margin-top:5px;font:500 12px/1.2 var(--f-body);font-style:normal;color:var(--mist)}

.br-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
.br-card{position:relative;display:flex;flex-direction:column;gap:var(--s-5);padding:clamp(24px,3.2vw,44px);border-radius:var(--r);background:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .5s var(--ease),background .5s var(--ease)}
.br-card:hover,.br-card.is-on,.br-card:focus-within{box-shadow:inset 0 0 0 1px var(--c);background:var(--ink-3)}
.br-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.br-n{font:300 15px/1 var(--f-display);font-stretch:151%;letter-spacing:.08em;color:var(--dim);font-variant-numeric:tabular-nums}
.br-chip{display:inline-flex;align-items:flex-start;gap:10px;font:500 12px/1.35 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--snow)}
.br-dot{position:relative;flex:none;margin-top:3px;width:9px;height:9px;border-radius:50%;background:var(--c)}
.br-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--c);opacity:0;animation:brpulse 2.6s var(--ease) infinite}
@keyframes brpulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.br-card h3{font-size:clamp(44px,5.4vw,84px);line-height:.95;margin-top:var(--s-2)}
.br-card .br-ctry{margin-top:var(--s-3)}
.br-desc{color:var(--mist);max-width:44ch}
.br-facts{display:grid;gap:0;border-top:1px solid var(--line);margin-top:var(--s-2)}
.br-facts div{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:var(--s-4);padding:14px 0;border-bottom:1px solid var(--line)}
.br-facts dt{font:500 12px/1.5 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.br-facts dd{color:var(--snow);font-size:16px;line-height:1.5}
.br-go{margin-top:auto;padding-top:var(--s-3)}
.br-go .btn{position:static}
.br-go .btn::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.br-end{text-align:center}
.br-end h2{max-width:14ch;margin-inline:auto}
.br-end p{color:var(--mist);margin:var(--s-5) auto var(--s-6);max-width:44ch}
.br-end .btn-row{justify-content:center}

@media (max-width:900px){
  .br{grid-template-columns:1fr;min-height:0}
  .br-copy h1{font-size:clamp(40px,9.2vw,72px)}
  .br-copy h1.h1-ru{font-size:clamp(40px,10vw,76px)}
  .br-stage{width:min(100%,640px)}
  .br-cards{grid-template-columns:1fr}
}
@media (max-width:520px){
  .br-stats{gap:var(--s-5) var(--s-5)}
  .br-stats span{font-size:11px;letter-spacing:.1em}
  .br-facts div{grid-template-columns:1fr;gap:4px}
  .br-lab{padding:7px 10px 8px}
  .br-lab b{font-size:12px}
  .br-lab i{font-size:11px}
}
@media (prefers-reduced-motion:reduce){.br-dot::after{animation:none;opacity:.5;transform:scale(1.1)}}
