/* The standing "Order" button and its sheet (29.10.2026, after artlebedev.ru).
   Loaded by Frontend\OrderButton on every page that has its own <head>.
   Everything is scoped under .ob so it cannot leak into a case palette. */
.ob{--ob-ink:#0a0a0b;--ob-paper:#fff;--ob-red:#f13f3a;--ob-red-deep:#d92d28;--ob-mute:#6d6d74;--ob-line:#d6d6dc;
  --ob-ease:cubic-bezier(.165,.84,.44,1);--ob-spring:cubic-bezier(.34,1.56,.64,1);
  --ob-font:'Wix Madefor Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ob-display:'Alegreya Sans','Wix Madefor Text',system-ui,sans-serif}

/* The button is made of the site's own parts (owner, 29.10.2026: "in the
   style of the site"): the type and the hairline of the language chip in the
   top corner, a dark glass ground so it reads on a white case too, and on
   hover the inversion of the team@spng.space link — white with deep red. */
.ob-open{position:fixed;z-index:900;right:max(20px,env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1;
  color:#fff;background:rgba(14,15,17,.72);border:1px solid rgba(255,255,255,.28);border-radius:999px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .5s var(--ob-ease),transform .5s var(--ob-ease),color .2s,background-color .2s,border-color .2s}
.ob-open.on{opacity:1;transform:none;pointer-events:auto}
.ob-open::after{content:'';width:6px;height:6px;border-radius:50%;background:#f13f3a;order:-1}
.ob-open:hover,.ob-open:focus-visible{background:#fff;color:#4c0001;border-color:#fff;outline:0}
html.ob-lock .ob-open{opacity:0;pointer-events:none}

/* The dialog: a scrim over the page, the sheet from the left, the promise on
   the dimmed side. */
.ob-dlg{position:fixed;inset:0;z-index:1000}
.ob-dlg[hidden]{display:none}
.ob-scrim{position:absolute;inset:0;background:rgba(10,10,11,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .45s var(--ob-ease)}
.ob-sheet{position:absolute;top:0;left:0;bottom:0;width:min(780px,100vw);overflow-y:auto;overscroll-behavior:contain;
  background:var(--ob-paper);color:var(--ob-ink);font:400 16px/1.45 var(--ob-font);
  transform:translateX(-48px);opacity:0;transition:transform .7s var(--ob-ease),opacity .45s var(--ob-ease);
  scrollbar-width:thin;scrollbar-color:var(--ob-red) transparent}
.ob-sheet::-webkit-scrollbar{width:6px}
.ob-sheet::-webkit-scrollbar-thumb{background:var(--ob-red);border-radius:6px}
.ob-sheet::-webkit-scrollbar-track{background:transparent}
.ob-dlg.open .ob-scrim{opacity:1}
.ob-dlg.open .ob-sheet{transform:none;opacity:1}
.ob-dlg.closing .ob-sheet{transition-duration:.3s;transform:translateX(-24px);opacity:0}
.ob-dlg.closing .ob-scrim{transition-duration:.3s;opacity:0}

/* One screen on a desktop: the sheet is a column that fills the height, and
   the spacing is set in vh so a 768-px laptop and a 1080-px monitor both see
   the whole form without scrolling. */
.ob-in{min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,5vh,56px) 56px clamp(24px,4vh,44px)}
.ob-in>*{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ob-ease),transform .6s var(--ob-ease)}
.ob-dlg.open .ob-in>*{opacity:1;transform:none}
.ob-dlg.open .ob-in>:nth-child(2){transition-delay:.06s}
.ob-dlg.open .ob-in>:nth-child(3){transition-delay:.12s}

.ob-x{position:absolute;top:18px;right:18px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;cursor:pointer;color:var(--ob-ink);z-index:2;transition:background-color .2s,transform .35s var(--ob-ease)}
.ob-x::before,.ob-x::after{content:'';position:absolute;left:12px;right:12px;top:21px;height:2px;background:currentColor;border-radius:2px;transform:rotate(45deg)}
.ob-x::after{transform:rotate(-45deg)}
.ob-x:hover{background:#f1f1f3;transform:rotate(90deg)}
.ob-x:focus-visible{outline:2px solid var(--ob-red);outline-offset:2px}

.ob h2{margin:0 0 clamp(8px,1.4vh,14px);font:700 clamp(30px,4.6vh,44px)/1.02 var(--ob-display);letter-spacing:-.025em;color:var(--ob-ink)}
.ob-lede{margin:0 0 clamp(14px,2.6vh,26px);font-size:16px;line-height:1.45;color:#2a2a2e;max-width:40em}

.ob fieldset{border:0;margin:0 0 clamp(12px,2.2vh,22px);padding:0;min-width:0}
.ob legend{padding:0;margin:0 0 8px;font-size:12px;color:var(--ob-mute);letter-spacing:.02em}

/* What is needed: the six families of services in a row; a family opens its
   services underneath, several can be ticked, the family keeps a count. */
.ob-fams{display:flex;flex-wrap:wrap;gap:6px}
.ob-fam{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border:1.5px solid var(--ob-line);border-radius:100px;background:transparent;cursor:pointer;
  font:600 14px/1.2 var(--ob-display);color:var(--ob-ink);transition:border-color .2s,background-color .2s,color .2s,transform .25s var(--ob-spring)}
.ob-fam:hover{border-color:var(--ob-ink)}
.ob-fam[aria-expanded='true']{background:var(--ob-ink);border-color:var(--ob-ink);color:#fff}
.ob-fam:focus-visible{outline:2px solid var(--ob-red);outline-offset:2px}
.ob-fam:active{transform:scale(.95)}
.ob-count{min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:var(--ob-red);color:#fff;font:700 11px/18px var(--ob-display);text-align:center}
.ob-count:empty{display:none}
.ob-svc{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-left:12px;border-left:2px solid var(--ob-red);animation:ob-open-svc .35s var(--ob-ease)}
.ob-svc[hidden]{display:none}
@keyframes ob-open-svc{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ob-chip,.ob-tab{position:relative;cursor:pointer}
.ob-chip input,.ob-tab input{position:absolute;opacity:0;width:1px;height:1px}
.ob-chip span{display:inline-block;padding:7px 13px;border:1.5px solid var(--ob-line);border-radius:100px;font-size:14px;line-height:1.2;color:var(--ob-ink);
  transition:border-color .2s,background-color .2s,color .2s,transform .25s var(--ob-spring)}
.ob-chip:hover span{border-color:var(--ob-ink)}
.ob-chip input:checked+span{background:var(--ob-red);border-color:var(--ob-red);color:#fff}
.ob-chip input:focus-visible+span,.ob-tab input:focus-visible+span{outline:2px solid var(--ob-red);outline-offset:2px}
.ob-chip:active span{transform:scale(.94)}

/* Budget: three brackets in a strip, as on the reference. */
.ob-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;background:#f1f1f3;border-radius:14px;padding:3px}
.ob-tab span{display:block;height:100%;box-sizing:border-box;padding:9px 12px 10px;border-radius:11px;transition:background-color .25s,color .25s,box-shadow .25s}
.ob-tab b{display:block;font:700 14px/1.2 var(--ob-display);margin-bottom:3px}
.ob-tab small{display:block;font-size:12px;line-height:1.3;color:var(--ob-mute);transition:color .25s}
.ob-tab:hover span{background:#fff}
.ob-tab input:checked+span{background:var(--ob-red);color:#fff;box-shadow:0 8px 18px -10px rgba(241,63,58,.9)}
.ob-tab input:checked+span small{color:rgba(255,255,255,.85)}

/* Fields: an underline and a label that lifts — never a placeholder standing
   in for the label. */
.ob-f{position:relative;margin:0 0 clamp(8px,1.6vh,16px);padding-top:16px;min-width:0}
.ob-f input,.ob-f textarea{display:block;width:100%;box-sizing:border-box;margin:0;padding:6px 0 8px;border:0;border-bottom:1.5px solid var(--ob-line);border-radius:0;
  background:transparent;color:var(--ob-ink);font:400 17px/1.4 var(--ob-font);outline:0;transition:border-color .25s;resize:none}
.ob-f textarea{min-height:38px;max-height:22vh;overflow:auto}
.ob-f label{position:absolute;left:0;top:22px;max-width:100%;font-size:17px;color:var(--ob-mute);pointer-events:none;transform-origin:0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:transform .3s var(--ob-ease),color .25s}
.ob-f input:focus,.ob-f textarea:focus{border-bottom-color:var(--ob-ink)}
.ob-f input:focus+label,.ob-f textarea:focus+label,
.ob-f input:not(:placeholder-shown)+label,.ob-f textarea:not(:placeholder-shown)+label{transform:translateY(-22px) scale(.72)}
.ob-f.bad input,.ob-f.bad textarea{border-bottom-color:var(--ob-red)}
.ob-err{margin:5px 0 0;font-size:13px;line-height:1.3;color:var(--ob-red-deep)}
.ob-err:empty{display:none}
.ob-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px}
.ob-f-password input{padding-right:36px}
.ob-eye{position:absolute;right:-6px;top:18px;width:40px;height:40px;border:0;background:transparent;cursor:pointer;color:var(--ob-mute)}
.ob-eye::before{content:'';position:absolute;inset:13px 10px;border:1.6px solid currentColor;border-radius:60% 10%;transform:rotate(45deg)}
.ob-eye::after{content:'';position:absolute;left:17px;top:17px;width:6px;height:6px;border-radius:50%;background:currentColor}
.ob-eye[aria-pressed='true']{color:var(--ob-red)}
.ob-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ob-alert{margin:0 0 10px;color:var(--ob-red-deep);font-size:14px}
.ob-alert:empty{display:none}

.ob-foot{display:flex;align-items:center;gap:22px;margin-top:clamp(6px,1.4vh,14px)}
.ob-send{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:56px;padding:0 30px;border:0;border-radius:100px;cursor:pointer;
  background:var(--ob-red);color:#fff;font:700 16px/1 var(--ob-display);text-decoration:none;overflow:hidden;
  transition:background-color .25s,transform .35s var(--ob-spring),box-shadow .25s}
.ob-send i{width:18px;height:2px;background:currentColor;position:relative;transition:transform .35s var(--ob-ease)}
.ob-send i::after{content:'';position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.ob-send:hover{background:var(--ob-red-deep);box-shadow:0 14px 30px -12px rgba(241,63,58,.75)}
.ob-send:hover i{transform:translateX(5px)}
.ob-send:active{transform:scale(.96,1.03)}
.ob-send:focus-visible{outline:2px solid var(--ob-ink);outline-offset:3px}
.ob-send[disabled]{cursor:progress;opacity:.75}
.ob-send.busy i{animation:ob-busy 1s linear infinite}
@keyframes ob-busy{0%{transform:translateX(-4px)}50%{transform:translateX(6px)}100%{transform:translateX(-4px)}}
.ob-fine{margin:0;font-size:12px;line-height:1.45;color:var(--ob-mute);max-width:30em}
.ob-fine a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ob-fine a:hover{color:var(--ob-ink)}

/* What happens next: white on the dimmed side of the page on wide screens,
   at the foot of the sheet on narrow ones. */
.ob-aside{position:absolute;left:min(780px,100vw);right:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding:64px clamp(40px,6vw,96px);
  color:#fff;opacity:0;transform:translateX(20px);transition:opacity .6s var(--ob-ease) .15s,transform .7s var(--ob-ease) .15s;pointer-events:none}
.ob-dlg.open .ob-aside{opacity:1;transform:none}
.ob-dlg.closing .ob-aside{opacity:0;transition-delay:0s;transition-duration:.25s}
.ob-next{margin:0 0 24px;font:600 13px/1 var(--ob-display);letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.ob-steps{list-style:none;margin:0;padding:0;max-width:420px}
.ob-steps li{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:baseline;padding:18px 0;border-top:1px solid rgba(255,255,255,.18)}
.ob-steps li:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.ob-steps b{font:700 40px/1 var(--ob-display);letter-spacing:-.03em;color:var(--ob-red)}
.ob-steps span{font-size:17px;line-height:1.45}
.ob-inline-next{display:none;margin-top:40px}
.ob-inline-next .ob-next{opacity:1;color:var(--ob-mute)}
.ob-inline-next .ob-steps li{border-color:var(--ob-line)}
.ob-inline-next .ob-steps b{font-size:26px}
.ob-inline-next .ob-steps span{font-size:15px}
@media (max-width:1159px){.ob-aside{display:none}.ob-inline-next{display:block}}

/* Done. */
.ob-done:focus{outline:0}
.ob-check{position:relative;width:72px;height:72px;border-radius:50%;background:var(--ob-red);margin:0 0 28px;transform:scale(.4);opacity:0;transition:transform .6s var(--ob-spring),opacity .3s}
.ob-check::after{content:'';position:absolute;left:25px;top:18px;width:16px;height:30px;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg)}
.ob-done.in .ob-check{transform:none;opacity:1}
.ob-done-h{margin:0 0 14px;font:700 clamp(26px,3.6vw,34px)/1.1 var(--ob-display);letter-spacing:-.02em}
.ob-done-p{margin:0 0 32px;font-size:18px;line-height:1.5;color:#2a2a2e;max-width:32em}
.ob-done-p b{font-weight:600;color:var(--ob-ink);word-break:break-all}
.ob-later{display:block;margin-top:18px;padding:8px 0;border:0;background:none;font:500 15px/1.2 var(--ob-font);color:var(--ob-mute);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ob-later:hover{color:var(--ob-ink)}

@media (max-width:760px){
  .ob-in{justify-content:flex-start;padding:56px 20px calc(32px + env(safe-area-inset-bottom))}
  .ob-x{top:10px;right:8px}
  .ob-trio{grid-template-columns:minmax(0,1fr)}
  .ob-tabs{grid-template-columns:minmax(0,1fr)}
  .ob-foot{flex-direction:column;align-items:stretch;gap:14px}
  .ob-send{width:100%}
}
@media (max-width:640px){
  .ob-open{right:max(14px,env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom))}
  .ob-chip span{font-size:14px;padding:7px 12px}
}
@media (prefers-reduced-motion:reduce){
  .ob *,.ob *::before,.ob *::after{transition-duration:.01ms!important;animation:none!important}
  .ob-sheet,.ob-in>*,.ob-aside{transform:none!important}
}