html.ddi-lock, html.ddi-lock body { overflow: hidden !important; }
.elementor-widget-html:has(#ddi-root), .elementor-widget-html:has(#ddi-root) .elementor-widget-container, .elementor-widget-shortcode:has(#ddi-root), .elementor-widget-shortcode:has(#ddi-root) .elementor-widget-container { margin: 0 !important; padding: 0 !important; }

#ddi-root {
  --o: #F26522; --g: #55AE47; --y: #F9A81B; --b: #1689D6;
  --ink: #2F3A37; --mute: #7F8F8A; --bg: #FBFCFB;
  --pill-w: calc(clamp(210px, calc(26 * var(--ddvw, 1vw)), 500px) * var(--pill-k, 1));
  --card-w: calc(clamp(80px, calc(8.6 * var(--ddvw, 1vw)), 168px) * var(--card-k, 1));
  --dot: #CBD3D0;
  --hud: clamp(10px, calc(.78 * var(--ddvw, 1vw)), 14px);
  position: fixed; inset: 0; z-index: 2147483000; overflow: hidden;
  background: var(--bg);
  font-family: 'Archivo', 'Arial Black', Arial, sans-serif;
  -webkit-font-smoothing: antialiased; line-height: 1;
  transition: opacity .6s ease, visibility .6s ease;
}
#ddi-root.ddi-inline { position: relative; height: 100vh; height: 100svh; z-index: 1; }
#ddi-root.ddi-out { opacity: 0; visibility: hidden; }
#ddi-root *, #ddi-root *::before, #ddi-root *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* drifting dot grid (same as the hero loop) */
#ddi-root .ddi-dots {
  position: absolute; inset: -56px;
  background-image: radial-gradient(circle, var(--dot) 2.1px, transparent 2.6px);
  background-size: 28px 28px;
  animation: ddi-drift 10s linear infinite;
}
@keyframes ddi-drift { to { transform: translate(56px, 56px); } }
#ddi-root .ddi-pool {
  position: absolute; left: 50%; top: 50%; width: 130vmax; height: 130vmax; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(251,252,251,.97), rgba(251,252,251,.7) 26%, rgba(251,252,251,0) 58%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 97%, transparent), color-mix(in srgb, var(--bg) 70%, transparent) 26%, transparent 58%);
  pointer-events: none;
}

/* HUD */
#ddi-root .ddi-hud { position: absolute; font: 400 var(--hud)/1 'DM Mono', ui-monospace, Menlo, Consolas, monospace; letter-spacing: .18em; color: var(--mute); text-transform: uppercase; white-space: nowrap; opacity: 0; }
#ddi-root .ddi-tl { left: clamp(16px, calc(2.3 * var(--ddvw, 1vw)), 44px); top: clamp(16px, calc(2.6 * var(--ddvh, 1vh)), 44px); }
#ddi-root .ddi-tr { right: clamp(16px, calc(2.3 * var(--ddvw, 1vw)), 44px); top: clamp(16px, calc(2.6 * var(--ddvh, 1vh)), 44px); }
#ddi-root .ddi-bl { left: clamp(16px, calc(2.3 * var(--ddvw, 1vw)), 44px); bottom: clamp(16px, calc(2.6 * var(--ddvh, 1vh)), 44px); }
#ddi-root .ddi-br { right: clamp(16px, calc(2.3 * var(--ddvw, 1vw)), 44px); bottom: clamp(16px, calc(2.6 * var(--ddvh, 1vh)), 44px); display: flex; gap: calc(var(--hud) * .45); }
#ddi-root .ddi-br i { display: block; width: calc(var(--hud) * .9); height: calc(var(--hud) * .9); opacity: .25; transition: opacity .15s; }
#ddi-root .ddi-br i.on { opacity: 1; }
#ddi-root .ddi-count b { color: var(--ink); font-weight: 500; }

/* client logo cards */
#ddi-root .ddi-card { position: absolute; left: 0; top: 0; width: var(--card-w); aspect-ratio: 1.62 / 1; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
#ddi-root .ddi-float { width: 100%; height: 100%; animation: ddi-bob var(--d, 4s) ease-in-out var(--dl, 0s) infinite alternate; }
#ddi-root .ddi-face {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: clamp(12px, calc(1.1 * var(--ddvw, 1vw)), 20px); padding: 9%;
  box-shadow: 0 0 0 1px rgba(47,58,55,.06), 0 12px 30px -14px rgba(47,58,55,.28);
}
#ddi-root .ddi-face img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
#ddi-root .ddi-card.ddi-fly .ddi-face { box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 0 34px 6px var(--c); }
@keyframes ddi-bob { from { transform: translate3d(0, calc(var(--a, 7px) * -1), 0) rotate(calc(var(--r, 1deg) * -1)); } to { transform: translate3d(0, var(--a, 7px), 0) rotate(var(--r, 1deg)); } }

