/* Deft Digital Media — Websites page, its unique element only (Daniel, October 24, 2026): "From search to ring",
   rebuilt from Daniel's real phone search screenshots (typing with suggestions, the results page with Places, the call)
   without any search-engine branding: no logo, no other companies' names or ratings, our own greys.
   The rest of the page is the shared service template (styles/service.css, prefix ddm-se-). Prefix here: ddm-ws-.
   Only the client's listing gets the Sunflower: the Get Found pin with its ring and pulse, the stars, the call.
   Motion: scripts/websites.js. Page scroll also scrolls the results and the site inside the phone. Nothing loops. */

/* ---------- The phone: one bezel, three screens; data-beat (0-4) picks what shows ---------- */
.ddm-x .ddm-ws-phone { --w:min(300px,30vw); position:relative; z-index:1; width:var(--w); aspect-ratio:9 / 19.5; padding:10px; border-radius:46px; background:#0d0d0e;
  box-shadow:0 50px 90px -40px rgb(0 0 0/.6), inset 0 0 0 1px rgb(255 255 255/.12), 0 0 0 1px rgb(17 17 17/.08); font-size:11px; color:#1d1d1f; }
.ddm-x .ddm-ws-island { position:absolute; z-index:9; top:20px; left:50%; width:30%; height:22px; translate:-50% 0; border-radius:12px; background:#0d0d0e; }
.ddm-x .ddm-ws-scr { position:absolute; inset:10px; border-radius:36px; overflow:hidden; background:#fff; opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility 0s .45s; }
.ddm-x .ddm-ws-phone[data-beat="0"] .ddm-ws-type,
.ddm-x .ddm-ws-phone:is([data-beat="1"],[data-beat="2"]) .ddm-ws-res,
.ddm-x .ddm-ws-phone:is([data-beat="3"],[data-beat="4"]) .ddm-ws-sitescr { opacity:1; visibility:visible; transition:opacity .45s var(--ease); }
.ddm-x .ddm-ws-phone svg { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ddm-x .ddm-ws-mag { width:15px; height:15px; flex:none; color:#8A8A86; }

/* ---------- 0: typing; the letters decode out of digits, suggestions drop in under them, the keyboard slides up ---------- */
.ddm-x .ddm-ws-type { padding-top:50px; }
.ddm-x .ddm-ws-tbar { display:flex; align-items:center; gap:10px; padding:0 16px 12px; border-bottom:1px solid rgb(17 17 17/.1); font-size:1.15em; white-space:nowrap; overflow:hidden; }
.ddm-x .ddm-ws-tbar > b { font-weight:300; font-size:1.6em; line-height:1; }
.ddm-x .ddm-ws-tbar > em { margin-left:auto; padding-left:8px; font-style:normal; font-size:1.4em; color:#8A8A86; }
.ddm-x .ddm-ws-ghost { color:#B5B5B0; }
.ddm-x .ddm-ws-caret { flex:none; width:1.5px; height:15px; margin-left:-9px; background:var(--ink); }
.ddm-x .ddm-ws-type.is-typing .ddm-ws-caret { animation:ddm-se-blink 1s steps(1,end) 6 both; }
.ddm-x .ddm-ws-sugg { margin:6px 0 0; padding:0; list-style:none; }
.ddm-x .ddm-ws-sugg li { display:flex; align-items:center; gap:12px; padding:8.5px 16px; font-size:1.05em; transition:opacity .3s var(--ease), translate .3s var(--ease), background .3s; }
.ddm-x .ddm-ws-sugg li span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ddm-x .ddm-ws-sugg li b { font-weight:600; }
.ddm-x .ddm-ws-sugg li > i { flex:none; position:relative; width:10px; height:10px; border-left:1.5px solid #8A8A86; border-top:1.5px solid #8A8A86; }
.ddm-x .ddm-ws-sugg li > i::after { content:""; position:absolute; left:-1px; top:-1px; width:13px; height:1.5px; background:#8A8A86; rotate:45deg; transform-origin:0 50%; }
.ddm-x .ddm-ws-story.is-live .ddm-ws-sugg li { opacity:0; translate:0 -6px; }
.ddm-x .ddm-ws-story.is-live .ddm-ws-type.is-sugg .ddm-ws-sugg li { opacity:1; translate:0 0; transition-delay:calc(var(--k,0) * 70ms); }
.ddm-x .ddm-ws-sugg li:nth-child(2) { --k:1; } .ddm-x .ddm-ws-sugg li:nth-child(3) { --k:2; } .ddm-x .ddm-ws-sugg li:nth-child(4) { --k:3; } .ddm-x .ddm-ws-sugg li:nth-child(5) { --k:4; } .ddm-x .ddm-ws-sugg li:nth-child(6) { --k:5; }
.ddm-x .ddm-ws-type.is-picked .ddm-ws-sugg li.is-pick { background:rgb(17 17 17/.07); }
.ddm-x .ddm-ws-kb { position:absolute; left:0; right:0; bottom:0; display:grid; gap:7px; padding:9px 4px 26px; background:#D3D5DA; translate:0 100%; transition:translate .5s var(--ease); }
.ddm-x .ddm-ws-phone[data-beat="0"] .ddm-ws-type:not(.is-picked) .ddm-ws-kb { translate:0 0; transition-delay:.1s; }
.ddm-x .ddm-ws-type.is-picked .ddm-ws-kb { transition-delay:.3s; }
.ddm-x .ddm-ws-kb p { display:flex; justify-content:center; gap:4px; margin:0; }
.ddm-x .ddm-ws-kb i { flex:0 0 8.6%; display:grid; place-items:center; height:29px; border-radius:5px; background:#fff; box-shadow:0 1px 0 rgb(0 0 0/.25); font-style:normal; font-size:1.15em; color:#111; transition:background .12s, scale .12s; }
.ddm-x .ddm-ws-kb p:nth-child(2) { padding-inline:4.5%; }
.ddm-x .ddm-ws-kb i.is-mod { flex-basis:12%; background:#ABAFB7; font-size:1em; }
.ddm-x .ddm-ws-kb i.is-wide { flex-basis:22%; }
.ddm-x .ddm-ws-kb i.is-space { flex:1; font-size:.95em; color:#6E6E73; }
.ddm-x .ddm-ws-kb i.is-go { flex-basis:22%; background:var(--ink); color:#fff; font-size:.95em; }
.ddm-x .ddm-ws-kb i.is-press { background:#ABAFB7; scale:1.14; }

/* ---------- 1 + 2: the results page with Places; the page scroll moves it like a thumb. In 2 the no-website listing fades ---------- */
.ddm-x .ddm-ws-res { display:flex; flex-direction:column; }
.ddm-x .ddm-ws-rtop { position:relative; z-index:2; flex:none; padding:48px 12px 0; background:#fff; box-shadow:0 1px 0 rgb(17 17 17/.08); }
.ddm-x .ddm-ws-rbar { display:flex; align-items:center; gap:9px; padding:10px 14px; border-radius:999px; background:#fff; box-shadow:0 2px 8px -2px rgb(0 0 0/.22), inset 0 0 0 1px rgb(17 17 17/.06); font-size:1.02em; white-space:nowrap; overflow:hidden; }
.ddm-x .ddm-ws-rbar span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.ddm-x .ddm-ws-rbar svg:not(.ddm-ws-mag) { flex:none; width:14px; height:14px; color:#5F5F5C; }
.ddm-x .ddm-ws-tabs { display:flex; gap:15px; margin:0; padding:10px 4px 0; list-style:none; color:#6E6E73; font-size:.95em; white-space:nowrap; }
.ddm-x .ddm-ws-tabs li { padding-bottom:8px; }
.ddm-x .ddm-ws-tabs li.is-on { color:var(--ink); font-weight:600; box-shadow:inset 0 -2.5px 0 var(--ink); }
.ddm-x .ddm-ws-feed { position:relative; flex:1; overflow:hidden; }
.ddm-x .ddm-ws-roll { padding:0 12px 40px; transform:translate3d(0,calc(var(--roll,0) * -1px),0); transition:transform .3s cubic-bezier(.2,.7,.3,1); will-change:transform; }
.ddm-x .ddm-ws-loc { display:flex; align-items:center; gap:6px; margin:0 -12px; padding:10px 14px; border-bottom:6px solid #F1F1EE; font-weight:600; font-size:.95em; }
.ddm-x .ddm-ws-loc svg { width:13px; height:13px; }
.ddm-x .ddm-ws-loc small { margin-left:auto; padding:4px 9px; border-radius:999px; box-shadow:inset 0 0 0 1px rgb(17 17 17/.18); font-weight:500; font-size:.9em; color:#5F5F5C; }
.ddm-x .ddm-ws-ph { margin:14px 2px 10px; font-size:1.45em; font-weight:500; letter-spacing:-.01em; }
.ddm-x .ddm-ws-map { position:relative; height:118px; border-radius:12px; overflow:hidden; background:#E6E9E2; }
.ddm-x .ddm-ws-park { position:absolute; border-radius:40%; background:#D3E2CC; }
.ddm-x .ddm-ws-park.a { left:6%; top:8%; width:22%; height:30%; } .ddm-x .ddm-ws-park.b { left:34%; top:70%; width:18%; height:24%; }
.ddm-x .ddm-ws-rd { position:absolute; background:#fff; box-shadow:0 0 0 1px rgb(17 17 17/.05); }
.ddm-x .ddm-ws-rd.a { left:-10%; right:-10%; top:36%; height:5px; rotate:-6deg; } .ddm-x .ddm-ws-rd.b { left:-10%; right:20%; top:72%; height:4px; rotate:3deg; }
.ddm-x .ddm-ws-rd.c { top:-10%; bottom:-10%; left:30%; width:4px; rotate:4deg; } .ddm-x .ddm-ws-rd.d { top:-10%; bottom:-10%; left:62%; width:5px; rotate:-3deg; }
.ddm-x .ddm-ws-rd.e { left:-10%; right:-10%; top:14%; height:3px; rotate:2deg; background:#F7E9B8; }
.ddm-x .ddm-ws-sea { position:absolute; right:-6%; top:-10%; bottom:-10%; width:20%; background:#C6D7DE; border-radius:40% 0 0 30%; }
.ddm-x .ddm-ws-pin { width:15px; height:15px; }
.ddm-x .ddm-ws-pin::after { inset:4.5px; }
.ddm-x .ddm-ws-pin.q1 { left:20%; top:52%; } .ddm-x .ddm-ws-pin.q2 { left:44%; top:32%; } .ddm-x .ddm-ws-pin.q3 { left:76%; top:82%; } .ddm-x .ddm-ws-pin.q4 { left:70%; top:30%; }
/* The client's pin: the same pin and Sunflower ring as Get Found's map (get-found.css .ddm-gf-hp.hy), with its pulse */
.ddm-x .ddm-ws-pin.qy { left:56%; top:66%; z-index:2; background:var(--ink); scale:1.35; box-shadow:0 0 0 3px var(--sun), 0 0 16px 3px rgb(255 199 0/.6); }
.ddm-x .ddm-ws-pulse { position:absolute; inset:-8px; border-radius:50%; box-shadow:0 0 0 2px rgb(255 199 0/.85); opacity:0; }
.ddm-x .ddm-ws-phone[data-beat="1"] .ddm-ws-pulse { animation:ddm-se-wave 1.6s ease-out .6s 3 both; }
.ddm-x .ddm-ws-mlab { position:absolute; left:61%; top:61%; padding:2px 6px; border-radius:6px; background:rgb(255 255 255/.9); box-shadow:0 2px 6px -3px rgb(0 0 0/.3); font-size:.8em; font-weight:600; white-space:nowrap; }
.ddm-x .ddm-ws-place { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; padding:12px 2px; border-bottom:1px solid rgb(17 17 17/.1); transition:opacity .5s var(--ease), filter .5s var(--ease); }
.ddm-x .ddm-ws-place > div { display:grid; gap:2px; align-content:start; min-width:0; }
.ddm-x .ddm-ws-place b { font-size:1.2em; font-weight:500; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ddm-x .ddm-ws-place small { font-size:.92em; color:#6E6E73; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ddm-x .ddm-ws-rate { display:flex; align-items:center; gap:5px; }
.ddm-x .ddm-ws-open { font-style:normal; color:#1E7B3A; font-weight:500; }
.ddm-x .ddm-ws-nosite { color:var(--ink-2) !important; font-weight:600; }
.ddm-x .ddm-ws-stars { display:inline-flex; gap:1.5px; flex:none; }
.ddm-x .ddm-ws-stars i { width:9px; height:9px; background:rgb(17 17 17/.14); clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 36%); }
.ddm-x .ddm-ws-stars.is-4 i:nth-child(-n+4) { background:#9A9A95; }
.ddm-x .ddm-ws-stars.is-you i { background:var(--sun); }
.ddm-x .ddm-ws-thumbs { display:flex; gap:3px; }
.ddm-x .ddm-ws-thumbs img, .ddm-x .ddm-ws-thumbs i { width:46px; height:58px; border-radius:8px; object-fit:cover; }
.ddm-x .ddm-ws-thumbs.is-empty i { background:#ECECE8; }
.ddm-x .ddm-ws-acts { grid-column:1 / -1; display:flex; gap:5px; margin:6px 0 0; overflow:hidden; }
.ddm-x .ddm-ws-acts em { flex:none; display:inline-flex; align-items:center; gap:4px; padding:6px 10px; border-radius:999px; font-style:normal; font-size:.92em; font-weight:500; box-shadow:inset 0 0 0 1px rgb(17 17 17/.2); }
.ddm-x .ddm-ws-acts svg { width:11px; height:11px; }
.ddm-x .ddm-ws-place.is-you { margin-inline:-12px; padding-inline:14px; background:linear-gradient(90deg,rgb(255 199 0/.12),rgb(255 199 0/0) 70%); box-shadow:inset 3px 0 0 var(--sun); }
.ddm-x .ddm-ws-place.is-you .ddm-ws-web { box-shadow:inset 0 0 0 1.5px var(--ink); transition:background .3s, box-shadow .3s; }
.ddm-x .ddm-ws-phone[data-beat="2"] .ddm-ws-place.is-none { opacity:.3; filter:grayscale(1) blur(.4px); }
.ddm-x .ddm-ws-phone[data-beat="2"] .ddm-ws-pin.is-none { opacity:.3; }
.ddm-x .ddm-ws-phone[data-beat="2"] .ddm-ws-place.is-you .ddm-ws-web { background:var(--sun); box-shadow:0 0 0 3px rgb(255 199 0/.35); }
.ddm-x .ddm-ws-more { display:flex; align-items:center; justify-content:center; gap:6px; margin:12px 0 0; padding:10px; border-radius:999px; background:#F1F1EE; font-weight:500; }
.ddm-x .ddm-ws-web-r { margin:0 -12px; padding:14px 14px 4px; border-top:6px solid #F1F1EE; margin-top:14px; display:grid; gap:6px; }
.ddm-x .ddm-ws-web-r i { height:8px; border-radius:4px; background:#ECECE8; }
.ddm-x .ddm-ws-web-r i:first-child { width:42%; height:7px; } .ddm-x .ddm-ws-web-r i:nth-child(2) { width:78%; height:11px; background:#E2E2DE; }
.ddm-x .ddm-ws-web-r i:nth-child(3) { width:92%; } .ddm-x .ddm-ws-web-r i:nth-child(4) { width:64%; }

/* ---------- 3: the site opens through a lens from the Website button and scrolls with the page; 4: the call ---------- */
.ddm-x .ddm-ws-site { position:absolute; inset:0; padding-top:44px; background:#fff; clip-path:circle(0% at var(--lx,50%) var(--ly,34%)); transition:clip-path .9s cubic-bezier(.65,0,.25,1) .35s; }
.ddm-x .ddm-ws-phone:is([data-beat="3"],[data-beat="4"]) .ddm-ws-site { clip-path:circle(150% at var(--lx,50%) var(--ly,34%)); }
.ddm-x .ddm-ws-url { position:relative; z-index:2; padding:4px 12px 8px; background:#fff; }
.ddm-x .ddm-ws-url span { display:block; padding:6px 10px; border-radius:10px; background:#F1F1EE; text-align:center; font-size:.85em; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ddm-x .ddm-ws-sview { position:absolute; inset:82px 0 0; display:flex; flex-direction:column; overflow:hidden; background:#FAFAF8; }
.ddm-x .ddm-ws-sclip { position:relative; flex:1; overflow:hidden; }
.ddm-x .ddm-ws-sroll { padding-bottom:20px; transform:translate3d(0,calc(var(--sroll,0) * -1px),0); transition:transform .3s cubic-bezier(.2,.7,.3,1); will-change:transform; }
/* The site itself: Galaxy Glass's real mobile Our work page (from Daniel's screenshot, Oct 24), rebuilt small */
.ddm-x .ddm-ws-gx-top { display:flex; align-items:center; justify-content:space-between; padding:6px 12px; background:#0E0F18; color:#fff; font-size:.78em; font-weight:700; }
.ddm-x .ddm-ws-gx-top span { padding:2px 5px; border:1px solid #B7282E; border-radius:2px; color:#E0565B; letter-spacing:.06em; font-size:.85em; }
.ddm-x .ddm-ws-gx-head { position:relative; z-index:2; display:flex; align-items:center; gap:8px; padding:8px 12px; background:#fff; border-bottom:1px solid rgb(17 17 17/.08); }
.ddm-x .ddm-ws-gx-head img { width:64px; height:34px; object-fit:cover; mix-blend-mode:multiply; margin-right:auto; }
.ddm-x .ddm-ws-gx-call { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#B3262B; box-shadow:0 6px 12px -4px rgb(179 38 43/.6); }
.ddm-x .ddm-ws-gx-call svg { width:13px; height:13px; fill:#fff; stroke:none; }
.ddm-x .ddm-ws-gx-menu { display:flex; align-items:center; gap:5px; padding:7px 9px; border:1px solid rgb(17 17 17/.16); border-radius:4px; font-size:.9em; font-weight:500; }
.ddm-x .ddm-ws-gx-menu i { width:11px; height:7px; border-block:1.5px solid var(--ink); position:relative; }
.ddm-x .ddm-ws-gx-menu i::after { content:""; position:absolute; left:0; right:0; top:1.25px; height:1.5px; background:var(--ink); }
.ddm-x .ddm-ws-gx-body { padding:16px 12px 0; background:#FAFAF8; }
.ddm-x .ddm-ws-gx-body h4 { margin:0 0 8px; font-size:2.3em; font-weight:700; letter-spacing:-.04em; line-height:1; color:#0E0F18; }
.ddm-x .ddm-ws-gx-body > p { margin:0 0 12px; font-size:.98em; line-height:1.45; color:#5A5D6B; }
.ddm-x .ddm-ws-gx-chips { display:flex; flex-wrap:wrap; gap:5px; margin:0 0 12px; padding:0; list-style:none; }
.ddm-x .ddm-ws-gx-chips li { padding:6px 10px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px rgb(17 17 17/.14); font-size:.88em; font-weight:500; }
.ddm-x .ddm-ws-gx-chips li small { margin-left:4px; color:#8A8A86; }
.ddm-x .ddm-ws-gx-chips li.is-on { background:#0E0F18; color:#fff; box-shadow:none; }
.ddm-x .ddm-ws-gx-chips li.is-on small { color:rgb(255 255 255/.6); }
.ddm-x .ddm-ws-gx-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:5px; }
.ddm-x .ddm-ws-gx-grid img { width:100%; aspect-ratio:3 / 4; object-fit:cover; border-radius:9px; }
.ddm-x .ddm-ws-phone[data-beat="4"] .ddm-ws-gx-call { animation:ddm-se-press .5s var(--ease) .25s both; }
/* The call sheet slides up from the bottom (Call / Cancel), then the call screen rings */
.ddm-x .ddm-ws-dim { position:absolute; z-index:3; inset:0; background:rgb(0 0 0/.28); opacity:0; transition:opacity .35s var(--ease); }
.ddm-x .ddm-ws-phone[data-beat="4"] .ddm-ws-dim { opacity:1; transition-delay:.6s; }
.ddm-x .ddm-ws-sheet { position:absolute; z-index:4; left:8px; right:8px; bottom:10px; display:grid; gap:6px; translate:0 130%; transition:translate .45s var(--ease); }
.ddm-x .ddm-ws-sheet p { display:grid; gap:2px; margin:0; padding:12px; border-radius:16px; background:rgb(250 250 250/.97); text-align:center; }
.ddm-x .ddm-ws-sheet p small { color:#6E6E73; font-size:.85em; }
.ddm-x .ddm-ws-sheet p b { font-size:1.05em; font-weight:600; }
.ddm-x .ddm-ws-sheet p em { margin-top:8px; padding-top:10px; border-top:1px solid rgb(17 17 17/.1); font-style:normal; font-weight:600; font-size:1.15em; }
.ddm-x .ddm-ws-sheet > em { padding:12px; border-radius:16px; background:#fff; text-align:center; font-style:normal; font-weight:600; font-size:1.1em; }
.ddm-x .ddm-ws-phone[data-beat="4"] .ddm-ws-sheet { translate:0 0; transition-delay:.6s; }
.ddm-x .ddm-ws-phone[data-beat="4"] .ddm-ws-sheet p em { animation:ddm-ws-hit .5s var(--ease) 1.35s both; }
@keyframes ddm-ws-hit { 40% { background:rgb(255 199 0/.35); } 100% { background:transparent; } }
.ddm-x .ddm-ws-ring { position:absolute; z-index:5; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:radial-gradient(90% 60% at 50% 30%,#232325,#0b0b0c); color:#fff; opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility 0s .4s; }
.ddm-x .ddm-ws-phone[data-beat="4"] .ddm-ws-ring { opacity:1; visibility:visible; transition:opacity .45s var(--ease) 1.75s; }
.ddm-x .ddm-ws-ring > i { position:relative; display:grid; place-items:center; width:66px; height:66px; margin-bottom:12px; border-radius:50%; background:var(--sun); }
.ddm-x .ddm-ws-ring > i img { width:60%; height:60%; border-radius:10px; }
.ddm-x .ddm-ws-ring > i::before, .ddm-x .ddm-ws-ring > i::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 2px rgb(255 199 0/.8); opacity:0; }
.ddm-x .ddm-ws-phone[data-beat="4"] .ddm-ws-ring > i::before { animation:ddm-se-wave 1.4s ease-out 2.1s 3 both; }
.ddm-x .ddm-ws-phone[data-beat="4"] .ddm-ws-ring > i::after { animation:ddm-se-wave 1.4s ease-out 2.8s 3 both; }
.ddm-x .ddm-ws-ring b { font-size:1.4em; font-weight:600; }
.ddm-x .ddm-ws-ring small { color:var(--on-dark-2,rgb(255 255 255/.7)); font-size:1em; }
.ddm-x .ddm-ws-ring p { display:flex; gap:22px; margin:38px 0 0; }
.ddm-x .ddm-ws-ring p span { width:40px; height:40px; border-radius:50%; background:rgb(255 255 255/.14); }
.ddm-x .ddm-ws-ring p span.is-end { background:#E5484D; }

/* ---------- The tap: a soft dot where a thumb lands (the suggestion, Website, the site's call button, then Call) ---------- */
.ddm-x .ddm-ws-tap { position:absolute; z-index:8; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; background:rgb(255 255 255/.55); box-shadow:0 0 0 1px rgb(17 17 17/.14), 0 6px 14px -6px rgb(0 0 0/.4); opacity:0; pointer-events:none; }
.ddm-x .ddm-ws-phone[data-beat="0"] .ddm-ws-type.is-picked ~ .ddm-ws-tap.t1 { left:var(--px,50%); top:var(--py,24%); animation:ddm-se-tap .8s var(--ease) both; }
.ddm-x .ddm-ws-phone[data-beat="3"] .ddm-ws-tap.t1 { left:var(--tx,50%); top:var(--ty,34%); animation:ddm-se-tap .8s var(--ease) both; }
.ddm-x .ddm-ws-phone[data-beat="4"] .ddm-ws-tap.t1 { left:var(--cx,72%); top:var(--cy0,17%); animation:ddm-se-tap .8s var(--ease) .15s both; }
.ddm-x .ddm-ws-phone[data-beat="4"] .ddm-ws-tap.t2 { left:50%; top:var(--cy,83%); animation:ddm-se-tap .8s var(--ease) 1.2s both; }

/* ---------- Phones and tablets ---------- */
@media (max-width:960px) { .ddm-x .ddm-ws-phone { --w:min(230px,38vw); } }
@media (max-width:640px) { .ddm-x .ddm-ws-phone { --w:290px; zoom:.44; } } /* the desktop phone, scaled whole so its screens keep their layout */

/* ---------- Reduced motion, forced colors ---------- */
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-ws-site { clip-path:none; transition:none; }
  .ddm-x :is(.ddm-ws-roll,.ddm-ws-sroll) { transition:none; }
  .ddm-x .ddm-ws-story.is-live .ddm-ws-sugg li { opacity:1; translate:0 0; }
  .ddm-x :is(.ddm-ws-tap,.ddm-ws-pulse) { display:none; }
  .ddm-x .ddm-ws-phone[data-beat="4"] :is(.ddm-ws-sheet,.ddm-ws-dim) { opacity:0; }
  .ddm-x .ddm-ws-phone[data-beat="4"] .ddm-ws-ring { transition:none; }
}
@media (forced-colors:active) { .ddm-x .ddm-ws-phone { border:1px solid CanvasText; } }

/* ---------- Field gallery, "camera roll to gallery" (Daniel, Oct 24): a messy camera roll sorts itself into the gallery.
   Desktop: the stage pins and the scroll drives it. Tablets and phones: it plays once on arrival. scripts/websites.js ---------- */
.ddm-x .ddm-ws-cr-head { margin-bottom:clamp(20px,3vw,40px); }
.ddm-x .ddm-ws-cr-wrap { position:relative; }
.ddm-x .ddm-ws-cr.is-pinned .ddm-ws-cr-wrap { height:250vh; }
.ddm-x .ddm-ws-cr-stage { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:clamp(32px,5vw,80px); }
.ddm-x .ddm-ws-cr.is-pinned .ddm-ws-cr-stage { position:sticky; top:var(--nav-h,72px); height:calc(100vh - var(--nav-h,72px)); }
.ddm-x .ddm-ws-cr-left { display:grid; justify-items:center; gap:22px; }
/* The phone's Photos screen */
.ddm-x .ddm-ws-cr-phone { position:relative; width:min(260px,24vw); aspect-ratio:9 / 19.5; padding:9px; border-radius:42px; background:#0d0d0e; font-size:10px;
  box-shadow:0 50px 90px -40px rgb(0 0 0/.6), inset 0 0 0 1px rgb(255 255 255/.12); }
.ddm-x .ddm-ws-cr-phone .ddm-ws-island { top:18px; height:20px; }
.ddm-x .ddm-ws-cr-scr { position:absolute; inset:9px; display:flex; flex-direction:column; border-radius:33px; overflow:hidden; background:#fff; }
.ddm-x .ddm-ws-cr-top { display:flex; align-items:baseline; justify-content:space-between; margin:0; padding:46px 12px 8px; }
.ddm-x .ddm-ws-cr-top b { font-size:2em; letter-spacing:-.02em; }
.ddm-x .ddm-ws-cr-top small { padding:4px 9px; border-radius:999px; background:rgb(17 17 17/.07); font-size:1.05em; font-weight:600; }
.ddm-x .ddm-ws-cr-grid { flex:1; display:grid; grid-template-columns:repeat(4,1fr); align-content:start; gap:1.5px; margin:0; padding:0; list-style:none; }
.ddm-x .ddm-ws-cr-grid li { position:relative; aspect-ratio:1; overflow:hidden; background:#E8E8E4; transition:opacity .4s var(--ease), filter .4s var(--ease); }
.ddm-x .ddm-ws-cr-grid img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ddm-x .ddm-ws-cr-grid li[data-to] img { rotate:var(--rot,0deg); scale:1.22; filter:brightness(var(--dim,1)); }
.ddm-x .ddm-ws-cr-grid li[data-to][style*="90deg"] img { scale:1; }
.ddm-x .ddm-ws-cr-grid li.is-dark img { filter:brightness(.18) contrast(.9); }
.ddm-x .ddm-ws-cr-grid li.is-thumb b { position:absolute; left:-30%; bottom:-35%; width:95%; height:95%; border-radius:50%; background:radial-gradient(circle at 60% 40%,#E9B39A,#B87A62 70%); filter:blur(3px); }
.ddm-x .ddm-ws-cr-grid li.is-receipt { display:grid; align-content:start; gap:3px; padding:14% 22%; background:#CFCBC2; }
.ddm-x .ddm-ws-cr-grid li.is-receipt i { height:2px; background:rgb(17 17 17/.35); }
.ddm-x .ddm-ws-cr-grid li.is-receipt i:nth-child(odd) { width:70%; }
.ddm-x .ddm-ws-cr-grid li.is-receipt b { height:5px; margin-top:4px; background:rgb(17 17 17/.5); }
.ddm-x .ddm-ws-cr-grid li.is-receipt::before { content:""; position:absolute; inset:8% 16%; z-index:-1; background:#FBFAF6; box-shadow:0 2px 4px rgb(0 0 0/.2); rotate:-4deg; }
.ddm-x .ddm-ws-cr-grid li.is-receipt { isolation:isolate; }
.ddm-x .ddm-ws-cr-grid li.is-r2::before { rotate:6deg; }
.ddm-x .ddm-ws-cr-grid li.is-shot { display:grid; align-content:start; gap:3px; padding:10% 12%; background:#F3F3F1; }
.ddm-x .ddm-ws-cr-grid li.is-shot i { height:5px; border-radius:3px; background:#D9D9D5; }
.ddm-x .ddm-ws-cr-grid li.is-shot i:first-child { height:8px; width:60%; background:#2B2B2E; }
.ddm-x .ddm-ws-cr-grid li.is-shot i:nth-child(3) { width:80%; } .ddm-x .ddm-ws-cr-grid li.is-shot i:nth-child(5) { width:55%; }
.ddm-x .ddm-ws-cr-grid li.is-s2 { background:#1F2A3A; } .ddm-x .ddm-ws-cr-grid li.is-s2 i { background:#3B4A60; } .ddm-x .ddm-ws-cr-grid li.is-s2 i:first-child { background:#E9EEF6; }
/* Picked: a Sunflower check lands on the good shots; the rest dims; a picked tile empties once its photo has left */
.ddm-x .ddm-ws-cr-grid li[data-to]::after { content:""; position:absolute; right:4px; bottom:4px; width:13px; height:13px; border-radius:50%; background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5 10 16.5 18 8' fill='none' stroke='%23111' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; box-shadow:0 0 0 1.5px #fff; scale:0; transition:scale .35s cubic-bezier(.3,1.6,.5,1); }
.ddm-x .ddm-ws-cr-grid li.is-picked::after { scale:1; }
.ddm-x .ddm-ws-cr-grid li.is-gone img { opacity:.12; }
.ddm-x .ddm-ws-cr-grid li.is-gone::after { scale:0; }
.ddm-x .ddm-ws-cr.is-sorting .ddm-ws-cr-grid li.is-junk { opacity:.28; filter:grayscale(1); }
.ddm-x .ddm-ws-cr-tabs { display:flex; justify-content:space-around; margin:0; padding:9px 8px 20px; border-top:1px solid rgb(17 17 17/.08); background:rgb(250 250 250/.96); color:#8A8A86; font-weight:600; }
.ddm-x .ddm-ws-cr-tabs .is-on { color:var(--ink); }
/* The three steps under the phone light in turn */
.ddm-x .ddm-ws-cr-steps { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.ddm-x .ddm-ws-cr-steps li { display:flex; align-items:center; gap:10px; color:var(--ink-3); font-weight:500; transition:color .35s var(--ease); }
.ddm-x .ddm-ws-cr-steps i { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font-style:normal; font-size:.78rem; font-weight:600; background:rgb(17 17 17/.06); transition:background .35s, box-shadow .35s; }
.ddm-x .ddm-ws-cr-steps li.is-on { color:var(--ink); }
.ddm-x .ddm-ws-cr-steps li.is-on i { background:var(--sun); box-shadow:0 0 0 3px rgb(255 199 0/.3); }
/* The gallery: the shared field grid, its tiles fly in from the roll (inline transforms from the script) */
.ddm-x .ddm-ws-cr-filters { margin-bottom:16px; transition:opacity .4s var(--ease); }
.ddm-x .ddm-ws-cr.is-live:not(.is-done) .ddm-ws-cr-filters { opacity:.35; }
.ddm-x .ddm-ws-cr-field li { position:relative; transform-origin:0 0; }
.ddm-x .ddm-ws-cr-field li.is-flying { z-index:5; }
.ddm-x .ddm-ws-cr-field li.is-flying .ddm-se-job { box-shadow:0 24px 40px -18px rgb(0 0 0/.55); }
.ddm-x .ddm-ws-cr-field .ddm-se-job > span { transition:opacity .4s var(--ease), translate .4s var(--ease); }
.ddm-x .ddm-ws-cr.is-live .ddm-ws-cr-field li:not(.is-landed) .ddm-se-job > span { opacity:0; translate:0 6px; }
.ddm-x .ddm-ws-cr.is-live .ddm-ws-cr-field li.is-waiting { border-radius:18px; box-shadow:inset 0 0 0 1.5px rgb(17 17 17/.12); background:repeating-linear-gradient(135deg,rgb(17 17 17/.025) 0 8px,transparent 8px 16px); }
.ddm-x .ddm-ws-cr.is-live .ddm-ws-cr-field li.is-waiting > a { visibility:hidden; }
.ddm-x .ddm-ws-cr-note { margin:18px 0 0; color:var(--ink-2); font-size:.95rem; display:flex; flex-wrap:wrap; gap:6px 14px; }

/* Tablets and phones: no pin; the phone sits above the gallery and the sort plays once */
@media (max-width:960px) {
  .ddm-x .ddm-ws-cr-stage { grid-template-columns:1fr; gap:28px; }
  .ddm-x .ddm-ws-cr-left { grid-template-columns:auto auto; align-items:center; justify-content:center; column-gap:24px; }
  .ddm-x .ddm-ws-cr-phone { width:180px; }
}
@media (max-width:640px) {
  .ddm-x .ddm-ws-cr-phone { width:150px; font-size:8.5px; }
  .ddm-x .ddm-ws-cr-steps li { font-size:.9rem; }
}
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-ws-cr-grid li[data-to]::after { transition:none; }
}

/* ---------- The way into the plans (Daniel, Oct 24): the lens portal, moved from the page's end to just before the plans.
   It holds no copy, so it runs shorter than the closing version, and the plans follow on the same obsidian. ---------- */
.ddm-x .ddm-ws-gate.is-live { height:230vh; } /* the oval fills the screen at about 100vh in; the plans arrive about 25vh of scroll later (Daniel: a buffer so a fast scroll does not skip the headline) */
.ddm-x .ddm-ws-gate:not(.is-live) { display:none; }
/* The plans sit on the open oval itself (Daniel, Oct 24): the section starts over the gate's last screen and has no
   background there, so the heading and the three plans rise straight onto the oval's number field, where the old CTA
   used to appear. Its own obsidian and digits only begin below that screen, for Care and the FAQ, faded in so there is
   no seam. */
.ddm-x .ddm-ws-gate.is-live + .ddm-se-price { position:relative; z-index:2; margin-top:-100vh; padding-top:calc(var(--nav-h,72px) + 24px);
  background:linear-gradient(transparent 0 88vh, var(--obsidian) 100vh); } /* 100vh = where the gate (and its open window) ends */
.ddm-x .ddm-ws-gate.is-live + .ddm-se-price > :is(.ddm-digits,.ddm-grain) { -webkit-mask:linear-gradient(transparent 0 90vh,#000 112vh); mask:linear-gradient(transparent 0 90vh,#000 112vh); }
.ddm-x .ddm-ws-gate.is-live + .ddm-se-price:not(.is-in) .ddm-shell { pointer-events:none; }
/* The entrance follows the scroll like the closing portal's copy (light.js --copy): --in runs 0 to 1 (websites.js) and each
   piece fades and rises a beat after the one before, so it is smooth both ways. */
.ddm-x .ddm-ws-gate.is-live + .ddm-se-price :is(.ddm-head > *,.ddm-se-tier,.ddm-se-tier-note) { --t:clamp(0, calc(var(--in,1) * 1.9 - var(--d,0) * .15), 1); opacity:var(--t); translate:0 calc((1 - var(--t)) * 40px); }
.ddm-x .ddm-ws-gate.is-live + .ddm-se-price .ddm-head > :nth-child(2) { --d:1; } .ddm-x .ddm-ws-gate.is-live + .ddm-se-price .ddm-head > :nth-child(3) { --d:2; }
.ddm-x .ddm-ws-gate.is-live + .ddm-se-price .ddm-se-tier { --d:3; } .ddm-x .ddm-ws-gate.is-live + .ddm-se-price .ddm-se-tier:nth-child(2) { --d:4; } .ddm-x .ddm-ws-gate.is-live + .ddm-se-price .ddm-se-tier:nth-child(3) { --d:5; }
.ddm-x .ddm-ws-gate.is-live + .ddm-se-price .ddm-se-tier-note { --d:6; }

/* No divider between the Get Found card and the footer (Daniel, Oct 24): Websites only, the shared footer keeps its line elsewhere. */
.ddm-x .ddm-footer { border-top:0; } /* the Our sites reel now runs straight into it, as on the other service pages */
.ddm-x .ddm-footer::before { display:none; } /* and the light that runs along that line on arrival (sections.css) */

/* ---------- Our sites reel (Daniel, Oct 24): real client sites drift past at the bottom of the page ---------- */
/* Moved below the path bar (Oct 24) so it closes the page like every other page's Our work row; spacing matches the service pages */
.ddm-x .ddm-ws-reel { padding-block:clamp(64px,9vw,130px) clamp(16px,3vw,48px); overflow:hidden; }
.ddm-x .ddm-ws-reel-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(32px,4vw,56px); }
.ddm-x .ddm-ws-reel-head .ddm-head { margin:0; }
.ddm-x .ddm-ws-reel-head h2 { margin:0; }
.ddm-x .ddm-ws-reel-head > .ddm-link { margin-bottom:10px; }
.ddm-x .ddm-ws-reel-view { --gap:clamp(18px,2vw,32px); display:flex; gap:var(--gap); padding-block:12px 20px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); width:100%; }
.ddm-x .ddm-ws-reel-track { display:flex; gap:var(--gap); flex:none; margin:0; padding:0; list-style:none; animation:ddm-ws-reel 60s linear infinite; }
.ddm-x .ddm-ws-reel:not(.is-on) .ddm-ws-reel-track { animation-play-state:paused; } /* only runs while on screen */
@keyframes ddm-ws-reel { to { translate:calc(-100% - var(--gap)) 0; } }
.ddm-x .ddm-ws-reel-item { position:relative; flex:none; width:clamp(260px,30vw,460px); }
.ddm-x .ddm-ws-reel-card { position:absolute; inset:0; z-index:8; border-radius:14px; }
.ddm-x .ddm-ws-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ddm-x .ddm-ws-reel-win { display:block; border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--line);
  box-shadow:0 1px 2px rgb(0 0 0/.06), 0 18px 40px -22px rgb(0 0 0/.35); transition:translate .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
.ddm-x .ddm-ws-reel-bar { display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-bottom:1px solid var(--line); background:#f6f5f2; }
.ddm-x .ddm-ws-reel-bar i { width:8px; height:8px; border-radius:50%; background:rgb(0 0 0/.14); }
.ddm-x .ddm-ws-reel-bar span { margin-left:10px; flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:500 .68rem var(--mono); letter-spacing:.04em; color:var(--ink-3); }
.ddm-x .ddm-ws-reel-win img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.ddm-x .ddm-ws-reel-cap { display:flex; flex-direction:column; gap:2px; padding:14px 4px 0; }
.ddm-x .ddm-ws-reel-cap b { font-weight:600; letter-spacing:-.01em; }
.ddm-x .ddm-ws-reel-cap small { font:500 .7rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-ws-reel-item:is(:hover,:focus-within) .ddm-ws-reel-win { translate:0 -6px; box-shadow:0 1px 2px rgb(0 0 0/.06), 0 28px 50px -24px rgb(0 0 0/.45); }
.ddm-x .ddm-ws-reel-card:focus-visible { outline:none; }
/* Hover: the light-double-yellow/blue rim (light.css) wakes on the window; the row keeps drifting (Daniel, Oct 24) */
/* The orbit always runs; hover only fades it in. (The link sits over the item, not around it: inside a link Chrome froze the orbit.) */
.ddm-x .ddm-ws-reel-win.ddm-light-double::after { opacity:0; transition:opacity .45s var(--ease); }
.ddm-x .ddm-ws-reel-item:is(:hover,:focus-within) .ddm-ws-reel-win.ddm-light-double::after { opacity:1; }
.ddm-x .ddm-ws-reel-item:has(.ddm-ws-reel-card:focus-visible) .ddm-ws-reel-win { outline:2px solid var(--blue-ink); outline-offset:3px; }
.ddm-x .ddm-ws-next { padding-bottom:clamp(8px,1.5vw,24px); }
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-ws-reel-track { animation:none; }
  .ddm-x .ddm-ws-reel-track[aria-hidden] { display:none; }
  .ddm-x .ddm-ws-reel-view { overflow-x:auto; -webkit-mask:none; mask:none; padding-inline:var(--gutter,20px); }
}

/* Soft grey veil on the plan cards and Care card (Daniel, Oct 24): the number field shows through faintly instead of
   running at full strength behind the text. Same veil as the Get Found price cards and the Social spots card. */
.ddm-x .ddm-se-price :is(.ddm-se-tier,.ddm-se-care) { background:rgb(34 34 37/.66); }
.ddm-x .ddm-se-price .ddm-se-tier.is-lift { background:rgb(40 40 43/.7); }