/* ============================================================================
   DVS — Motion Language (shared layer)
   Ported from reference/motion-reference.html (V20).

   Self-contained on purpose: safeeye.html and smartexpand.html do NOT load
   site-modern.css, so the palette is re-declared here with the same hexes
   rather than inherited from --m-* tokens.

   Companion: animations.js (single rAF loop drives every scroll-linked value,
   which is what makes all of it bidirectional by construction).
   ========================================================================= */

:root {
  --dvs-ink: #0A0A0B;
  --dvs-bone: #FBFAF6;
  --dvs-brass: #B08948;
  --dvs-brass-soft: #D4B57E;
  --dvs-ember: #E85D2E;
  --dvs-mono: 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --dvs-serif: 'Cormorant Garamond', 'Frank Ruhl Libre', Georgia, serif;
}

/* Horizontal-overflow guard: several layers are absolutely positioned and
   rotated, and a rotated box can extend past the viewport at 390px. */
html { overflow-x: hidden; }

/* The arrow layer, its milestone nodes and the ornaments are positioned against
   the page, so body has to be their containing block. */
body { position: relative; }

/* ---------------------------------------------------------------- preloader */
#dvs-pre {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--dvs-ink);
  display: flex; align-items: center; justify-content: center;
  transition: transform .9s cubic-bezier(.85, 0, .15, 1);
}
#dvs-pre.is-done { transform: translateY(-101%); }

.dvs-pre-lockup {
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateY(24px);
  animation: dvs-pre-in .6s cubic-bezier(.2, .7, .2, 1) .1s forwards;
}
/* The logo PNG has a wordmark baked in at ~10px tall. Scaled to any preloader
   size it turns to mush (this is the "gibberish" under DVS). Clip it off and set
   TECHNOLOGY as real text, which stays crisp at any size. */
.dvs-pre-logo {
  width: clamp(200px, 30vw, 340px); height: auto;   /* big enough to actually read */
  clip-path: inset(0 0 13% 0);
  margin-bottom: 4px;
}
/* TECHNOLOGY is NOT deleted — it is re-set as live text. The copy baked into the
   PNG is ~10px of raster and turns to mush at any size; this stays razor-sharp. */
.dvs-pre-word {
  font-family: var(--dvs-mono); font-weight: 500;
  font-size: clamp(13px, 1.7vw, 18px);
  letter-spacing: .46em; text-indent: .46em;   /* trailing letter-space offsets it otherwise */
  color: var(--dvs-bone); opacity: 1;
  direction: ltr;
}
@keyframes dvs-pre-in { to { opacity: 1; transform: none; } }

/* the hero logo carries the same baked wordmark — clip it there too */
.dvs-hero-logo { clip-path: inset(0 0 13% 0); }

/* ------------------------------------------------------- signature arrow */
#dvs-arrow-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 6;
}
/* One sharp brass line. The blurred "soft" layer that used to show faintly under
   text is GONE — the line is now fully hidden over any content, never softened. */
#dvs-arrow-path,
#dvs-arrow-head {
  fill: none; stroke: var(--dvs-brass); stroke-width: 1.6px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;                      /* stays hidden until JS calibrates it */
}
#dvs-arrow-path { stroke-opacity: .85; }
#dvs-arrow-head { stroke-width: 2px; stroke-opacity: .9; }

/* Solids sit ABOVE the line. The arrow layer is z-index 6; anything with its own
   surface — a button, a card, a panel — is lifted to 7 so the browser occludes
   the line for us. This replaces the old rectangle-masking, which was only ever
   as accurate as the rects it measured. */
.dvs-occlude   { position: relative; z-index: 7; }   /* was static — needs positioning */
.dvs-occlude-z { z-index: 7; }                       /* already relative — z-index only */

.dvs-node {
  position: absolute; z-index: 7;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.6px solid var(--dvs-brass);
  background: var(--dvs-bone);
  transform: translate(-50%, -50%) scale(.85);
  transition: background .35s ease, transform .35s ease, box-shadow .35s ease;
  pointer-events: none;
}
.dvs-node.is-lit {
  background: var(--dvs-brass);
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 0 0 5px rgba(176, 137, 72, .18);
}
.dvs-node small {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-family: var(--dvs-mono); font-size: 10px; letter-spacing: .12em;
  color: var(--dvs-brass); direction: ltr; opacity: .55;
  transition: opacity .3s ease;
}
.dvs-node.is-lit small { opacity: 1; }

