/* OMQ 3D · v25 — page ruler in the getartcraft.com manner (desktop only, body.omq-has-ruler: home, services, repair).
   At rest the tape is 1:1 with the page and the needle slides down the screen like a scrollbar; hovering the
   strip squeezes the whole page (0–100) into the screen height, shows the viewport window and lays the section
   names out along the tape. Logical properties: inset-inline-start = right in Arabic, left in English. */
.omq-ruler{font-family:var(--f-body);box-sizing:border-box;letter-spacing:0}
.omq-ruler *{box-sizing:border-box}
.omq-ruler{display:none}
.omq-has-ruler #main{min-width:0}
.omq-has-ruler [data-omq-section]{scroll-margin-top:calc(var(--omq-header-height,64px) + 24px)}
.omq-ruler a{text-decoration:none}
.omq-ruler a:focus-visible{outline:2px solid #f5d713;outline-offset:4px}

/* ---------- Desktop ---------- */
@media(min-width:1280px) and (min-height:640px){
  .omq-has-ruler{--omq-ruler-space:236px;--omq-tape:56px}
  .omq-has-ruler #main,.omq-has-ruler>.site-footer{margin-inline-start:var(--omq-ruler-space)}
  /* The whole column is the hover zone (it sits in reserved margin, over nothing), so a name moving under the
     pointer never counts as leaving the strip. */
  .omq-ruler{display:block;position:fixed;inset-block:0;inset-inline-start:0;width:var(--omq-ruler-space);z-index:80;pointer-events:auto;color:#ededf0}
  .omq-ruler-labels{pointer-events:none}

  /* Strip: frosted edge that fades into the page, no border. */
  .omq-ruler-panel{position:absolute;inset-block:0;inset-inline-start:0;width:var(--omq-tape);overflow:hidden;pointer-events:auto;cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none}
  .omq-ruler-panel:before{content:"";position:absolute;inset:0;backdrop-filter:blur(9px);background:#0a0a0b8c;mask-image:linear-gradient(to left,#000 40%,#0000 100%);-webkit-mask-image:linear-gradient(to left,#000 40%,#0000 100%)}
  html[dir=ltr] .omq-ruler-panel:before{mask-image:linear-gradient(to right,#000 40%,#0000 100%);-webkit-mask-image:linear-gradient(to right,#000 40%,#0000 100%)}
  .omq-ruler-panel.is-dragging{cursor:grabbing}
  .omq-ruler-panel:focus-visible{outline:none}
  .omq-ruler-panel:focus-visible .omq-ruler-indicator:before{box-shadow:0 0 0 2px #0a0a0b,0 0 0 4px #f5d713}
  .omq-ruler-track{position:absolute;inset-inline:0;top:0;will-change:transform}
  .omq-ruler-tick{position:absolute;inset-inline-start:0;top:0;height:1px;width:10px;background:#ededf0;opacity:.38;transform-origin:var(--ruler-origin,left center);will-change:transform}
  html[dir=rtl] .omq-ruler-tick{--ruler-origin:right center}
  .omq-ruler-tick.is-major{width:20px;opacity:.8}
  .omq-ruler-tick.is-near{opacity:1;background:#fff}
  .omq-ruler-number{position:absolute;inset-inline-start:24px;top:0;transform:translateY(-50%);font-family:var(--f-mono);font-size:9px;line-height:1;font-weight:500;color:#ededf0;opacity:.5;font-variant-numeric:tabular-nums;will-change:transform;transition:opacity .2s,color .2s}
  .omq-ruler-number span{direction:ltr;unicode-bidi:isolate}
  .omq-ruler-number.is-near{opacity:1;color:#fff}
  .omq-ruler-window{position:absolute;inset-inline:0;top:0;height:0;opacity:0;background:#ededf01a;border-block:1px solid #ededf080;pointer-events:none}
  .omq-ruler-indicator{position:absolute;inset-inline:0;top:0;height:0;pointer-events:none;opacity:0;transition:opacity .25s}
  .omq-ruler-indicator.is-on{opacity:1}
  .omq-ruler-indicator:before{content:"";position:absolute;inset-inline:0;top:0;height:1px;background:#f5d713;box-shadow:0 0 6px #f5d713}
  .omq-ruler-readout{position:absolute;left:3px;top:4px;display:flex;direction:ltr;font-family:var(--f-mono);font-size:9px;line-height:1.25;font-weight:600;color:#f5d713;font-variant-numeric:tabular-nums;white-space:nowrap}
  html[dir=rtl] .omq-ruler-readout{left:auto;right:3px}
  .omq-ruler-digits{display:flex}
  .omq-ruler-digit{height:1.25em;overflow:hidden}
  .omq-ruler-digit>span{display:block;line-height:1.25em;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .omq-ruler-guide{position:absolute;inset-inline:0;top:0;height:0;opacity:0;pointer-events:none;transition:opacity .15s}
  .omq-ruler-guide.is-on{opacity:1}
  .omq-ruler-guide:before{content:"";position:absolute;inset-inline:0;top:0;height:1px;background:#ffffffcc}
  .omq-ruler-guide span{position:absolute;left:3px;top:-14px;font-family:var(--f-mono);font-size:9px;line-height:1;font-weight:600;color:#fff;direction:ltr;unicode-bidi:isolate;white-space:nowrap}

  html[dir=rtl] .omq-ruler-guide span{left:auto;right:3px}
  .omq-ruler-guide.is-near-needle span{opacity:0}

  /* Section names: passed names stack at the top under the eyebrow; the coming ones stack at the bottom;
     a section whose start is visible on the tape rides it vertically inside the strip; the current one is
     docked vertically and large inside the strip. On hover all of them lie horizontally along the tape. */
  .omq-ruler-labels{position:absolute;inset:0;text-align:start}
  .omq-ruler-eyebrow{position:absolute;inset-inline-start:calc(var(--omq-tape) + 10px);inset-inline-end:8px;top:0;margin:0;font-family:var(--f-mono);font-size:10px;line-height:1.4;font-weight:500;color:#9a9aa2;white-space:nowrap;transition:opacity .3s}
  .omq-ruler-eyebrow span{direction:ltr;unicode-bidi:isolate}
  .omq-ruler-links{list-style:none;margin:0;padding:0}
  .omq-ruler-links li{margin:0;padding:0}
  .omq-ruler-link{position:absolute;top:0;left:0;width:max-content;display:block;pointer-events:auto;font-family:var(--f-display);font-size:13.5px;line-height:1.5;font-weight:500;color:#8a8a93;text-shadow:0 0 3px #0a0a0b,0 0 8px #0a0a0b,0 0 14px #0a0a0b;transition:color .3s;white-space:nowrap;transform-origin:100% 0;will-change:transform}
  .omq-ruler-link:hover{color:#fff}
  .omq-ruler-link.is-riding{color:#d4d4da}
  .omq-ruler-link.is-current{color:#f5d713;font-weight:700;line-height:1.5}
  .omq-ruler-link i{display:none;margin-inline-start:6px;font:500 9px/1 var(--f-mono);font-style:normal;color:#9a9aa2;direction:ltr;unicode-bidi:isolate;vertical-align:middle}
  .omq-ruler.is-squeezed .omq-ruler-link i{display:inline-block}
  .omq-ruler-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .omq-has-ruler .wa-float{left:auto;right:auto;inset-inline-start:auto;inset-inline-end:24px}
}
@media(min-width:1280px) and (max-width:1439px) and (min-height:640px){
  .omq-has-ruler{--omq-ruler-space:212px;--omq-tape:50px}
  .home-wow .v16-home-hero{padding-inline:28px;gap:28px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .omq-ruler *{transition:none!important;animation:none!important}
}