:root{
  --motion-accent:var(--chapter,#ff405e);
  --motion-progress:0;
  --motion-local:0;
  --live-x:0px;
  --live-y:0px;
  --live-rotate:-12deg;
  --live-scale:1;
  --live-counter-rotate:12deg;
}


.scroll-progress{display:none!important}
html{scroll-padding-top:calc(var(--header) + 14px)}


.signature-scroll{
  position:fixed;
  z-index:68;
  top:50%;
  right:18px;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  pointer-events:auto;
  opacity:.82;
  transition:opacity .3s ease;
}
.signature-scroll:hover{opacity:1}
.signature-scroll__label{
  position:absolute;
  right:30px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  pointer-events:none;
  font-size:7px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:#9aa2ad;
  opacity:.56;
  transform:translate(-2px,-50%);
  transition:opacity .25s ease,transform .25s ease;
}
.signature-scroll:hover .signature-scroll__label,
.signature-scroll:focus-within .signature-scroll__label{opacity:1;transform:translate(-4px,-50%)}
.signature-scroll__index{color:var(--motion-accent);font-variant-numeric:tabular-nums}
.signature-scroll__track{
  position:relative;
  width:28px;
  height:min(38vh,360px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
}
.signature-scroll__track::before{
  content:"";
  position:absolute;
  top:14px;
  bottom:14px;
  left:50%;
  width:1px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.11);
}
.signature-scroll__progress{
  position:absolute;
  top:14px;
  bottom:14px;
  left:50%;
  width:1px;
  transform:translateX(-50%);
  transform-origin:top;
  background:linear-gradient(to bottom,var(--motion-accent),color-mix(in srgb,var(--motion-accent) 42%,transparent));
  transform:translateX(-50%) scaleY(var(--motion-progress));
  transition:background .55s ease,transform .12s linear;
  box-shadow:0 0 12px color-mix(in srgb,var(--motion-accent) 30%,transparent);
  pointer-events:none;
}
.signature-scroll__chapters{
  position:relative;
  z-index:2;
  width:28px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
}
.signature-scroll__chapter{
  appearance:none;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.signature-scroll__chapter::before{
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:#5f6670;
  border:1px solid transparent;
  transition:width .28s ease,height .28s ease,background .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.signature-scroll__chapter:hover::before,
.signature-scroll__chapter:focus-visible::before{width:7px;height:7px;background:#c9ced5}
.signature-scroll__chapter.is-active::before{
  width:8px;
  height:8px;
  background:var(--motion-accent);
  border-color:color-mix(in srgb,var(--motion-accent) 65%,white 18%);
  box-shadow:0 0 18px color-mix(in srgb,var(--motion-accent) 58%,transparent);
}
.signature-scroll__chapter:focus-visible{outline:1px solid var(--yellow);outline-offset:2px;border-radius:999px}


.living-system{
  position:fixed;
  z-index:7;
  right:clamp(78px,7vw,132px);
  bottom:clamp(34px,6vh,72px);
  width:clamp(136px,12vw,198px);
  aspect-ratio:1;
  pointer-events:none;
  color:var(--motion-accent);
  opacity:.31;
  transform:translate3d(var(--live-x),var(--live-y),0) rotate(var(--live-rotate)) scale(var(--live-scale));
  transform-origin:50% 50%;
  transition:color .65s ease,opacity .4s ease,transform .32s cubic-bezier(.2,.72,.2,1);
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 18px color-mix(in srgb,currentColor 15%,transparent));
}
.living-system__orbit{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid color-mix(in srgb,currentColor 50%,transparent);
  border-radius:50%;
  transform:translate(-50%,-50%);
  opacity:.65;
}
.living-system__orbit--1{width:92%;height:39%;transform:translate(-50%,-50%) rotate(14deg);animation:umpOrbitA 8s ease-in-out infinite alternate}
.living-system__orbit--2{width:72%;height:72%;transform:translate(-50%,-50%) rotate(-25deg);opacity:.38;animation:umpOrbitB 10s ease-in-out infinite alternate}
.living-system__orbit--3{width:44%;height:94%;transform:translate(-50%,-50%) rotate(35deg);opacity:.26;animation:umpOrbitA 12s ease-in-out infinite alternate-reverse}
.living-system__axis{
  position:absolute;
  left:50%;top:9%;bottom:9%;width:1px;
  background:linear-gradient(to bottom,transparent,color-mix(in srgb,currentColor 52%,transparent),transparent);
  opacity:.5;
  transform:rotate(var(--live-counter-rotate));
}
.living-system__core{
  position:absolute;
  left:50%;top:50%;
  width:42px;height:42px;
  transform:translate(-50%,-50%) rotate(var(--live-counter-rotate));
  display:grid;place-items:center;
  border:1px solid color-mix(in srgb,currentColor 48%,transparent);
  border-radius:50%;
  background:rgba(7,9,13,.72);
  color:#f4f5f6;
  font-size:8px;
  font-weight:700;
  letter-spacing:.12em;
  box-shadow:0 0 32px rgba(0,0,0,.32);
}
.living-system__core::after{
  content:"";
  position:absolute;
  right:2px;top:3px;
  width:5px;height:5px;border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 12px rgba(220,219,38,.6);
}
.living-system__node{position:absolute;width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;opacity:.75}
.living-system__node--1{left:6%;top:48%}
.living-system__node--2{right:11%;top:26%}
.living-system__node--3{right:24%;bottom:9%;background:var(--yellow);box-shadow:0 0 10px rgba(220,219,38,.6)}

@keyframes umpOrbitA{from{transform:translate(-50%,-50%) rotate(8deg) scaleX(.96)}to{transform:translate(-50%,-50%) rotate(21deg) scaleX(1.04)}}
@keyframes umpOrbitB{from{transform:translate(-50%,-50%) rotate(-30deg) scaleY(.96)}to{transform:translate(-50%,-50%) rotate(-17deg) scaleY(1.04)}}


.chapter{
  --chapter-local:0;
}
.chapter.is-motion-current::selection{background:var(--motion-accent);color:#080b10}
.chapter .eyebrow{transition:color .45s ease}
.chapter.is-motion-current .eyebrow{color:color-mix(in srgb,var(--motion-accent) 76%,white 24%)}


.chapter.is-motion-current .service-visual img,
.chapter.is-motion-current .oman-media img{
  filter:saturate(1.03) contrast(1.015);
}


.services-page .living-system{opacity:.25}
.services-page .signature-scroll__label{background:rgba(7,9,13,.76);padding:7px 9px;border:1px solid rgba(255,255,255,.07)}

@media(max-width:1180px){
  .signature-scroll{right:9px}
  .living-system{right:55px;opacity:.22}
}
@media(max-width:980px){
  .signature-scroll,.living-system{display:none}
}
@media(prefers-reduced-motion:reduce){
  .living-system__orbit{animation:none!important}
  .living-system{transition:color .2s linear;transform:none!important}
  .signature-scroll__progress,.signature-scroll__chapter::before{transition:none}
}