/* ------------------------------------------------------------ custom cursor */
@media (hover: hover) and (pointer: fine) {
  * { cursor: none !important; }
}
#dvs-cursor {
  position: fixed; top: 0; left: 0; width: 28px; height: 28px;
  pointer-events: none;
  z-index: 9500;                   /* above the menu, the preloader, everything */
  opacity: 0; will-change: transform;
}
#dvs-cursor svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  fill: var(--dvs-brass);
  filter: drop-shadow(0 1px 2px rgba(10, 10, 11, .25));
  transition: opacity .18s ease;
}
/* Over an interactive element the send icon does NOT grow — growing it just put a
   big shape on top of the thing you were trying to click. It swaps to a pointer. */
#dvs-cursor .dvs-cur-point { opacity: 0; fill: var(--dvs-ember); }
#dvs-cursor.is-hover .dvs-cur-send { opacity: 0; }
#dvs-cursor.is-hover .dvs-cur-point { opacity: 1; }

/* --------------------------------------------------- dancing + magnetic UI */
@keyframes dvs-dance {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-3px) rotate(-1.3deg); }
  60%      { transform: translateY(2px) rotate(1.1deg); }
}
.dvs-dance { animation: dvs-dance var(--dvs-dance-dur, 3.8s) ease-in-out var(--dvs-dance-delay, 1s) infinite; }
/* magnetised: JS owns the transform, so the idle dance must stand down */
.dvs-dance.is-magnetic { animation: none; }

/* ---------------------------------------------------------------- side menu */
/* The burger is briefed as fixed top-right, but the topbar's brand lockup also
   sits top-right in RTL, so the two collide. This inset is the one layout
   concession: it clears a 68px lane for the burger and shifts nothing else. */
.dsv-topbar-inner { padding-right: 68px; }

#dvs-burger {
  position: fixed; top: 18px; right: 18px; z-index: 9200;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--dvs-ink); border: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 0;
}
#dvs-burger i { display: block; width: 20px; height: 1.6px; background: var(--dvs-bone); transition: transform .35s ease; }
body.dvs-menu-open #dvs-burger i:first-child { transform: translateY(3.8px) rotate(45deg); }
body.dvs-menu-open #dvs-burger i:last-child  { transform: translateY(-3.8px) rotate(-45deg); }

/* Reference values, verbatim (motion-reference.html #menu-bg). */
#dvs-menu-bg {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(10, 10, 11, .22);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  opacity: 0; pointer-events: none;
  transition: opacity .5s ease;
}
body.dvs-menu-open #dvs-menu-bg { opacity: 1; pointer-events: auto; }

/* rises diagonally from the bottom-LEFT (the corner opposite the burger) and
   keeps a slight diagonal posture while open */
/* The reference is a FULL-VIEWPORT diagonal wedge — not a side drawer. The panel
   covers the screen and a hard diagonal cut across the top leaves the backdrop
   showing through one corner. It rises from the bottom-left (the corner opposite
   the burger) and keeps its diagonal posture while open. */
#dvs-menu {
  position: fixed; bottom: 0; left: 0;
  height: 100vh; width: min(400px, 90vw);
  background: var(--dvs-ink); color: var(--dvs-bone);
  z-index: 9150;
  padding: 110px 44px 48px;
  display: flex; flex-direction: column;
  transform: translate(-58%, 100%) rotate(-5deg);
  opacity: 0;
  transform-origin: bottom left;
  clip-path: polygon(0 4.5%, 100% 0, 100% 100%, 0 100%);
  transition: transform .8s cubic-bezier(.77, 0, .18, 1), opacity .5s ease;
}
body.dvs-menu-open #dvs-menu { transform: translate(0, 0) rotate(-3deg); opacity: 1; }


/* ---- LTR: mirror the whole assembly ----
   Burger moves to the top-left, so the menu must rise from the bottom-RIGHT —
   the opposite corner — and the diagonal and link alignment flip with it. */
