/* Quiet web-design texture: a grid, interface outlines and travelling signals. */
.services--hover { position:relative; isolation:isolate; --pattern-play:paused; background:linear-gradient(120deg,#f0f2f6,#f7f7f9 52%,#f1f2f6); }
.services--hover.pattern-visible:not(.pattern-paused) { --pattern-play:running; }
.services--hover>.services__inner { position:relative; z-index:1; }
.web-pattern { position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none; user-select:none; }
.web-pattern__grid { position:absolute; inset:-1px; background-image:linear-gradient(#15223810 1px,transparent 1px),linear-gradient(90deg,#15223810 1px,transparent 1px); background-size:74px 74px; mask-image:linear-gradient(90deg,#000b,transparent 33%,transparent 68%,#000b); }
.web-pattern__dots { position:absolute; inset:0; background-image:radial-gradient(#15223825 1px,transparent 1px); background-size:37px 37px; mask-image:linear-gradient(0deg,#0008,transparent 48%,#0005); }
.web-pattern__code { position:absolute; font:300 clamp(30px,4vw,66px)/1 ui-monospace,monospace; letter-spacing:-.09em; color:#781f381c; animation:pattern-drift 13s ease-in-out infinite; animation-play-state:var(--pattern-play); }
.web-pattern__code--first { top:19%; left:1.5%; transform:rotate(-12deg); }
.web-pattern__code--second { top:48%; right:1.4%; color:#1522381c; animation-delay:-5s; }
.web-pattern__code--third { bottom:8%; left:6%; font-size:36px; animation-delay:-9s; }
.web-pattern__wireframe { position:absolute; width:220px; height:154px; border:1px solid #1522381a; border-radius:7px; padding:40px 15px 15px; display:grid; grid-template-columns:1.1fr 1fr; grid-template-rows:1fr 1fr; gap:9px; animation:pattern-wireframe 18s ease-in-out infinite; animation-play-state:var(--pattern-play); }
.web-pattern__wireframe>span { position:absolute; top:0; left:0; right:0; height:22px; border-bottom:1px solid #15223818; }
.web-pattern__wireframe>span::before { content:'•••'; position:absolute; top:0; left:9px; color:#15223826; font-size:13px; letter-spacing:2px; }
.web-pattern__wireframe>i { border:1px solid #15223814; border-radius:2px; }
.web-pattern__wireframe>i:first-of-type { grid-row:1/3; }
.web-pattern__wireframe--first { top:3%; right:-65px; transform:rotate(12deg); }
.web-pattern__wireframe--second { bottom:14%; left:-120px; width:250px; height:175px; animation-delay:-8s; }
.web-pattern__beam { position:absolute; width:1px; height:175px; background:linear-gradient(transparent,#c947166e,transparent); animation:pattern-signal 12s linear infinite; animation-play-state:var(--pattern-play); }
.web-pattern__beam--first { top:-175px; left:73px; }
.web-pattern__beam--second { top:-175px; right:73px; background:linear-gradient(transparent,#781f3860,transparent); animation-delay:-7s; animation-duration:16s; }
.web-pattern__beam--third { width:190px; height:1px; top:auto; bottom:73px; left:-190px; background:linear-gradient(90deg,transparent,#c9471660,transparent); animation-name:pattern-signal-horizontal; animation-duration:20s; animation-delay:-10s; }
.web-pattern__node { position:absolute; width:7px; height:7px; border:1px solid #781f384d; background:#f4f5f8; border-radius:50%; box-shadow:0 0 0 6px #781f3805; animation:pattern-node 5s ease-in-out infinite; animation-play-state:var(--pattern-play); }
.web-pattern__node--first { top:221px; left:70px; }.web-pattern__node--second { bottom:70px; right:144px; animation-delay:-2s; border-color:#c9471659; }
.web-pattern-control { position:absolute; top:19px; right:max(var(--page-gutter),calc((100% - var(--container))/2)); z-index:2; display:grid; place-items:center; width:32px; height:32px; border:1px solid #1522381c; border-radius:50%; background:#ffffff8c; color:#596375; font:400 14px/1 var(--font-sans); cursor:pointer; }
.web-pattern-control:hover { color:var(--color-bordeaux); border-color:#781f3850; background:#fff; }
.web-pattern-control:disabled { opacity:.45; cursor:default; }
@keyframes pattern-drift { 0%,100%{translate:0 0;rotate:-7deg;opacity:.7} 50%{translate:7px -19px;rotate:4deg;opacity:1} }
@keyframes pattern-wireframe { 0%,100%{translate:0 0;rotate:8deg;opacity:.7} 50%{translate:-8px 14px;rotate:2deg;opacity:1} }
@keyframes pattern-signal { from{transform:translateY(0)} to{transform:translateY(1600px)} }
@keyframes pattern-signal-horizontal { from{transform:translateX(0)} to{transform:translateX(1900px)} }
@keyframes pattern-node { 0%,100%{scale:.8;opacity:.4} 50%{scale:1.15;opacity:.85} }
@media(max-width:767px) {
  .web-pattern__grid { background-size:56px 56px; mask-image:linear-gradient(90deg,#0008,transparent 25%,transparent 80%,#0008); }
  .web-pattern__code--first { left:-18px; font-size:36px; }
  .web-pattern__code--second { right:-16px; font-size:40px; }
  .web-pattern__code--third { left:9px; font-size:25px; }
  .web-pattern__wireframe--first { width:150px; right:-95px; }
  .web-pattern__wireframe--second { left:-190px; }
  .web-pattern__beam--first { left:55px; }.web-pattern__beam--second { right:55px; }
  .web-pattern__node--first { left:52px; }.web-pattern__node--second { right:52px; }
  .web-pattern__dots { opacity:.5; }
}
@media(prefers-reduced-motion:reduce) { .web-pattern * { animation:none!important; } }