/* Deft Digital Media — Get Found service page (Daniel, October 24, 2026). Sits on the shared service template
   (styles/service.css, prefix ddm-se-); this file only holds what is unique to Get Found (prefix ddm-gf-): the hero map,
   "The climb" map pack, the profile before/after and the talk-to-us price block. design-system/DECISIONS.md: Sunflower
   as a fill on light and text only on obsidian; only "your business" gets the Sunflower, every other business stays grey.
   Motion: scripts/get-found.js. Nothing loops. */

/* ---------- Hero: calls from the map (Daniel, Oct 24) ----------
   A South Florida map (coast, Intracoastal, a few towns). Your pin lights, a ring spreads across town and calls come in
   from around it along thin lines, stacking beside the pin; the newest rings, older ones turn to "Answered". Plays once
   (get-found.js adds .is-live, then .is-go); without the script or with reduced motion it rests on the finished stack.
   The map tilts a little toward a fine pointer. */
.ddm-x .ddm-gf-hero-vis { position:relative; perspective:1400px; }
.ddm-x .ddm-gf-hmap { --rx:0deg; --ry:0deg; position:relative; aspect-ratio:5 / 4; border-radius:28px; overflow:hidden; background:#E4E7E2;
  transform:rotate(-1.5deg) rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .8s cubic-bezier(.2,.7,.3,1);
  box-shadow:0 40px 80px -40px rgb(0 0 0/.55), inset 0 0 0 1px rgb(17 17 17/.06); }