[dir="ltr"] #dvs-burger { right: auto; left: 18px; }
[dir="ltr"] .dsv-topbar-inner { padding-right: 0; padding-left: 68px; }
[dir=ltr] #dvs-menu {
  left: auto; right: 0;
  transform-origin: bottom right;
  transform: translate(58%, 100%) rotate(5deg);
  clip-path: polygon(0 0, 100% 4.5%, 100% 100%, 0 100%);
}
[dir="ltr"] body.dvs-menu-open #dvs-menu { transform: translate(0, 0) rotate(3deg); }
[dir="ltr"] #dvs-menu a { transform: translateX(30px); }
[dir="ltr"] body.dvs-menu-open #dvs-menu a { transform: none; }

#dvs-menu-title {
  font-family: var(--dvs-mono); font-size: 11px; letter-spacing: .2em;
  color: var(--dvs-brass); direction: ltr; margin-bottom: 18px;
}
#dvs-menu a {
  display: block; color: var(--dvs-bone); text-decoration: none;
  font-family: var(--dvs-serif);
  font-size: clamp(26px, 4.5vw, 38px);
  padding: 12px 0;
  border-bottom: 1px solid rgba(251, 250, 246, .08);
  opacity: 0; transform: translateX(-30px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
#dvs-menu a:hover { color: var(--dvs-brass-soft); }
body.dvs-menu-open #dvs-menu a { opacity: 1; transform: none; }
#dvs-menu a:nth-of-type(2) { transition-delay: .08s; }
#dvs-menu a:nth-of-type(3) { transition-delay: .14s; }
#dvs-menu a:nth-of-type(4) { transition-delay: .20s; }
#dvs-menu a:nth-of-type(5) { transition-delay: .26s; }
#dvs-menu a:nth-of-type(6) { transition-delay: .32s; }
#dvs-menu a:nth-of-type(7) { transition-delay: .38s; }
#dvs-menu .dvs-mnote {
  margin-top: auto;
  font-family: var(--dvs-mono); font-size: 10px; letter-spacing: .16em;
  color: var(--dvs-brass); direction: ltr;
  opacity: 0; transition: opacity .6s ease .45s;
}
body.dvs-menu-open #dvs-menu .dvs-mnote { opacity: .8; }

/* the site's own burger would be a second, competing menu */
.dsv-menu-btn { display: none !important; }

/* Desktop already has the full top nav - the injected side menu is redundant
   there. It stays on mobile (nav hidden) and on nav-less landers. */
@media (min-width: 881px) {
  .dvs-has-nav #dvs-burger,
  .dvs-has-nav #dvs-menu,
  .dvs-has-nav #dvs-menu-bg { display: none !important; }
  .dvs-has-nav .dsv-topbar-inner { padding-right: 32px; padding-left: 32px; }
}

/* ------------------------------------------------- hero: logo centrepiece
   The real logo is the banner centrepiece, and the headline's three spans
   arrive from three different directions — the reference's monogram
   choreography (left / below / right), mapped onto the real H1. */
.dvs-hero-logo {
  display: block; width: clamp(74px, 10vw, 132px); height: auto;
  margin-bottom: clamp(18px, 3vh, 30px);
  opacity: 0; transform: translateY(46px) rotate(-7deg) scale(.86);
  transition: opacity 1s cubic-bezier(.16, 1, .3, 1),
              transform 1s cubic-bezier(.16, 1, .3, 1);
  will-change: transform, opacity;
}
.dvs-go .dvs-hero-logo { opacity: 1; transform: none !important; }

/* Text wordmark variant — the business name instead of the logo image.
   Latin text sits at the LEFT edge, even on the RTL page. */
