/* Deft Digital Media — Services hub hero: "Build your business" (Daniel's pick, Oct 24). One demo brand morphs through every
   service: mark > foil card > website > Google pin > social feed > ad that rings. Page: pages/services.html; motion:
   scripts/services-hero.js. Prefix ddm-sh-. Sizes inside the stage are in cqw (the stage column's width), so the whole
   scene scales as one picture. Yellow stays a fill on this light page (pin, buttons, ring); stars and text are ink. */

.ddm-x .ddm-sh-hero { position:relative; padding:calc(var(--nav-h) + clamp(32px,4.5vw,64px)) 0 clamp(48px,6vw,88px); }
.ddm-x .ddm-sh-digits { opacity:.9; -webkit-mask:radial-gradient(55% 60% at 74% 42%,#000 25%,transparent 100%); mask:radial-gradient(55% 60% at 74% 42%,#000 25%,transparent 100%); }
.ddm-x .ddm-sh-hero > .ddm-grain { -webkit-mask:linear-gradient(180deg,#000 70%,transparent); mask:linear-gradient(180deg,#000 70%,transparent); }
.ddm-x .ddm-sh-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:center; }
.ddm-x .ddm-sh-hero .ddm-sv-head > p:not(.ddm-eyebrow) { margin-bottom:28px; }
.ddm-x .ddm-sh-hero .ddm-sv-title { font-size:clamp(2.6rem,4.6vw,4.7rem); } /* "From first logo to" holds one line beside the stage */

/* ---------- Stage ---------- */
.ddm-x .ddm-sh { container-type:inline-size; min-width:0; }
.ddm-x .ddm-sh-stage { position:relative; height:80cqw; }
.ddm-x .ddm-sh-obj { --w:96cqw; --h:62cqw; --r:2.2cqw; --bg:#fff; --mx:4.6%; --my:12.6%; --ms:3cqw; --mc:var(--ink);
  position:absolute; left:50%; top:47%; width:var(--w); height:var(--h); translate:-50% -50%; border-radius:var(--r); background:var(--bg);
  box-shadow:0 0 0 1px rgb(17 17 17/.07), 0 2px 0 rgb(255 255 255/.6) inset, 0 40px 60px -36px rgb(0 0 0/.45), 0 18px 30px -24px rgb(0 0 0/.3);
  transition:width .9s cubic-bezier(.7,0,.2,1), height .9s cubic-bezier(.7,0,.2,1), border-radius .9s cubic-bezier(.7,0,.2,1), background-color .6s ease .15s, box-shadow .6s; }
.ddm-x .ddm-sh-obj[data-step="0"] { --w:50cqw; --h:50cqw; --r:3.2cqw; --mx:50%; --my:38%; --ms:17cqw; }
.ddm-x .ddm-sh-obj[data-step="0"].is-card { --w:64cqw; --h:36.6cqw; --r:1.6cqw; --bg:#0d0d0e; --mx:24%; --my:50%; --ms:11cqw; --mc:#D9B86C;
  box-shadow:.5cqw .5cqw 0 -.15cqw var(--sun), .7cqw .7cqw 0 -.15cqw #c99a00, 0 40px 60px -30px rgb(0 0 0/.6); }
.ddm-x .ddm-sh-obj[data-step="2"] { --w:60cqw; --h:60cqw; --r:4.4cqw; --bg:#E8EBE3; --mx:50%; --my:34%; --ms:4.2cqw; }
.ddm-x .ddm-sh-obj:is([data-step="3"],[data-step="4"]) { --w:36cqw; --h:74cqw; --r:6cqw; --bg:#0b0b0c; }
.ddm-x .ddm-sh-obj[data-step="3"] { --mx:17%; --my:15.1%; --ms:3.3cqw; }
.ddm-x .ddm-sh-obj[data-step="4"] { --mx:15%; --my:12.2%; --ms:2.7cqw; }
.ddm-x .ddm-sh-obj[data-step="4"].is-call { --mx:50%; --my:32%; --ms:8cqw; --mc:#fff; }
.ddm-x .ddm-sh-shadow { position:absolute; left:50%; bottom:2%; width:56cqw; height:4cqw; translate:-50% 0; border-radius:50%; background:radial-gradient(closest-side,rgb(0 0 0/.16),transparent); pointer-events:none; }

/* The mark travels through every step */
.ddm-x .ddm-sh-mark { position:absolute; z-index:5; left:var(--mx); top:var(--my); width:var(--ms); aspect-ratio:1; translate:-50% -50%; color:var(--mc); fill:none; stroke:currentColor; stroke-width:4.5; stroke-linejoin:round; pointer-events:none;
  transition:left .9s cubic-bezier(.7,0,.2,1), top .9s cubic-bezier(.7,0,.2,1), width .9s cubic-bezier(.7,0,.2,1), color .5s ease .2s; }
.ddm-x .ddm-sh-obj[data-step="0"] .ddm-sh-mark { stroke-width:3; }
.ddm-x .ddm-sh-mark path { stroke-dasharray:1; stroke-dashoffset:0; }
.ddm-x .ddm-sh-obj.is-draw .ddm-sh-mark path { animation:ddm-sh-draw 1s cubic-bezier(.6,0,.2,1) both; }
.ddm-x .ddm-sh-obj.is-draw .ddm-sh-mark path:nth-child(2) { animation-delay:.25s; }
.ddm-x .ddm-sh-obj.is-draw .ddm-sh-mark path:nth-child(3) { animation-delay:.5s; }
@keyframes ddm-sh-draw { from { stroke-dashoffset:1; } }
.ddm-x .ddm-sh-obj.is-card .ddm-sh-mark { filter:drop-shadow(0 0 .25cqw rgb(217 184 108/.5)); }

/* Layers: only the step's own layer shows, after the shape has changed */
.ddm-x .ddm-sh-l { position:absolute; inset:0; border-radius:inherit; overflow:hidden; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s; }
.ddm-x .ddm-sh-obj[data-step="0"] [data-l="0"], .ddm-x .ddm-sh-obj[data-step="1"] [data-l="1"], .ddm-x .ddm-sh-obj[data-step="2"] [data-l="2"],
.ddm-x .ddm-sh-obj[data-step="3"] [data-l="3"], .ddm-x .ddm-sh-obj[data-step="4"] [data-l="4"] { opacity:1; visibility:visible; transition:opacity .45s ease .55s, visibility 0s; }
.ddm-x .ddm-sh-obj.is-same[data-step="3"] [data-l="3"], .ddm-x .ddm-sh-obj.is-same[data-step="4"] [data-l="4"] { transition-delay:.12s, 0s; } /* same phone: the screens simply cross */
.ddm-x .ddm-sh-l img, .ddm-x .ddm-sh-l video { display:block; width:100%; height:100%; object-fit:cover; }
.ddm-x .ddm-sh-l b, .ddm-x .ddm-sh-l small, .ddm-x .ddm-sh-l em { display:block; font-style:normal; line-height:1.15; }

/* ---------- Brand: sheet, then the foil card ---------- */
.ddm-x .ddm-sh-sheet, .ddm-x .ddm-sh-card { position:absolute; inset:0; transition:opacity .4s ease; }
.ddm-x .ddm-sh-card { opacity:0; }
.ddm-x .ddm-sh-obj.is-card .ddm-sh-sheet { opacity:0; }
.ddm-x .ddm-sh-obj.is-card .ddm-sh-card { opacity:1; transition-delay:.35s; }
.ddm-x .ddm-sh-grid-lines { position:absolute; left:50%; top:38%; width:27cqw; aspect-ratio:1; translate:-50% -50%; border-radius:50%; border:1px dashed rgb(17 17 17/.14); }
.ddm-x .ddm-sh-grid-lines::before, .ddm-x .ddm-sh-grid-lines::after { content:""; position:absolute; background:rgb(59 91 255/.25); }
.ddm-x .ddm-sh-grid-lines::before { left:-12%; right:-12%; top:50%; height:1px; }
.ddm-x .ddm-sh-grid-lines::after { top:-12%; bottom:-12%; left:50%; width:1px; }
.ddm-x .ddm-sh-word { position:absolute; left:0; right:0; top:64%; text-align:center; font-size:2.9cqw; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); }
.ddm-x .ddm-sh-tag { position:absolute; left:0; right:0; top:72%; text-align:center; font:500 1.35cqw/1.2 var(--mono); letter-spacing:.06em; color:var(--ink-3); }
.ddm-x .ddm-sh-sw { position:absolute; left:50%; top:82%; display:flex; gap:1.2cqw; translate:-50% 0; }
.ddm-x .ddm-sh-sw i { width:3.2cqw; aspect-ratio:1; border-radius:50%; background:var(--ink); box-shadow:inset 0 0 0 1px rgb(17 17 17/.12); }
.ddm-x .ddm-sh-sw i:nth-child(2) { background:#D9B86C; } .ddm-x .ddm-sh-sw i:nth-child(3) { background:#F3F0E8; } .ddm-x .ddm-sh-sw i:nth-child(4) { background:#8A8577; }
.ddm-x .ddm-sh-brand.is-on .ddm-sh-grid-lines { animation:ddm-sh-fade .6s ease both; }
.ddm-x .ddm-sh-brand.is-on :is(.ddm-sh-word,.ddm-sh-tag) { animation:ddm-sh-rise .6s var(--ease) 1.1s both; }
.ddm-x .ddm-sh-brand.is-on .ddm-sh-tag { animation-delay:1.25s; }
.ddm-x .ddm-sh-brand.is-on .ddm-sh-sw i { animation:ddm-sh-pop .45s cubic-bezier(.34,1.5,.64,1) both; animation-delay:calc(1.35s + var(--n,0) * 90ms); }
.ddm-x .ddm-sh-sw i:nth-child(2) { --n:1; } .ddm-x .ddm-sh-sw i:nth-child(3) { --n:2; } .ddm-x .ddm-sh-sw i:nth-child(4) { --n:3; }
.ddm-x .ddm-sh-card-name { position:absolute; left:43%; top:50%; translate:0 -50%; }
.ddm-x .ddm-sh-card-name b { font-size:2.5cqw; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#D9B86C; }
.ddm-x .ddm-sh-card-name small { margin-top:.8cqw; font:500 1.2cqw/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:rgb(255 255 255/.45); }
.ddm-x .ddm-sh-card-glint { position:absolute; inset:0; background:linear-gradient(115deg,transparent 35%,rgb(255 240 200/.22) 48%,transparent 60%); translate:-100% 0; }
.ddm-x .ddm-sh-obj.is-card .ddm-sh-card-glint { animation:ddm-sh-glint 1.4s ease .7s both; }
@keyframes ddm-sh-glint { to { translate:100% 0; } }

/* ---------- Website ---------- */
.ddm-x .ddm-sh-bar { position:absolute; left:0; right:0; top:0; height:8%; display:flex; align-items:center; gap:.6cqw; padding:0 1.6cqw; background:#F1F1EE; }
.ddm-x .ddm-sh-bar i { width:1cqw; aspect-ratio:1; border-radius:50%; background:rgb(17 17 17/.16); }
.ddm-x .ddm-sh-bar em { margin:0 auto; padding:.3cqw 3cqw; border-radius:99px; background:#fff; font-size:1.2cqw; color:var(--ink-3); }
.ddm-x .ddm-sh-nav { position:absolute; left:0; right:0; top:8%; height:9.2%; display:flex; align-items:center; gap:2cqw; padding:0 2.2cqw 0 8.4%; border-bottom:1px solid rgb(17 17 17/.06); }
.ddm-x .ddm-sh-nav b { font-size:1.45cqw; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.ddm-x .ddm-sh-nav > span { display:flex; gap:1.6cqw; margin-left:auto; }
.ddm-x .ddm-sh-nav > span i { width:4.4cqw; height:.7cqw; border-radius:1cqw; background:rgb(17 17 17/.14); }
.ddm-x .ddm-sh-nav em { padding:.7cqw 1.6cqw; border-radius:99px; background:var(--sun); color:var(--ink); font-size:1.2cqw; font-weight:600; }
.ddm-x .ddm-sh-site-hero { position:absolute; left:0; right:0; top:17.2%; height:57%; overflow:hidden; }
.ddm-x .ddm-sh-site-hero > span { position:absolute; left:6%; bottom:13%; max-width:56%; color:#fff; }
.ddm-x .ddm-sh-site-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgb(10 10 10/.72),rgb(10 10 10/.15) 70%); }
.ddm-x .ddm-sh-site-hero > span { z-index:1; }
.ddm-x .ddm-sh-site-hero b { font-size:4.4cqw; font-weight:600; letter-spacing:-.045em; line-height:1; }
.ddm-x .ddm-sh-site-hero small { margin-top:1.2cqw; font-size:1.45cqw; color:rgb(255 255 255/.78); }
.ddm-x .ddm-sh-site-hero em { display:inline-block; margin-top:2cqw; padding:.9cqw 2cqw; border-radius:99px; background:var(--sun); color:var(--ink); font-size:1.3cqw; font-weight:600; }
.ddm-x .ddm-sh-thumbs { position:absolute; left:0; right:0; bottom:0; height:25.8%; display:grid; grid-template-columns:repeat(4,1fr); gap:1.2cqw; padding:1.6cqw 2.2cqw; }
.ddm-x .ddm-sh-thumbs img { border-radius:.8cqw; }
.ddm-x .ddm-sh-site.is-on .ddm-sh-site-hero img { animation:ddm-sh-zoom 3.6s ease-out both; }
.ddm-x .ddm-sh-site.is-on .ddm-sh-site-hero > span > * { animation:ddm-sh-rise .6s var(--ease) both; animation-delay:.25s; }
.ddm-x .ddm-sh-site.is-on .ddm-sh-site-hero small { animation-delay:.35s; } .ddm-x .ddm-sh-site.is-on .ddm-sh-site-hero em { animation-delay:.45s; }
.ddm-x .ddm-sh-site.is-on .ddm-sh-thumbs img { animation:ddm-sh-pop .5s cubic-bezier(.34,1.4,.64,1) both; animation-delay:calc(.5s + var(--n,0) * 90ms); }
.ddm-x .ddm-sh-thumbs img:nth-child(2) { --n:1; } .ddm-x .ddm-sh-thumbs img:nth-child(3) { --n:2; } .ddm-x .ddm-sh-thumbs img:nth-child(4) { --n:3; }

/* ---------- Get found ---------- */
.ddm-x .ddm-sh-streets { position:absolute; inset:0; width:100%; height:100%; }
.ddm-x .ddm-sh-streets path { fill:none; stroke:#fff; stroke-width:1.6; vector-effect:non-scaling-stroke; }
.ddm-x .ddm-sh-streets path.w { stroke-width:5; }
.ddm-x .ddm-sh-streets path.g { fill:#D3E2C8; stroke:none; }
.ddm-x .ddm-sh-streets path.b { fill:#CADCEB; stroke:none; }
.ddm-x .ddm-sh-pin { position:absolute; left:var(--x); top:var(--y); width:3.2cqw; aspect-ratio:1; translate:-50% -50%; rotate:-45deg; border-radius:50% 50% 50% 0; background:#9A9C96; box-shadow:0 .4cqw .8cqw rgb(0 0 0/.18); }
.ddm-x .ddm-sh-pin.is-o::after { content:""; position:absolute; inset:32%; border-radius:50%; background:#fff; }
.ddm-x .ddm-sh-pin.is-you { --x:50%; --y:34%; width:8cqw; background:var(--sun); box-shadow:0 0 0 .25cqw #fff, 0 1.2cqw 2cqw rgb(0 0 0/.25); }
.ddm-x .ddm-sh-ping { position:absolute; left:50%; top:43.5%; width:14cqw; aspect-ratio:2.4; translate:-50% -50%; border-radius:50%; border:.3cqw solid rgb(255 199 0/.9); opacity:0; }
.ddm-x .ddm-sh-search { position:absolute; left:5%; right:5%; top:5%; display:flex; align-items:center; gap:1.2cqw; padding:1.3cqw 2cqw; border-radius:99px; background:#fff; box-shadow:0 .6cqw 1.6cqw rgb(0 0 0/.12); font-size:1.5cqw; color:var(--ink-2); }
.ddm-x .ddm-sh-search i { width:1.6cqw; aspect-ratio:1; border-radius:50%; border:.3cqw solid var(--ink-3); }
.ddm-x .ddm-sh-listing { position:absolute; left:5%; right:5%; bottom:5%; padding:2cqw 2.2cqw; border-radius:2.2cqw; background:#fff; box-shadow:0 0 0 .3cqw var(--sun), 0 1.2cqw 2.4cqw rgb(0 0 0/.16); }
.ddm-x .ddm-sh-listing b { font-size:2.1cqw; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.ddm-x .ddm-sh-stars { display:block; margin-top:.4cqw; font-size:1.6cqw; letter-spacing:.1em; color:var(--ink); }
.ddm-x .ddm-sh-listing small { margin-top:.4cqw; font-size:1.35cqw; color:var(--ink-3); }
.ddm-x .ddm-sh-acts { display:flex; gap:1cqw; margin-top:1.4cqw; }
.ddm-x .ddm-sh-acts em { padding:.7cqw 1.6cqw; border-radius:99px; box-shadow:inset 0 0 0 1px rgb(17 17 17/.16); font-size:1.25cqw; font-weight:500; color:var(--ink); }
.ddm-x .ddm-sh-acts em:first-child { background:var(--ink); color:#fff; box-shadow:none; }
.ddm-x .ddm-sh-map.is-on .ddm-sh-pin.is-o { animation:ddm-sh-fade .4s ease both; animation-delay:calc(.1s + var(--n,0) * 80ms); }
.ddm-x .ddm-sh-map .ddm-sh-pin.is-o:nth-of-type(2) { --n:1; } .ddm-x .ddm-sh-map .ddm-sh-pin.is-o:nth-of-type(3) { --n:2; } .ddm-x .ddm-sh-map .ddm-sh-pin.is-o:nth-of-type(4) { --n:3; }
.ddm-x .ddm-sh-map.is-on .ddm-sh-search { animation:ddm-sh-rise .5s var(--ease) both; }
.ddm-x .ddm-sh-map.is-on .ddm-sh-pin.is-you { animation:ddm-sh-drop .7s cubic-bezier(.3,1.5,.6,1) .25s both; }
.ddm-x .ddm-sh-map.is-on .ddm-sh-ping { animation:ddm-sh-ping 1.6s ease-out .8s 2; }
.ddm-x .ddm-sh-map.is-on .ddm-sh-listing { animation:ddm-sh-up .6s var(--ease) 1.1s both; }
@keyframes ddm-sh-drop { from { translate:-50% calc(-50% - 22cqw); opacity:0; } 60% { opacity:1; } }
@keyframes ddm-sh-ping { 0% { opacity:1; scale:.3; } 100% { opacity:0; scale:1.6; } }

/* ---------- Phones (Get seen, Grow) ---------- */
.ddm-x .ddm-sh-screen { position:absolute; inset:1.1cqw; border-radius:5cqw; overflow:hidden; background:#fff; }
.ddm-x .ddm-sh-status { position:absolute; left:0; right:0; top:0; height:6.5%; display:flex; align-items:center; padding:0 9%; font-size:1.25cqw; }
.ddm-x .ddm-sh-status b { font-weight:600; }
.ddm-x .ddm-sh-status i { position:absolute; left:50%; top:28%; width:28%; height:42%; translate:-50% 0; border-radius:99px; background:#0b0b0c; }
.ddm-x .ddm-sh-who b { font-size:1.4cqw; font-weight:600; color:var(--ink); }
.ddm-x .ddm-sh-who small { margin-top:.2cqw; font-size:1.05cqw; color:var(--ink-3); }
.ddm-x .ddm-sh-prof { position:absolute; left:0; right:0; top:8%; height:12%; display:flex; align-items:center; gap:1.4cqw; padding:0 5% 0 23%; }
.ddm-x .ddm-sh-ring { position:absolute; left:6%; top:50%; width:6cqw; aspect-ratio:1; translate:0 -50%; border-radius:50%; background:#fff; box-shadow:0 0 0 .35cqw var(--sun), 0 0 0 .5cqw #fff, 0 0 0 .6cqw rgb(17 17 17/.12); }
.ddm-x .ddm-sh-follow { margin-left:auto; padding:.6cqw 1.3cqw; border-radius:1cqw; background:var(--ink); color:#fff; font-size:1.1cqw; font-weight:600; }
.ddm-x .ddm-sh-tiles { position:absolute; left:0; right:0; top:22%; display:grid; grid-template-columns:repeat(3,1fr); gap:.3cqw; }
.ddm-x .ddm-sh-tiles > span { position:relative; aspect-ratio:9 / 16; overflow:hidden; background:#e9e9e6; }
.ddm-x .ddm-sh-tiles > .is-reel::after { content:""; position:absolute; right:.8cqw; top:.8cqw; width:1.6cqw; aspect-ratio:1; border-radius:.4cqw; border:.25cqw solid #fff; }
.ddm-x .ddm-sh-hearts { position:absolute; right:10%; bottom:14%; width:6cqw; height:30cqw; pointer-events:none; }
.ddm-x .ddm-sh-hearts i { position:absolute; left:50%; bottom:0; width:2.6cqw; aspect-ratio:1; translate:-50% 0; opacity:0;
  background:var(--sun); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.6 4.6 0 0 1 8-3 4.6 4.6 0 0 1 8 3c0 5.8-8 11-8 11Z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.6 4.6 0 0 1 8-3 4.6 4.6 0 0 1 8 3c0 5.8-8 11-8 11Z'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 .3cqw .6cqw rgb(0 0 0/.25)); }
.ddm-x .ddm-sh-tabbar { position:absolute; left:0; right:0; bottom:0; height:7%; display:flex; justify-content:space-around; align-items:center; background:#fff; border-top:1px solid rgb(17 17 17/.07); }
.ddm-x .ddm-sh-tabbar i { width:2cqw; aspect-ratio:1; border-radius:.5cqw; border:.25cqw solid var(--ink); }
.ddm-x .ddm-sh-feed.is-on .ddm-sh-prof > * { animation:ddm-sh-fade .5s ease both; }
.ddm-x .ddm-sh-feed.is-on .ddm-sh-tiles > span { animation:ddm-sh-pop .5s cubic-bezier(.34,1.4,.64,1) both; animation-delay:calc(.2s + var(--n,0) * 80ms); }
.ddm-x .ddm-sh-tiles > span:nth-child(2) { --n:1; } .ddm-x .ddm-sh-tiles > span:nth-child(3) { --n:2; } .ddm-x .ddm-sh-tiles > span:nth-child(4) { --n:3; } .ddm-x .ddm-sh-tiles > span:nth-child(5) { --n:4; } .ddm-x .ddm-sh-tiles > span:nth-child(6) { --n:5; }
.ddm-x .ddm-sh-feed.is-on .ddm-sh-hearts i { animation:ddm-sh-heart 1.8s ease-out both; animation-delay:calc(1s + var(--n,0) * 380ms); }
.ddm-x .ddm-sh-hearts i:nth-child(2) { --n:1; --dx:-1.6cqw; } .ddm-x .ddm-sh-hearts i:nth-child(3) { --n:2; --dx:1.4cqw; } .ddm-x .ddm-sh-hearts i:nth-child(4) { --n:3; --dx:-.6cqw; }
.ddm-x .ddm-sh-feed.is-on .ddm-sh-follow { animation:ddm-sh-press .5s ease 1.6s both; }
@keyframes ddm-sh-heart { 0% { opacity:0; transform:translate(0,0) scale(.4); } 15% { opacity:1; transform:translate(0,-2cqw) scale(1.1); } 100% { opacity:0; transform:translate(var(--dx,0),-26cqw) scale(.9); } }
@keyframes ddm-sh-press { 50% { scale:.86; background:#3a3a3c; } }

.ddm-x .ddm-sh-ad-head { position:absolute; left:0; right:0; top:7%; height:8%; display:flex; align-items:center; padding-left:23%; }
.ddm-x .ddm-sh-ad-head::before { content:""; position:absolute; left:6%; top:50%; width:4.6cqw; aspect-ratio:1; translate:0 -50%; border-radius:50%; box-shadow:inset 0 0 0 1px rgb(17 17 17/.14); }
.ddm-x .ddm-sh-ad-media { position:absolute; left:0; right:0; top:16%; height:56%; overflow:hidden; background:#ddd; }
.ddm-x .ddm-sh-play { position:absolute; left:50%; top:50%; width:7cqw; aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:rgb(255 255 255/.85); opacity:0; }
.ddm-x .ddm-sh-play::after { content:""; position:absolute; left:40%; top:30%; border:1.4cqw solid transparent; border-left:2.2cqw solid var(--ink); border-right:0; }
.ddm-x .ddm-sh-prog { position:absolute; left:0; bottom:0; height:.5cqw; width:100%; background:var(--sun); transform-origin:left; scale:1 1; }
.ddm-x .ddm-sh-ad-cta { position:absolute; left:0; right:0; top:72%; height:11%; display:flex; align-items:center; justify-content:space-between; gap:1cqw; padding:0 5%; border-bottom:1px solid rgb(17 17 17/.07); }
.ddm-x .ddm-sh-ad-cta small { font-size:1.15cqw; color:var(--ink-2); }
.ddm-x .ddm-sh-ad-cta em { position:relative; padding:.9cqw 1.8cqw; border-radius:1cqw; background:var(--sun); color:var(--ink); font-size:1.25cqw; font-weight:600; }
.ddm-x .ddm-sh-tap { position:absolute; left:50%; top:50%; width:4cqw; aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:rgb(17 17 17/.25); opacity:0; }
.ddm-x .ddm-sh-call { position:absolute; inset:0; z-index:3; background:linear-gradient(180deg,rgb(24 24 26/.96),rgb(8 8 9/.98)); translate:0 -101%; transition:translate .6s cubic-bezier(.7,0,.2,1); }
.ddm-x .ddm-sh-obj.is-call .ddm-sh-call { translate:0 0; }
.ddm-x .ddm-sh-call::before, .ddm-x .ddm-sh-call::after { content:""; position:absolute; left:50%; top:31.4%; width:13cqw; aspect-ratio:1; translate:-50% -50%; border-radius:50%; border:1px solid rgb(255 255 255/.28); }
.ddm-x .ddm-sh-call-who { position:absolute; left:0; right:0; top:46%; text-align:center; }
.ddm-x .ddm-sh-call-who b { font-size:2.3cqw; font-weight:600; letter-spacing:-.03em; color:#fff; }
.ddm-x .ddm-sh-call-who small { margin-top:.6cqw; font-size:1.25cqw; color:var(--on-dark-2); }
.ddm-x .ddm-sh-call-btns { position:absolute; left:0; right:0; bottom:11%; display:flex; justify-content:space-around; padding:0 10%; }
.ddm-x .ddm-sh-call-btns i { position:relative; width:6cqw; aspect-ratio:1; border-radius:50%; background:#3a3a3c; }
.ddm-x .ddm-sh-call-btns i.yes { background:var(--sun); }
.ddm-x .ddm-sh-call-btns i::after { content:""; position:absolute; inset:30%; background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.5 15.5 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2Z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.5 15.5 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ddm-x .ddm-sh-call-btns i.no::after { rotate:135deg; }
.ddm-x .ddm-sh-call-btns i.yes::after { background:var(--ink); }
.ddm-x .ddm-sh-ad.is-on .ddm-sh-ad-head, .ddm-x .ddm-sh-ad.is-on .ddm-sh-ad-cta { animation:ddm-sh-fade .5s ease both; }
.ddm-x .ddm-sh-ad.is-on .ddm-sh-ad-media img { animation:ddm-sh-zoom 3s ease-out both; }
.ddm-x .ddm-sh-ad.is-on .ddm-sh-play { animation:ddm-sh-playic .9s ease .1s both; }
.ddm-x .ddm-sh-ad.is-on .ddm-sh-prog { animation:ddm-sh-prog 2.6s linear both; }
.ddm-x .ddm-sh-ad.is-on .ddm-sh-tap { animation:ddm-sh-tap .6s ease-out 1.9s both; }
.ddm-x .ddm-sh-ad.is-on .ddm-sh-ad-cta em { animation:ddm-sh-press .4s ease 1.9s both; }
.ddm-x .ddm-sh-obj.is-call .ddm-sh-call::before { animation:ddm-sh-ring 1.4s ease-out .5s infinite; }
.ddm-x .ddm-sh-obj.is-call .ddm-sh-call::after { animation:ddm-sh-ring 1.4s ease-out 1.2s infinite; }
.ddm-x .ddm-sh-obj.is-call .ddm-sh-call-btns i.yes { animation:ddm-sh-buzz 1.4s ease-in-out .6s infinite; }
.ddm-x .ddm-sh-obj.is-call .ddm-sh-mark { animation:ddm-sh-buzz 1.4s ease-in-out .6s infinite; }
@keyframes ddm-sh-playic { 0% { opacity:0; scale:.6; } 30% { opacity:1; scale:1; } 100% { opacity:0; scale:1.3; } }
@keyframes ddm-sh-prog { from { scale:0 1; } }
@keyframes ddm-sh-tap { 0% { opacity:.9; scale:.2; } 100% { opacity:0; scale:2.4; } }
@keyframes ddm-sh-ring { 0% { opacity:1; scale:1; } 100% { opacity:0; scale:1.9; } }
@keyframes ddm-sh-buzz { 0%,40%,100% { rotate:0deg; } 10%,30% { rotate:-8deg; } 20% { rotate:8deg; } }

/* Shared entrances */
@keyframes ddm-sh-fade { from { opacity:0; } }
@keyframes ddm-sh-rise { from { opacity:0; translate:0 1.6cqw; } }
@keyframes ddm-sh-up { from { opacity:0; translate:0 6cqw; } }
@keyframes ddm-sh-pop { from { opacity:0; scale:.8; } }
@keyframes ddm-sh-zoom { from { scale:1.1; } }

/* ---------- Steps and caption ---------- */
.ddm-x .ddm-sh-steps { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:clamp(4px,1vw,12px) 0 0; padding:0; list-style:none; }
.ddm-x .ddm-sh-steps button { position:relative; overflow:hidden; padding:9px 16px 10px; border:0; border-radius:99px; background:rgb(255 255 255/.7); color:var(--ink-2); font:500 .86rem/1 var(--font, inherit); cursor:pointer;
  box-shadow:inset 0 0 0 1px rgb(17 17 17/.1); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .3s, color .3s, box-shadow .3s; }
.ddm-x .ddm-sh-steps button:hover { color:var(--ink); box-shadow:inset 0 0 0 1px rgb(17 17 17/.22); }
.ddm-x .ddm-sh-steps button:focus-visible { outline:2px solid var(--blue-ink); outline-offset:2px; }
.ddm-x .ddm-sh-steps button[aria-pressed="true"] { background:var(--ink); color:#fff; box-shadow:none; }
.ddm-x .ddm-sh-steps button i { position:absolute; left:14px; right:14px; bottom:4px; height:2px; border-radius:2px; background:var(--sun); transform-origin:left; scale:0 1; }
.ddm-x .ddm-sh-steps button.is-run i { animation:ddm-sh-meter var(--dur,4s) linear both; }
@keyframes ddm-sh-meter { to { scale:1 1; } }
.ddm-x .ddm-sh-cap { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:4px 12px; min-height:3.2em; margin:16px auto 0; max-width:560px; text-align:center; color:var(--ink-2); font-size:.95rem; }
.ddm-x .ddm-sh-cap-k { font:500 .7rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--blue-ink); }
.ddm-x .ddm-sh-cap.is-swap > * { animation:ddm-sh-capin .45s var(--ease) both; }
@keyframes ddm-sh-capin { from { opacity:0; translate:0 6px; } }

/* ---------- Smaller screens ---------- */
@media (max-width:980px) {
  .ddm-x .ddm-sh-grid { grid-template-columns:1fr; }
  .ddm-x .ddm-sh { max-width:640px; width:100%; margin:0 auto; }
}
@media (max-width:640px) {
  .ddm-x .ddm-sh-steps { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; margin-inline:-16px; padding:2px 16px; }
  .ddm-x .ddm-sh-steps button { white-space:nowrap; }
  .ddm-x .ddm-sh-hero .ddm-sv-title .ddm-mark { white-space:normal; }
}

/* ---------- Preferences ---------- */
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-sh-obj, .ddm-x .ddm-sh-mark, .ddm-x .ddm-sh-l, .ddm-x .ddm-sh-call, .ddm-x .ddm-sh-sheet, .ddm-x .ddm-sh-card { transition:none !important; }
  .ddm-x .ddm-sh-obj *, .ddm-x .ddm-sh-obj, .ddm-x .ddm-sh-cap > *, .ddm-x .ddm-sh-steps i { animation:none !important; }
}
@media (forced-colors:active) {
  .ddm-x .ddm-sh-obj { border:1px solid CanvasText; }
  .ddm-x .ddm-sh-steps button { border:1px solid ButtonText; }
}