.dotc { position: fixed; z-index: 40; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--dotc, #B3121F); pointer-events: none; opacity: 0; transition: opacity .2s, width .25s cubic-bezier(.2, .7, .2, 1), height .25s cubic-bezier(.2, .7, .2, 1), margin .25s cubic-bezier(.2, .7, .2, 1); }
.dotc.on { opacity: 1; }
.dotc.big { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
.dotc.down { width: 44px; height: 28px; margin: -14px 0 0 -22px; }
@media (hover: hover) and (pointer: fine) { .s-phone.dotted, .s-phone.dotted .obj { cursor: none; } .s-phone.dotted a, .s-phone.dotted button { cursor: pointer; } }
.narrow { position: relative; width: min(240px, 100%); height: 46px; margin-top: 18px; }
.narrow i { position: absolute; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #B3121F);
  transition: left .9s cubic-bezier(.2, .7, .2, 1), width .9s cubic-bezier(.2, .7, .2, 1), height .9s cubic-bezier(.2, .7, .2, 1), top .9s cubic-bezier(.2, .7, .2, 1); }
.narrow .lab { position: absolute; left: 0; bottom: 0; font-family: "Poiret One", var(--sans); font-size: 15px; letter-spacing: .02em; white-space: nowrap; }
.narrow .lab b { font-weight: 400; transition: opacity .4s; }
.narrow .to { opacity: 0; transition: opacity .5s .6s; }
.narrow.done .to { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .shots li { transition: transform .4s cubic-bezier(.2, .7, .2, 1), opacity .4s; position: relative; }
  .shots:hover li { opacity: .5; }
  .shots li:hover { opacity: 1; transform: scale(1.14); z-index: 2; }
}
@media (prefers-reduced-motion: reduce) { .narrow i, .shots li, .dotc { transition: none; } }