/* the pill: smooth radius, glow is a box-shadow so it always follows the curve */
#ddi-root .ddi-pill {
  position: absolute; left: 50%; top: 50%; width: var(--pill-w); aspect-ratio: 2.45 / 1;
  transform: translate(-50%, -50%) scale(0); border-radius: 999px; background: #fff;
}
#ddi-root .ddi-pill svg { position: absolute; left: 50%; top: 50%; width: 80%; height: auto; transform: translate(-50%, -50%); overflow: visible; display: block; }
/* original logo: each letter is revealed by its own stroke mask; masks start undrawn, drawLogo() animates them */
#ddi-root .dl-mk, #ddi-root .dl-sep { stroke-dasharray: 1 1.06; stroke-dashoffset: 1.03; }

/* welcome */
/* welcome: small grey "WELCOME TO" + the big self-drawing logo (like the designsdig.com hero) */
#ddi-root .ddi-welcome { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(calc(78 * var(--ddvw, 1vw)), 1180px, calc(calc(48 * var(--ddvh, 1vh)) * 3.39)); display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; }
#ddi-root .ddi-kicker { font: 500 clamp(11px, calc(.95 * var(--ddvw, 1vw)), 17px)/1 'DM Mono', ui-monospace, monospace; letter-spacing: .5em; padding-left: .5em; color: var(--mute); opacity: 0; }
#ddi-root .ddi-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#ddi-root .ddi-big { display: block; width: 100%; height: auto; overflow: visible; margin: clamp(14px, calc(2.6 * var(--ddvh, 1vh)), 34px) 0 clamp(18px, calc(3.2 * var(--ddvh, 1vh)), 42px); }
#ddi-root .ddi-go { width: clamp(150px, calc(15 * var(--ddvw, 1vw)), 280px); opacity: 0; }
#ddi-root .ddi-go p { font: 400 clamp(10px, calc(.8 * var(--ddvw, 1vw)), 14px)/1 'DM Mono', ui-monospace, monospace; letter-spacing: .3em; color: var(--mute); margin-bottom: 9px; }
#ddi-root .ddi-track { height: 3px; border-radius: 3px; background: #E3E8E6; overflow: hidden; }
#ddi-root .ddi-fill { height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--o), var(--y), var(--g), var(--b)); }

#ddi-root canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#ddi-root .ddi-skip {
  position: absolute; left: 50%; bottom: clamp(14px, calc(2.4 * var(--ddvh, 1vh)), 40px); transform: translateX(-50%);
  font: 500 var(--hud)/1 'DM Mono', ui-monospace, monospace; letter-spacing: .2em; color: var(--mute);
  background: rgba(255,255,255,.8); border: 1px solid #DDE3E1; border-radius: 999px; padding: .9em 1.6em; cursor: pointer;
}
#ddi-root .ddi-skip:hover, #ddi-root .ddi-skip:focus-visible { color: #fff; background: var(--ink); border-color: var(--ink); outline: none; }

@media (max-aspect-ratio: 3/4) {
  #ddi-root { --pill-w: calc(clamp(200px, calc(64 * var(--ddvw, 1vw)), 400px) * var(--pill-k, 1)); --card-w: calc(clamp(74px, calc(20 * var(--ddvw, 1vw)), 124px) * var(--card-k, 1)); }
  #ddi-root .ddi-welcome { width: calc(90 * var(--ddvw, 1vw)); }
}
@media (prefers-reduced-motion: reduce) { #ddi-root .ddi-dots, #ddi-root .ddi-float { animation: none; } }
/* phones: Skip moves to the top-right corner (this rule must stay last) */
@media (max-width: 520px) { #ddi-root .ddi-tr { display: none; } #ddi-root .ddi-skip { left: auto; right: clamp(16px, calc(2.3 * var(--ddvw, 1vw)), 44px); top: clamp(10px, calc(2 * var(--ddvh, 1vh)), 40px); padding: .7em 1.2em; bottom: auto; transform: none; } }

/* ---- plugin additions ---- */
#ddi-root:not(.ddi-ready) > * { visibility: hidden; }
#ddi-root .ddi-pill img.ddi-clogo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 76%; max-height: 62%; width: auto; height: auto; display: block; opacity: 0; }
#ddi-root img.ddi-big { width: auto; max-width: 100%; max-height: calc(36 * var(--ddvh, 1vh)); opacity: 0; }
#ddi-root .ddi-count:empty { display: none; }

/* ---- exit: website opens from the logo centre through a brand-colour ring wave ---- */
#ddi-root.ddi-revealing {
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
          mask: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
}
#ddi-root .ddi-iris {
  position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    transparent var(--hole),
    var(--o) var(--hole), var(--o) calc(var(--hole) + var(--bw)),
    var(--y) calc(var(--hole) + var(--bw)), var(--y) calc(var(--hole) + 2 * var(--bw)),
    var(--g) calc(var(--hole) + 2 * var(--bw)), var(--g) calc(var(--hole) + 3 * var(--bw)),
    var(--b) calc(var(--hole) + 3 * var(--bw)), var(--b) calc(var(--hole) + 4 * var(--bw)),
    transparent calc(var(--hole) + 4 * var(--bw) + 1px));
}