.dvs-hero-word {
  width: fit-content; clip-path: none;
  display: flex; flex-direction: column; gap: 8px;
  direction: ltr; text-align: left; align-items: flex-start;
  position: relative;
  /* shrink-wrapped block pinned to the LEFT edge of the RTL hero */
  margin-right: auto; margin-left: 0;
}
/* instant hover tooltip with the legal identity line */
.dvs-hero-word::after {
  content: attr(data-legal);
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  direction: rtl;
  white-space: nowrap;
  background: var(--ink-950, #0A0A0B);
  color: var(--bone-50, #FBFAF6);
  font-family: var(--font-hebrew, sans-serif);
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 20;
}
.dvs-hero-word:hover::after { opacity: 1; transform: none; }
.dvs-hero-word-name {
  font-family: var(--font-display, serif);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--ink-950, #0A0A0B);
  cursor: help;
}
.dvs-hero-word-sub {
  font-family: var(--font-hebrew, sans-serif);
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: 0.02em;
  color: var(--ink-500, #6b6b6b);
  /* Hebrew line sits at the RIGHT end of the Latin name */
  align-self: flex-end;
  direction: rtl;
  text-align: right;
}

/* NB: the site sets .dsv-home-title span { display:block } — one span per line.
   Do NOT change that display; overriding it re-wraps the headline and overflows. */
.dsv-home-title span { will-change: transform; }
.dvs-hero-cast .dsv-home-title span {
  opacity: 0;
  transition: opacity 1s cubic-bezier(.16, 1, .3, 1),
              transform 1s cubic-bezier(.16, 1, .3, 1);
}
.dvs-hero-cast .dsv-home-title span:nth-child(1) { transform: translateX(-54px); transition-delay: .18s; }
.dvs-hero-cast .dsv-home-title span:nth-child(2) { transform: translateY(48px);  transition-delay: .32s; }
.dvs-hero-cast .dsv-home-title span:nth-child(3) { transform: translateX(54px);  transition-delay: .46s; }
[dir="rtl"] .dvs-hero-cast .dsv-home-title span:nth-child(1) { transform: translateX(54px); }
[dir="rtl"] .dvs-hero-cast .dsv-home-title span:nth-child(3) { transform: translateX(-54px); }
/* The settled state MUST outrank the direction/mobile offset rules below.
   Those carry [dir=rtl] + :nth-child (0,4,1) and would otherwise beat a plain
   .dvs-go descendant selector (0,3,1) — leaving the headline permanently
   translated off the right edge in RTL. */
.dvs-go .dvs-hero-cast .dsv-home-title span { opacity: 1; transform: none !important; }

/* Mobile: shorter travel, no rotation. The entrance offsets are real geometry —
   a 54px X-offset on a 390px screen is what pushes a headline past the edge. */
@media (max-width: 767px) {
  .dvs-hero-logo { transform: translateY(26px) rotate(0deg) scale(.92); }
  .dvs-hero-cast .dsv-home-title span:nth-child(1) { transform: translateX(-22px); }
  .dvs-hero-cast .dsv-home-title span:nth-child(2) { transform: translateY(24px); }
  .dvs-hero-cast .dsv-home-title span:nth-child(3) { transform: translateX(22px); }
  [dir="rtl"] .dvs-hero-cast .dsv-home-title span:nth-child(1) { transform: translateX(22px); }
  [dir="rtl"] .dvs-hero-cast .dsv-home-title span:nth-child(3) { transform: translateX(-22px); }
}

@media (prefers-reduced-motion: reduce) {
  .dvs-hero-logo { opacity: 1 !important; transform: none !important; }
  .dvs-hero-cast .dsv-home-title span { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------- scrubbed builds */
/* Base state only — every live value is written by animations.js each frame. */
.dvs-rv { opacity: 0; will-change: transform, opacity; }
.dvs-wrap { will-change: transform, opacity; }

/* eyebrow / section-mark underline draws itself */
.dvs-underline {
  display: block; height: 1px; background: var(--dvs-brass);
  margin-top: 6px; transform: scaleX(0);
  transform-origin: right;              /* RTL default; flipped for LTR below */
  will-change: transform;
}
[dir="ltr"] .dvs-underline { transform-origin: left; }

/* dark section background wipes in */
.dvs-bgwipe {
  position: absolute; inset: 0; z-index: 0;
  background: var(--dvs-ink);
  transform: scaleY(0); transform-origin: top;
  will-change: transform;
}
/* the wiping panel must sit behind the section's own content */
.dvs-has-wipe { position: relative; background: transparent !important; }
.dvs-has-wipe > *:not(.dvs-bgwipe) { position: relative; z-index: 1; }

/* typewriter caret */
.dvs-caret {
  display: inline-block; width: 2px; height: 1em;
  background: currentColor; vertical-align: -.12em;
  margin-inline-start: 2px;
  animation: dvs-blink 1s steps(1) infinite;
}
@keyframes dvs-blink { 50% { opacity: 0; } }

/* ------------------------------------------------------------- ornaments */
.dvs-orn {
  position: absolute; z-index: 1; pointer-events: none;
  font-family: var(--dvs-serif); color: var(--dvs-brass); opacity: .5;
  font-size: clamp(26px, 4vw, 44px); direction: ltr;
  will-change: transform;
}

/* blurred rotating FORWARD badge — a background layer, never over text */
.dvs-spin {
  position: absolute; z-index: 1; pointer-events: none;
  width: clamp(120px, 16vw, 180px); height: clamp(120px, 16vw, 180px);
  filter: blur(1.6px); will-change: transform;
}
.dvs-spin-in { width: 100%; height: 100%; opacity: 0; transform: scale(.7); will-change: transform, opacity; }
.dvs-spin svg { width: 100%; height: 100%; overflow: visible; }
.dvs-spin text { font-family: var(--dvs-mono); font-size: 11.5px; letter-spacing: .22em; fill: var(--dvs-brass); }
.dvs-spin .dvs-spin-core { font-family: var(--dvs-serif); fill: var(--dvs-bone); font-size: 26px; }

/* ------------------------------------------------------- ember marquee strip */
.dvs-strip {
  background: var(--dvs-ember); color: var(--dvs-bone);
  padding: 18px 0; overflow: hidden; direction: ltr;
  position: relative; z-index: 2;
}
.dvs-strip .dvs-track {
  display: flex; gap: 48px; width: max-content;
  animation: dvs-marq 18s linear infinite;
}
/* The strip container stays LTR so the marquee scrolls as one flow, but each name
   must order by its OWN content: "מערכת IVR" is Hebrew-first (RTL), "FixMaster" is
   Latin (LTR). unicode-bidi:plaintext picks the direction per span automatically,
   fixing "IVR מערכת" without forcing a single direction on mixed names. */
.dvs-strip span {
  font-family: var(--dvs-serif); font-size: clamp(18px, 3vw, 26px); white-space: nowrap;
  unicode-bidi: plaintext;
}
.dvs-strip i { font-style: normal; opacity: .6; }
@keyframes dvs-marq { to { transform: translateX(-50%); } }

/* --------------------------------------------------- fullscreen product slider */
.dvs-prodslides { position: relative; padding: 0; }
.dvs-pstick {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* The panel is a positioning box that also does the corner rounding; the FACE
   child carries the background + the slanted top edge. They have to be separate
   elements because border-radius and clip-path cannot coexist on one box. */
.dvs-pslide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 clamp(22px, 7vw, 90px);
  border-radius: 14px; overflow: hidden;
  will-change: transform;
  transform-origin: 50% 100%;
}
.dvs-pface {
  position: absolute; inset: 0; z-index: 0;
  background: var(--dvs-bone);     /* OPAQUE: the incoming slide covers, never blends */
  clip-path: polygon(0 1.8%, 100% 0, 100% 100%, 0 100%);   /* slanted top edge */
}
/* Every other slide leans the OTHER way. With a single slant direction the stack
   read as one repeated shape; alternating it makes each product arrive with its
   own posture. Pairs with the alternating arrival tilt in animations.js. */
.dvs-pslide.is-lean .dvs-pface {
  clip-path: polygon(0 0, 100% 1.8%, 100% 100%, 0 100%);
}
/* alternating panels — palette only, no per-product colours */
.dvs-pslide.is-ink .dvs-pface { background: var(--dvs-ink); }
.dvs-pslide.is-ink { color: var(--dvs-bone); }
.dvs-pslide.is-ink .dvs-pdesc { color: #b9b7b0; }
.dvs-pslide.is-ink .dvs-pview { color: var(--dvs-bone); }

/* large background index numeral, behind the content */
.dvs-pbig {
  position: absolute; z-index: 1;
  inset-inline-start: clamp(16px, 5vw, 80px);
  bottom: clamp(4px, 4vh, 40px);
  font-family: var(--dvs-serif); font-weight: 600;
  font-size: clamp(140px, 30vw, 380px); line-height: .8;
  color: var(--dvs-brass); opacity: .1;
  direction: ltr; pointer-events: none; user-select: none;
}
.dvs-pslide.is-ink .dvs-pbig { color: var(--dvs-brass-soft); opacity: .12; }

.dvs-pslide > *:not(.dvs-pface):not(.dvs-pbig) { position: relative; z-index: 2; }

.dvs-pnum { font-family: var(--dvs-mono); font-size: 12px; letter-spacing: .3em; color: var(--dvs-brass); direction: ltr; }
/* NB: no forced `direction: ltr` here. The reference had English-only product
   names (FixMaster, Spikit), so LTR was fine there — but the real products include
   Hebrew names ("מערכת IVR", "בוטי וואטסאפ"), and forcing LTR renders them in the
   wrong bidi order ("IVR מערכת"). Inheriting the page direction lets the Unicode
   bidi algorithm order both Hebrew and Latin names correctly. */
.dvs-pslide h3 {
  font-family: var(--dvs-serif); font-weight: 600;
  font-size: clamp(52px, 12vw, 150px); line-height: 1;
  margin: 0;
}
.dvs-pcat { margin-top: 14px; font-family: var(--dvs-mono); font-size: 11px; letter-spacing: .22em; color: #8a887f; }
.dvs-pdesc { margin-top: 18px; max-width: 46ch; color: #4a4a45; line-height: 1.7; font-size: 15px; }
.dvs-pview {
  margin-top: 28px; display: inline-flex; align-items: center; gap: 12px;
  background: none; border: 1px solid var(--dvs-brass); color: var(--dvs-ink);
  font-family: var(--dvs-serif); font-size: 17px;
  padding: 15px 30px; border-radius: 50px; text-decoration: none;
}
.dvs-pview i { font-style: normal; color: var(--dvs-brass); direction: ltr; font-size: 19px; }
.dvs-pcount {
  position: absolute; bottom: clamp(24px, 5vh, 50px); inset-inline-end: clamp(22px, 7vw, 90px);
  font-family: var(--dvs-mono); font-size: 12px; letter-spacing: .2em;
  color: var(--dvs-brass); direction: ltr; z-index: 60;
}
/* the original grid is kept in the DOM (content untouched) but hidden while
   the slider is active; it comes back on mobile and under reduced motion */
/* NOTE the prefix: the site's class is .dsv-* (not .dvs-*). Getting this wrong
   made the hide a no-op and the products rendered TWICE — once as cards, once as
   slides. !important is required: site-modern.css:403 forces display:grid. */
.dvs-slider-active .dsv-index-grid,
.dvs-slider-active .dsv-service-list { display: none !important; }

/* =========================================================================
   MOBILE (<768px) — simplified variant.
   Shorter distances (JS: Dm=0.6), no rotation-heavy layers, no cursor,
   slider de-pinned back to the original grid.
   ========================================================================= */
@media (max-width: 767px) {
  #dvs-cursor { display: none; }
  .dvs-spin { display: none; }          /* rotation-heavy */
  .dvs-orn { display: none; }           /* rotation-heavy + overflow risk */
  .dvs-node small { display: none; }

  .dvs-prodslides, .dvs-pstick { position: static; height: auto; overflow: visible; }
  .dvs-pslide { display: none; }
  .dvs-pcount { display: none; }
  .dvs-slider-active .dsv-index-grid { display: grid !important; }   /* restore the real cards */
  .dvs-slider-active .dsv-service-list { display: block !important; }

  /* The -3deg rotation about the bottom-left corner swings the panel's TOP edge
     left by ~h·sin(3°) ≈ 44px. The left padding has to clear that or the title
     and links are clipped off the screen edge. */
  #dvs-menu { width: min(340px, 92vw); padding: 92px 26px 40px 62px; }
  #dvs-menu a { font-size: clamp(30px, 8vw, 44px); }
}

/* =========================================================================
   REDUCED MOTION — static final states, no motion anywhere.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  #dvs-pre { display: none !important; }
  #dvs-cursor { display: none !important; }
  * { cursor: auto !important; }

  .dvs-rv { opacity: 1 !important; transform: none !important; }
  .dvs-wrap { opacity: 1 !important; transform: none !important; }
  .dvs-underline { transform: scaleX(1) !important; }
  .dvs-bgwipe { transform: scaleY(1) !important; }
  .dvs-dance { animation: none !important; }
  .dvs-strip .dvs-track { animation: none !important; }
  .dvs-caret { animation: none !important; display: none; }
  .dvs-spin, .dvs-orn { display: none !important; }

  #dvs-arrow-path, #dvs-arrow-head { opacity: 1; }
  .dvs-node { background: var(--dvs-brass); }

  /* no pinning: show the real cards, drop the slider */
  .dvs-prodslides, .dvs-pstick { position: static; height: auto; }
  .dvs-pslide { display: none; }
  .dvs-pcount { display: none; }
  .dvs-slider-active .dsv-index-grid { display: grid !important; }
  .dvs-slider-active .dsv-service-list { display: block !important; }
}