.ddm-x .ddm-gf-land { position:absolute; inset:0; width:100%; height:100%; }
.ddm-x .ddm-gf-arcs path { stroke-dasharray:1; stroke-dashoffset:0; opacity:.32; }
.ddm-x .ddm-gf-town { position:absolute; left:var(--x); top:var(--y); translate:-50% -50%; font:500 .62rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#868B84; white-space:nowrap; }
.ddm-x .ddm-gf-town.is-small { font-size:.54rem; color:#9A9E97; }
.ddm-x .ddm-gf-from { position:absolute; left:var(--x); top:var(--y); width:10px; height:10px; translate:-50% -50%; border-radius:50%; background:var(--ink); box-shadow:0 0 0 3px rgb(255 255 255/.9); }
.ddm-x .ddm-gf-from::after { content:""; position:absolute; inset:-7px; border-radius:50%; box-shadow:0 0 0 2px rgb(255 199 0/.9); opacity:0; }
.ddm-x .ddm-gf-hp { width:24px; height:24px; }
.ddm-x .ddm-gf-hp::after { inset:7px; }
.ddm-x .ddm-gf-hp.hy { left:60%; top:45%; z-index:2; background:var(--ink); scale:1.45; box-shadow:0 0 0 3px var(--sun), 0 0 18px 4px rgb(255 199 0/.6); }
.ddm-x .ddm-gf-pulse { position:absolute; inset:-8px; border-radius:50%; box-shadow:0 0 0 2px rgb(255 199 0/.85); opacity:0; animation:ddm-se-wave 1.6s ease-out .9s 3 both; }
.ddm-x .ddm-gf-reach { position:absolute; z-index:1; left:60%; top:45%; width:150%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(closest-side,rgb(255 199 0/0) 55%,rgb(255 199 0/.16) 92%,rgb(255 199 0/0)); box-shadow:inset 0 0 0 2px rgb(255 199 0/.55); }
/* The call stack */
.ddm-x .ddm-gf-calls { position:absolute; z-index:3; left:5%; bottom:6%; width:min(290px,56%); display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none; }
.ddm-x .ddm-gf-calls li { display:flex; align-items:center; gap:11px; padding:10px 14px 10px 10px; border-radius:18px; background:rgb(255 255 255/.86);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:inset 0 1px 0 #fff, 0 18px 36px -22px rgb(0 0 0/.5), 0 0 0 1px rgb(17 17 17/.05);
  transition:box-shadow .5s, opacity .5s, max-height .55s cubic-bezier(.2,.8,.2,1), padding .55s, margin .55s, translate .55s cubic-bezier(.2,.8,.2,1); max-height:80px; overflow:hidden; }
.ddm-x .ddm-gf-calls li:not(.is-old) { box-shadow:inset 0 1px 0 #fff, 0 24px 44px -24px rgb(0 0 0/.55), 0 0 0 2px var(--sun), 0 0 22px -4px rgb(255 199 0/.55); }
.ddm-x .ddm-gf-calls li.is-old { opacity:.8; }
.ddm-x .ddm-gf-cic { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:50%; background:var(--sun); }
.ddm-x .ddm-gf-calls li.is-old .ddm-gf-cic { background:rgb(17 17 17/.07); }
.ddm-x .ddm-gf-cic svg { width:16px; height:16px; fill:var(--ink); }
.ddm-x .ddm-gf-calls li.is-ring .ddm-gf-cic svg { animation:ddm-gf-ringing .9s ease-in-out .2s 3; }
@keyframes ddm-gf-ringing { 0%,50%,100% { rotate:0deg; } 10%,30% { rotate:-16deg; } 20%,40% { rotate:16deg; } }
.ddm-x .ddm-gf-ctx { display:grid; gap:2px; min-width:0; }
.ddm-x .ddm-gf-ctx b { font-size:.92rem; font-weight:600; letter-spacing:-.01em; }
.ddm-x .ddm-gf-ctx small { font-size:.74rem; color:var(--ink-3); white-space:nowrap; }
.ddm-x .ddm-gf-calls li:not(.is-old) .then, .ddm-x .ddm-gf-calls li.is-old .now { display:none; }
/* Live: everything waits, then plays in order */
.ddm-x .ddm-gf-hmap.is-live .ddm-gf-calls li:not(.is-in) { max-height:0; padding-block:0; margin-top:-8px; opacity:0; translate:0 -10px; box-shadow:none; }
.ddm-x .ddm-gf-hmap.is-live .ddm-gf-arcs path:not(.is-in) { stroke-dashoffset:1; }
.ddm-x .ddm-gf-hmap.is-live .ddm-gf-arcs path { transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1); }
.ddm-x .ddm-gf-hmap.is-live .ddm-gf-from:not(.is-in) { opacity:.35; scale:.7; }
.ddm-x .ddm-gf-from { transition:opacity .4s, scale .5s cubic-bezier(.3,1.6,.5,1); }
.ddm-x .ddm-gf-from.is-ping::after { animation:ddm-se-wave 1.2s ease-out 2 both; }
.ddm-x .ddm-gf-hmap.is-go .ddm-gf-reach { animation:ddm-gf-reach 2.6s cubic-bezier(.2,.6,.3,1) .6s both; }
@keyframes ddm-gf-reach { 0% { opacity:0; scale:.02; } 15% { opacity:1; } 100% { opacity:0; scale:1; } }

/* Stars: grey for everyone else, Sunflower only on your business. No counts or ratings shown. */
.ddm-x .ddm-gf-stars { display:inline-flex; gap:2px; }
.ddm-x .ddm-gf-stars svg { width:13px; height:13px; fill:rgb(17 17 17/.14); transition:fill .4s var(--ease); }
.ddm-x .ddm-gf-stars.is-4 svg:nth-child(-n+4), .ddm-x .ddm-gf-stars.is-3 svg:nth-child(-n+3) { fill:#9A9A95; }
.ddm-x .ddm-gf-stars.is-full svg { fill:var(--sun); }
.ddm-x :is(.ddm-gf-hbtns,.ddm-gf-pbtns) { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.ddm-x :is(.ddm-gf-hbtns,.ddm-gf-pbtns) em { display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:999px; background:rgb(17 17 17/.06); font-style:normal; font-size:.74rem; font-weight:500; }
.ddm-x :is(.ddm-gf-hbtns,.ddm-gf-pbtns) em.is-call { background:var(--sun); }
.ddm-x :is(.ddm-gf-hbtns,.ddm-gf-pbtns) em svg { width:12px; height:12px; fill:var(--ink); }
.ddm-x .ddm-gf-pbtns em.is-off { color:#B5B5B0; text-decoration:line-through; }

/* ---------- Why it matters: "The climb" (polished Oct 24 from Daniel's real search screenshots, no branding) ---------- */
/* The phone: one screen, a results page with Places. data-step (0-4) says how far the profile work has got. */
.ddm-x .ddm-gf-phone { --w:min(330px,30vw); --rh:118px; --more:30px; position:relative; z-index:1; width:var(--w); aspect-ratio:9 / 19.5; padding:10px; border-radius:48px; 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:var(--ink); }
.ddm-x .ddm-gf-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-gf-scr { position:absolute; inset:10px; display:flex; flex-direction:column; border-radius:38px; overflow:hidden; background:#fff; }
.ddm-x .ddm-gf-phone svg { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ddm-x .ddm-gf-top { position:relative; z-index:3; flex:none; padding:50px 12px 0; background:#fff; box-shadow:0 6px 12px -10px rgb(0 0 0/.35); }
.ddm-x .ddm-gf-sbar { display:flex; align-items:center; gap:9px; padding:10px 14px; border-radius:999px; box-shadow:0 2px 8px -2px rgb(0 0 0/.22), inset 0 0 0 1px rgb(17 17 17/.06); font-size:1.08em; }
.ddm-x .ddm-gf-sbar svg { width:15px; height:15px; flex:none; color:var(--ink-3); }
.ddm-x .ddm-gf-sbar .ddm-gf-mic { margin-left:auto; color:var(--ink-2); }
.ddm-x .ddm-gf-tabs { display:flex; gap:16px; margin:0; padding:10px 4px 0; list-style:none; color:var(--ink-3); font-size:.95em; white-space:nowrap; }
.ddm-x .ddm-gf-tabs li { padding-bottom:8px; }
.ddm-x .ddm-gf-tabs li.is-on { color:var(--ink); font-weight:600; box-shadow:inset 0 -2.5px 0 var(--ink); }
.ddm-x .ddm-gf-feed { position:relative; flex:1; overflow:hidden; }
.ddm-x .ddm-gf-roll { padding:0 12px 60px; transform:translateY(calc(var(--roll,0) * -1px)); transition:transform 1s cubic-bezier(.65,0,.25,1); }
.ddm-x .ddm-gf-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-gf-loc svg { width:13px; height:13px; }
.ddm-x .ddm-gf-ph { margin:12px 2px 8px; font-size:1.45em; font-weight:500; letter-spacing:-.01em; }
/* Map: grey pins for everyone else; yours drops in once it reaches the top three, and the pin it knocks out fades */
.ddm-x .ddm-gf-map { position:relative; height:118px; border-radius:12px; overflow:hidden; background:#E8EAE4; }
.ddm-x .ddm-gf-rd { position:absolute; background:#fff; box-shadow:0 0 0 1px rgb(17 17 17/.04); }
.ddm-x .ddm-gf-rd.a { left:-10%; right:-10%; top:36%; height:5px; rotate:-6deg; } .ddm-x .ddm-gf-rd.b { left:-10%; right:20%; top:74%; height:4px; rotate:3deg; }
.ddm-x .ddm-gf-rd.c { top:-10%; bottom:-10%; left:30%; width:4px; rotate:4deg; } .ddm-x .ddm-gf-rd.d { top:-10%; bottom:-10%; left:62%; width:5px; rotate:-3deg; }
.ddm-x .ddm-gf-sea { position:absolute; right:-6%; top:-10%; bottom:-10%; width:20%; background:#C9D8DD; border-radius:40% 0 0 30%; }
.ddm-x .ddm-gf-mp { width:16px; height:16px; transition:opacity .5s, scale .5s var(--ease); }
.ddm-x .ddm-gf-mp::after { inset:5px; }
.ddm-x .ddm-gf-mp.m1 { left:20%; top:50%; } .ddm-x .ddm-gf-mp.m2 { left:44%; top:30%; } .ddm-x .ddm-gf-mp.m3 { left:72%; top:80%; }
.ddm-x .ddm-gf-mp.my { left:54%; top:64%; z-index:2; background:var(--ink); box-shadow:0 0 0 2.5px var(--sun), 0 0 14px 3px rgb(255 199 0/.6);
  opacity:0; translate:-50% -260%; transition:opacity .25s, translate .7s cubic-bezier(.3,1.5,.5,1), scale .5s; }
.ddm-x .ddm-gf-mlab { position:absolute; left:58%; top:66%; padding:2px 7px; border-radius:6px; background:rgb(255 255 255/.9); font-size:.82em; font-weight:600; white-space:nowrap; opacity:0; transition:opacity .4s .5s; }
.ddm-x .ddm-gf-phone:is([data-step="2"],[data-step="3"],[data-step="4"]) .ddm-gf-mp.my { opacity:1; translate:-50% -100%; scale:1.25; }
.ddm-x .ddm-gf-phone:is([data-step="2"],[data-step="3"],[data-step="4"]) .ddm-gf-mlab { opacity:1; }
.ddm-x .ddm-gf-phone:is([data-step="2"],[data-step="3"],[data-step="4"]) .ddm-gf-mp.m3 { opacity:0; scale:.5; }

/* The list: rows sit at --r; past the third row there is a "More places" break */
.ddm-x .ddm-gf-list { position:relative; height:calc(5 * var(--rh) + var(--more)); margin:4px 0 0; padding:0; list-style:none; }
.ddm-x .ddm-gf-row { position:absolute; left:-12px; right:-12px; top:0; height:var(--rh); display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:1fr auto; gap:6px 10px; padding:11px 14px 12px;
  background:#fff; box-shadow:inset 0 -1px 0 rgb(17 17 17/.1);
  transform:translateY(calc(var(--r,0) * var(--rh) + var(--d,0) * var(--more))); transition:transform .9s cubic-bezier(.65,0,.25,1), box-shadow .4s, opacity .4s, scale .5s var(--ease); }
.ddm-x .ddm-gf-row.is-more { --d:1; }
.ddm-x .ddm-gf-row.is-more:not(.is-you) { opacity:.6; }
.ddm-x .ddm-gf-rtext { grid-column:1; grid-row:1; display:grid; gap:2px; align-content:start; min-width:0; }
.ddm-x .ddm-gf-rtext b { font-size:1.22em; font-weight:500; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ddm-x .ddm-gf-rtext small { font-size:.92em; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ddm-x .ddm-gf-rate { display:flex; align-items:center; gap:6px; }
.ddm-x .ddm-gf-st { display:flex; gap:1.5px; }
.ddm-x .ddm-gf-st 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%); transition:background .3s; }
.ddm-x .ddm-gf-st.is-4 i:nth-child(-n+4), .ddm-x .ddm-gf-st.is-3 i:nth-child(-n+3) { background:#9A9A95; }
.ddm-x .ddm-gf-th { grid-column:2; grid-row:1; display:flex; gap:3px; }
.ddm-x .ddm-gf-th i { position:relative; width:44px; height:52px; border-radius:8px; overflow:hidden; background:linear-gradient(160deg,#DADAD5,#C9CAC4); }
.ddm-x .ddm-gf-th i.t1 { background:linear-gradient(200deg,#E2E1DC,#CFCDC6); } .ddm-x .ddm-gf-th i.t2 { background:linear-gradient(170deg,#D3D6D2,#C2C5C0); }
.ddm-x .ddm-gf-th img { width:100%; height:100%; object-fit:cover; }
.ddm-x .ddm-gf-acts { grid-column:1 / -1; display:flex; gap:5px; margin:0; overflow:hidden; }
.ddm-x .ddm-gf-acts em { flex:none; display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:999px; font-style:normal; font-size:.9em; font-weight:500; box-shadow:inset 0 0 0 1px rgb(17 17 17/.2); }
.ddm-x .ddm-gf-acts svg { width:11px; height:11px; }
.ddm-x .ddm-gf-more { position:absolute; left:0; right:0; top:calc(3 * var(--rh)); height:var(--more); display:flex; align-items:center; gap:10px; font:500 .78em/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-gf-more::after { content:""; flex:1; height:1px; background:rgb(17 17 17/.14); }

/* Your listing: each step fills something in, and you can see it */
.ddm-x .ddm-gf-row.is-you { z-index:2; }
.ddm-x .ddm-gf-row.is-you .ddm-gf-after { display:none; }
.ddm-x .ddm-gf-row.is-you .ddm-gf-before { color:var(--blue-ink); }
.ddm-x .ddm-gf-open { font-style:normal; color:#1E7B3A; font-weight:500; }
.ddm-x .ddm-gf-phone:not([data-step="0"]) .ddm-gf-row.is-you .ddm-gf-before { display:none; }
.ddm-x .ddm-gf-phone:not([data-step="0"]) .ddm-gf-row.is-you .ddm-gf-after { display:inline; animation:ddm-gf-in .5s var(--ease) both; }
.ddm-x .ddm-gf-th.is-you i { background:none; box-shadow:inset 0 0 0 1.5px rgb(17 17 17/.18); outline:1px dashed rgb(17 17 17/.25); outline-offset:-5px; }
.ddm-x .ddm-gf-th.is-you img { opacity:0; scale:.6; transition:opacity .4s var(--ease), scale .55s cubic-bezier(.3,1.5,.5,1); }
.ddm-x .ddm-gf-th.is-you i:nth-child(2) img { transition-delay:.12s; }
.ddm-x .ddm-gf-phone:is([data-step="2"],[data-step="3"],[data-step="4"]) .ddm-gf-th.is-you i { outline:0; box-shadow:none; }
.ddm-x .ddm-gf-phone:is([data-step="2"],[data-step="3"],[data-step="4"]) .ddm-gf-th.is-you img { opacity:1; scale:1; }
.ddm-x .ddm-gf-replied { font-style:normal; font-size:.82em; font-weight:500; padding:1px 7px; border-radius:999px; background:rgb(255 199 0/.22); opacity:0; transition:opacity .4s .3s; }
.ddm-x .ddm-gf-phone:is([data-step="3"],[data-step="4"]) .ddm-gf-st.is-you i { background:var(--sun); }
.ddm-x .ddm-gf-st.is-you i:nth-child(2) { transition-delay:.06s; } .ddm-x .ddm-gf-st.is-you i:nth-child(3) { transition-delay:.12s; } .ddm-x .ddm-gf-st.is-you i:nth-child(4) { transition-delay:.18s; } .ddm-x .ddm-gf-st.is-you i:nth-child(5) { transition-delay:.24s; }
.ddm-x .ddm-gf-phone:is([data-step="3"],[data-step="4"]) .ddm-gf-replied { opacity:1; }
.ddm-x .ddm-gf-late { opacity:0; scale:.7; transition:opacity .3s, scale .45s cubic-bezier(.3,1.5,.5,1); }
.ddm-x .ddm-gf-late + .ddm-gf-late { transition-delay:.1s; }
.ddm-x .ddm-gf-phone[data-step="4"] .ddm-gf-late { opacity:1; scale:1; }
.ddm-x .ddm-gf-call { transition:background .3s, box-shadow .3s; }
.ddm-x .ddm-gf-phone[data-step="4"] .ddm-gf-call { background:var(--sun); box-shadow:none !important; animation:ddm-se-press .45s var(--ease) .35s both; }
/* In the top three your row is ringed; while it climbs it lifts and glows past the others */
.ddm-x .ddm-gf-phone:is([data-step="2"],[data-step="3"],[data-step="4"]) .ddm-gf-row.is-you { box-shadow:inset 0 0 0 2px var(--sun); }
.ddm-x .ddm-gf-row.is-you.is-moving { scale:1.04; box-shadow:inset 0 0 0 2px var(--sun), 0 16px 34px -14px rgb(0 0 0/.45), 0 0 26px rgb(255 199 0/.45) !important; }
@keyframes ddm-gf-in { from { opacity:0; } }

/* 4: tap Call, the call sheet slides up, then it rings */
.ddm-x .ddm-gf-sheet { position:absolute; z-index:5; left:8px; right:8px; bottom:10px; display:grid; gap:6px; translate:0 130%; transition:translate .45s var(--ease); }
.ddm-x .ddm-gf-sheet p { display:grid; gap:2px; margin:0; padding:12px; border-radius:16px; background:rgb(250 250 250/.98); text-align:center; box-shadow:0 10px 30px -10px rgb(0 0 0/.4); }
.ddm-x .ddm-gf-sheet small { color:var(--ink-3); font-size:.85em; }
.ddm-x .ddm-gf-sheet b { font-size:1.08em; font-weight:600; }
.ddm-x .ddm-gf-sheet em { padding:12px; border-radius:16px; background:#fff; text-align:center; font-style:normal; font-weight:600; font-size:1.1em; box-shadow:0 10px 30px -10px rgb(0 0 0/.4); }
.ddm-x .ddm-gf-sheet em.is-go { background:var(--sun); }
.ddm-x .ddm-gf-phone[data-step="4"] .ddm-gf-sheet { translate:0 0; transition-delay:.75s; }
.ddm-x .ddm-gf-phone[data-step="4"] .ddm-gf-sheet em.is-go { animation:ddm-se-press .45s var(--ease) 1.45s both; }
.ddm-x .ddm-gf-ring { position:absolute; z-index:10; top:8px; left:50%; width:30%; height:22px; translate:-50% 0; display:flex; align-items:center; gap:10px; padding:0 8px; border-radius:20px; background:#0d0d0e; color:#fff; overflow:hidden;
  opacity:0; transition:width .5s var(--ease), height .5s var(--ease), border-radius .5s, opacity .2s .5s; }
.ddm-x .ddm-gf-phone[data-step="4"] .ddm-gf-ring { opacity:1; width:86%; height:54px; border-radius:28px; transition:opacity .15s 1.85s, width .5s var(--ease) 1.9s, height .5s var(--ease) 1.9s, border-radius .5s 1.9s; }
.ddm-x .ddm-gf-ring i { position:relative; flex:none; width:38px; height:38px; 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.6 3.5h2.6l1.4 4-1.9 1.3a10.6 10.6 0 0 0 5.5 5.5l1.3-1.9 4 1.4v2.6a2 2 0 0 1-2.2 2A15.4 15.4 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2Z' fill='%23111'/%3E%3C/svg%3E") center/18px no-repeat; }
.ddm-x .ddm-gf-ring i::before, .ddm-x .ddm-gf-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-gf-phone[data-step="4"] .ddm-gf-ring i::before { animation:ddm-se-wave 1.4s ease-out 2.3s 3 both; }
.ddm-x .ddm-gf-phone[data-step="4"] .ddm-gf-ring i::after { animation:ddm-se-wave 1.4s ease-out 3s 3 both; }
.ddm-x .ddm-gf-ring span { display:grid; line-height:1.2; white-space:nowrap; }
.ddm-x .ddm-gf-ring b { font-size:1.15em; font-weight:600; }
.ddm-x .ddm-gf-ring small { color:var(--on-dark-2); font-size:.9em; }
/* once it rings, the call sheet steps away so your finished listing shows */
.ddm-x .ddm-gf-phone[data-step="4"] .ddm-gf-sheet { animation:ddm-gf-away .4s var(--ease) 2s both; }
@keyframes ddm-gf-away { to { translate:0 130%; } }
.ddm-x .ddm-gf-tap { position:absolute; z-index:8; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; background:rgb(255 255 255/.6); 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; left:var(--tx,50%); top:var(--ty,50%); }
.ddm-x .ddm-gf-phone[data-step="4"] .ddm-gf-tap { animation:ddm-se-tap .9s var(--ease) .15s both; }

/* ---------- Proof: the profile before and after ---------- */
.ddm-x .ddm-gf-proof { padding-top:clamp(40px,5vw,80px); }
.ddm-x .ddm-gf-proof-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:clamp(32px,6vw,96px); align-items:center; }
.ddm-x .ddm-gf-diff { margin:28px 0 0; padding:0; list-style:none; display:grid; gap:10px; }
.ddm-x .ddm-gf-diff li { display:grid; gap:2px; padding-left:16px; border-left:2px solid var(--line); color:var(--ink-2); max-width:44ch; }
.ddm-x .ddm-gf-diff li:last-child { border-left-color:var(--sun); }
.ddm-x .ddm-gf-diff b { font:500 .7rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.ddm-x .ddm-gf-ba { --p:50; position:relative; display:grid; width:100%; max-width:430px; justify-self:center; border-radius:26px; touch-action:pan-y; }
.ddm-x .ddm-gf-ba:has(.ddm-gf-range:focus-visible) { outline:2px solid var(--blue-ink); outline-offset:6px; }
.ddm-x .ddm-gf-prof { border-radius:26px; overflow:hidden; background:#fff; box-shadow:0 40px 70px -40px rgb(0 0 0/.5), inset 0 0 0 1px rgb(17 17 17/.06); }
.ddm-x .ddm-gf-prof { grid-area:1 / 1; }
.ddm-x .ddm-gf-prof.is-after { clip-path:inset(0 0 0 calc(var(--p) * 1%)); }
.ddm-x .ddm-gf-prof.is-before { filter:grayscale(.4); }
.ddm-x .ddm-gf-cover { position:relative; aspect-ratio:16 / 10; overflow:hidden; background:#E6E6E2; }
.ddm-x .ddm-gf-cover > img { width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.ddm-x .ddm-gf-cover.is-empty { display:grid; align-items:center; justify-items:start; padding-left:9%; background:repeating-linear-gradient(135deg,#EBEBE7 0 12px,#E2E2DE 12px 24px); }
.ddm-x .ddm-gf-cover.is-empty span { font:500 .7rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-gf-thumbs { position:absolute; right:12px; bottom:12px; width:28%; aspect-ratio:1; border-radius:12px; overflow:hidden; box-shadow:0 0 0 2px #fff, 0 10px 20px -10px rgb(0 0 0/.5); }
.ddm-x .ddm-gf-thumbs img { width:100%; height:100%; object-fit:cover; }
.ddm-x .ddm-gf-prof-body { display:grid; justify-items:start; gap:4px; padding:18px 20px 22px; }
.ddm-x .ddm-gf-prof-body > b { font-size:1.3rem; font-weight:600; letter-spacing:-.03em; }
.ddm-x .ddm-gf-prof-body > small { font-size:.84rem; color:var(--ink-3); }
.ddm-x .ddm-gf-prof dl { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; width:100%; margin:12px 0 0; padding-top:12px; border-top:1px solid var(--line); font-size:.86rem; }
.ddm-x .ddm-gf-prof dt { color:var(--ink-3); }
.ddm-x .ddm-gf-prof dd { margin:0; }
.ddm-x .ddm-gf-prof dd.is-missing { color:var(--blue-ink); }
.ddm-x .ddm-gf-open { color:#1E7B3A; font-weight:600; }
.ddm-x .ddm-gf-rev { display:grid; gap:3px; width:100%; margin:12px 0 0; padding:12px 14px; border-radius:14px; background:rgb(17 17 17/.04); font-size:.84rem; color:var(--ink-2); }
.ddm-x .ddm-gf-rev b { font:500 .62rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.ddm-x .ddm-gf-rev.is-missing { color:var(--ink-3); font-style:italic; }
.ddm-x .ddm-gf-handle { position:absolute; z-index:2; top:-10px; bottom:-10px; left:calc(var(--p) * 1%); width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 0 1px rgb(17 17 17/.12), 0 0 14px rgb(255 199 0/.6); pointer-events:none; }
.ddm-x .ddm-gf-handle::after { content:""; position:absolute; top:50%; left:50%; width:40px; height:40px; translate:-50% -50%; border-radius:50%; background:#fff;
  box-shadow:0 0 0 3px var(--sun), 0 10px 20px -8px rgb(0 0 0/.4);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:20px; background-position:center; background-repeat:no-repeat; }
.ddm-x .ddm-gf-tags { position:absolute; z-index:2; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; pointer-events:none; }
.ddm-x .ddm-gf-tags span { padding:6px 11px; border-radius:999px; background:rgb(255 255 255/.85); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font:500 .64rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.ddm-x .ddm-gf-range { position:absolute; z-index:3; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; }

/* ---------- Price: talk to us (no monthly price shown) ---------- */
.ddm-x .ddm-gf-talk { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(12px,1.6vw,22px); align-items:stretch; }
.ddm-x .ddm-gf-talk-card .ddm-se-tier-price b { color:var(--sun); }
.ddm-x .ddm-gf-talk-card .ddm-se-tier-fit { min-height:0; margin-bottom:8px; }
.ddm-x .ddm-gf-site-note { display:flex; flex-direction:column; justify-content:center; padding:clamp(22px,2.4vw,32px); border-radius:24px; background:rgb(255 255 255/.03); box-shadow:inset 0 0 0 1px rgb(255 255 255/.9), 0 0 18px -4px rgb(255 255 255/.25); }
.ddm-x .ddm-gf-site-note h3 { font-size:clamp(1.6rem,2.6vw,2.3rem); color:#fff; margin-bottom:14px; }
.ddm-x .ddm-gf-site-note h3 span { color:var(--sun); }
.ddm-x .ddm-gf-site-note p:not(.ddm-eyebrow) { color:var(--on-dark-2); max-width:44ch; }
.ddm-x .ddm-gf-site-link { margin-top:10px; color:#fff; }

/* ---------- Next on the path: a camera viewfinder over a real job ---------- */
.ddm-x .ddm-gf-finder { position:relative; display:block; aspect-ratio:16 / 10; background:#222 url("https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/field/paint-interior.webp") center 45% / cover no-repeat; }
.ddm-x .ddm-gf-finder i { position:absolute; width:26px; height:26px; border:0 solid #fff; transition:inset .5s var(--ease); }
.ddm-x .ddm-gf-finder .c1 { top:14px; left:14px; border-top-width:2px; border-left-width:2px; } .ddm-x .ddm-gf-finder .c2 { top:14px; right:14px; border-top-width:2px; border-right-width:2px; }
.ddm-x .ddm-gf-finder .c3 { bottom:14px; left:14px; border-bottom-width:2px; border-left-width:2px; } .ddm-x .ddm-gf-finder .c4 { bottom:14px; right:14px; border-bottom-width:2px; border-right-width:2px; }
.ddm-x .ddm-se-next-card:hover .ddm-gf-finder .c1 { top:22px; left:22px; } .ddm-x .ddm-se-next-card:hover .ddm-gf-finder .c2 { top:22px; right:22px; }
.ddm-x .ddm-se-next-card:hover .ddm-gf-finder .c3 { bottom:22px; left:22px; } .ddm-x .ddm-se-next-card:hover .ddm-gf-finder .c4 { bottom:22px; right:22px; }
.ddm-x .ddm-gf-finder em { position:absolute; top:22px; left:50%; translate:-50% 0; display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:rgb(11 11 12/.6); color:#fff; font:500 .62rem/1 var(--mono); font-style:normal; letter-spacing:.1em; text-transform:uppercase; }
.ddm-x .ddm-gf-finder em::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--sun); }

/* ---------- One dark run: the portal flows straight into Price and FAQ (Daniel, Oct 24) ----------
   The portal now sits right after the before/after, so the dark chapter after it wears the portal's background: the same
   full number field and the same soft grain, with no fade at the seam. */
.ddm-x.ddm-gf-page .ddm-portal-inner .ddm-digits { -webkit-mask:linear-gradient(180deg,transparent 0,#000 30%); mask:linear-gradient(180deg,transparent 0,#000 30%); }
.ddm-x .ddm-gf-price { margin-top:-1px; }
.ddm-x .ddm-gf-price > .ddm-digits { opacity:1; -webkit-mask:linear-gradient(180deg,#000 88%,transparent); mask:linear-gradient(180deg,#000 88%,transparent); }
.ddm-x .ddm-gf-price > .ddm-grain { mix-blend-mode:normal; opacity:.14; }

/* Quiet the number field where people read (Daniel, Oct 24): the cards get a soft grey veil like the Social spots card, and the price lede and the
   FAQ questions get a soft obsidian halo, so digits never run through the text. The field stays full everywhere else. */
.ddm-x .ddm-gf-price :is(.ddm-gf-talk-card,.ddm-gf-site-note) { background:rgb(34 34 37/.66); }
.ddm-x .ddm-gf-price .ddm-head > p:not(.ddm-eyebrow) { position:relative; }
.ddm-x .ddm-gf-price .ddm-head > p:not(.ddm-eyebrow)::before { content:""; position:absolute; z-index:-1; inset:-48px -72px; pointer-events:none;
  background:radial-gradient(closest-side,rgb(11 11 12/.72) 50%,rgb(11 11 12/0)); }
/* The question list is tall, so it gets a wider ellipse that covers every row */
.ddm-x .ddm-gf-price .ddm-se-qa { position:relative; }
.ddm-x .ddm-gf-price .ddm-se-qa::before { content:""; position:absolute; z-index:-1; inset:-64px -96px; pointer-events:none;
  background:radial-gradient(farthest-side,rgb(11 11 12/.74) 60%,rgb(11 11 12/0)); }

/* ---------- Even spacing between sections (Daniel, Oct 24) ----------
   Light sections sit about 230px apart on desktop (158 bottom + 72 top). The portal already leaves room below its copy
   (it is a full screen, copy centered), so Price starts almost at once; the FAQ and the path bar get the same gap. */
.ddm-x .ddm-gf-price { padding-top:clamp(0px,2.4vw,36px); }
.ddm-x .ddm-gf-price .ddm-se-faq { margin-top:clamp(120px,16vw,230px); }
.ddm-x.ddm-gf-page .ddm-se-next { padding-top:clamp(96px,11vw,160px); padding-bottom:clamp(8px,1.5vw,24px); } /* more room above the path bar, less below the Next card (Daniel, Oct 24) */

/* ---------- Our sites reel (Daniel, Oct 24): real client sites drift past at the bottom of the page.
   Copied from the Websites page with this page's prefix; it closes the page, after the Next card, with room to breathe. ---------- */
.ddm-x .ddm-gf-reel { padding-block:clamp(64px,9vw,130px) clamp(16px,3vw,48px); overflow:hidden; }
/* The reel runs straight into the footer: no divider line above it (Daniel, Oct 24) */
.ddm-x.ddm-gf-page .ddm-footer { border-top:0; }
.ddm-x.ddm-gf-page .ddm-footer::before { display:none; }
.ddm-x .ddm-gf-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-gf-reel-head .ddm-head { margin:0; }
.ddm-x .ddm-gf-reel-head h2 { margin:0; }
.ddm-x .ddm-gf-reel-head > .ddm-link { margin-bottom:10px; }
.ddm-x .ddm-gf-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-gf-reel-track { display:flex; gap:var(--gap); flex:none; margin:0; padding:0; list-style:none; animation:ddm-gf-reel 60s linear infinite; }
.ddm-x .ddm-gf-reel:not(.is-on) .ddm-gf-reel-track { animation-play-state:paused; } /* only runs while on screen */
@keyframes ddm-gf-reel { to { translate:calc(-100% - var(--gap)) 0; } }
.ddm-x .ddm-gf-reel-item { position:relative; flex:none; width:clamp(260px,30vw,460px); }
.ddm-x .ddm-gf-reel-card { position:absolute; inset:0; z-index:8; border-radius:14px; }
.ddm-x .ddm-gf-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ddm-x .ddm-gf-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-gf-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-gf-reel-bar i { width:8px; height:8px; border-radius:50%; background:rgb(0 0 0/.14); }
.ddm-x .ddm-gf-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-gf-reel-win img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.ddm-x .ddm-gf-reel-cap { display:flex; flex-direction:column; gap:2px; padding:14px 4px 0; }
.ddm-x .ddm-gf-reel-cap b { font-weight:600; letter-spacing:-.01em; }
.ddm-x .ddm-gf-reel-cap small { font:500 .7rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-gf-reel-item:is(:hover,:focus-within) .ddm-gf-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-gf-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-gf-reel-win.ddm-light-double::after { opacity:0; transition:opacity .45s var(--ease); }
.ddm-x .ddm-gf-reel-item:is(:hover,:focus-within) .ddm-gf-reel-win.ddm-light-double::after { opacity:1; }
.ddm-x .ddm-gf-reel-item:has(.ddm-gf-reel-card:focus-visible) .ddm-gf-reel-win { outline:2px solid var(--blue-ink); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-gf-reel-track { animation:none; }
  .ddm-x .ddm-gf-reel-track[aria-hidden] { display:none; }
  .ddm-x .ddm-gf-reel-view { overflow-x:auto; -webkit-mask:none; mask:none; padding-inline:var(--gutter,20px); }
}

/* ---------- Phones and tablets ---------- */
@media (max-width:960px) {
  .ddm-x .ddm-gf-hero-vis { max-width:560px; }
  .ddm-x .ddm-gf-phone { --w:min(250px,40vw); }
  .ddm-x .ddm-gf-proof-grid, .ddm-x .ddm-gf-talk { grid-template-columns:1fr; }
  .ddm-x .ddm-gf-talk { max-width:560px; margin-inline:auto; }
}
@media (max-width:640px) {
  .ddm-x .ddm-gf-phone { --w:300px; zoom:.44; } /* the desktop phone, scaled whole so the list keeps its layout */
  .ddm-x .ddm-gf-calls { width:62%; gap:6px; }
  .ddm-x .ddm-gf-calls li { padding:7px 10px 7px 7px; gap:8px; border-radius:14px; }
  .ddm-x .ddm-gf-calls li[data-call="lake"] { display:none; } /* two calls fit a phone-width map */
  .ddm-x .ddm-gf-cic { width:26px; height:26px; } .ddm-x .ddm-gf-cic svg { width:13px; height:13px; }
  .ddm-x .ddm-gf-ctx b { font-size:.78rem; } .ddm-x .ddm-gf-ctx small { font-size:.66rem; }
  .ddm-x .ddm-gf-town { font-size:.5rem; } .ddm-x .ddm-gf-town.is-small { display:none; }
}

/* ---------- Reduced motion, reduced transparency, forced colors ---------- */
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-gf-page * { animation:none !important; transition:none !important; }
  .ddm-x .ddm-gf-phone[data-step="4"] :is(.ddm-gf-ring,.ddm-gf-sheet) { opacity:0; visibility:hidden; }
}
@media (prefers-reduced-transparency:reduce) {
  .ddm-x :is(.ddm-gf-calls li,.ddm-gf-tags span) { -webkit-backdrop-filter:none; backdrop-filter:none; background:#fff; }
}
@media (forced-colors:active) {
  .ddm-x :is(.ddm-gf-phone,.ddm-gf-prof,.ddm-gf-site-note,.ddm-gf-calls li) { border:1px solid CanvasText; }
  .ddm-x .ddm-gf-handle { background:Highlight; }
}