/* Deft Digital Media — Services hub (Daniel, October 19, 2026). design-system/DECISIONS.md: studio light, Sunflower as a
   fill on light and text only on obsidian, Geist, contour light, the white 1px glowing rim on dark. Uses home.css tokens,
   light.css (contour, portal), sections.css (screen bezel, post mockup, Included box) and Home's .ddm-obsidian chapter.
   Page: pages/services.html; motion: scripts/services.js. Prefix ddm-sv-. */

/* ---------- Opening (Daniel, Oct 19): sticky left, scroll-bound route on the right ---------- */
.ddm-x .ddm-sv-top { position:relative; padding:calc(var(--nav-h) + clamp(40px,5vw,72px)) 0 clamp(48px,6vw,96px); }
.ddm-x .ddm-sv-digits { opacity:.9; -webkit-mask:radial-gradient(60% 50% at 75% 30%,#000 25%,transparent 100%); mask:radial-gradient(60% 50% at 75% 30%,#000 25%,transparent 100%); }
.ddm-x .ddm-sv-top > .ddm-grain { -webkit-mask:linear-gradient(180deg,#000 70%,transparent); mask:linear-gradient(180deg,#000 70%,transparent); }
.ddm-x .ddm-sv-top-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:start; }
.ddm-x .ddm-sv-side { position:sticky; top:calc(var(--nav-h) + 40px); display:grid; gap:clamp(24px,3vw,40px); }
.ddm-x .ddm-sv-title { font-size:clamp(2.8rem,5.6vw,5.4rem); line-height:.9; letter-spacing:-.058em; margin-bottom:28px; }
.ddm-x .ddm-sv-title > span:not(.ddm-in-w) { display:block; }
.ddm-x .ddm-sv-title .ddm-mark { white-space:nowrap; background-image:linear-gradient(transparent 20%,var(--sun) 20%,var(--sun) 90%,transparent 90%); }
.ddm-x .ddm-sv-head > p:not(.ddm-eyebrow) { font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--ink-2); max-width:44ch; margin:0; }

/* The stage on screen, large on the left */
.ddm-x .ddm-sv-answer { position:relative; z-index:2; padding:24px 26px 22px; border-radius:var(--radius); background:rgb(255 255 255/.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgb(17 17 17/.07), 0 24px 48px -32px rgb(0 0 0/.35); max-width:560px; }
.ddm-x .ddm-sv-now.is-swap > :not(.ddm-sv-meter) { animation:ddm-sv-in .55s var(--ease) both; }
.ddm-x .ddm-sv-now.is-swap > :nth-child(2) { animation-delay:.05s; }
.ddm-x .ddm-sv-now.is-swap > :nth-child(3) { animation-delay:.1s; }
@keyframes ddm-sv-in { from { opacity:0; translate:0 8px; } }
.ddm-x .ddm-sv-answer-kicker { margin:0 0 4px; font:500 .7rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--blue-ink); }
.ddm-x .ddm-sv-answer-name { margin:0 0 8px; font-size:clamp(1.5rem,2.2vw,1.9rem); font-weight:600; line-height:1.05; letter-spacing:-.04em; }
.ddm-x .ddm-sv-answer-lead { margin:0; color:var(--ink-2); max-width:48ch; }
.ddm-x .ddm-sv-now-link { margin-top:14px; }
.ddm-x .ddm-sv-stage-link { margin-top:10px; }
.ddm-x .ddm-sv-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ddm-x .ddm-sv-wa { width:20px; height:20px; flex:none; fill:currentColor; }
.ddm-x .ddm-sv-portal-fine { margin:18px 0 0; font-size:13px; color:var(--on-dark-2); }
.ddm-x .ddm-sv-portal-fine a { color:#fff; text-decoration:underline; text-decoration-color:rgb(255 255 255/.4); text-underline-offset:3px; }
/* How far along the path you are: a thin Sunflower bar */
.ddm-x .ddm-sv-meter { height:3px; margin-top:18px; border-radius:3px; background:rgb(17 17 17/.08); overflow:hidden; }
.ddm-x .ddm-sv-meter i { display:block; height:100%; width:100%; background:var(--sun); transform-origin:0 50%; transform:scaleX(var(--p,0)); }

/* Route: one vertical line of light; each stage is a screen-tall stop */
.ddm-x .ddm-sv-route { --col:clamp(150px,13vw,200px); position:relative; margin:0; padding:0 0 10vh; list-style:none; }
.ddm-x .ddm-sv-line { position:absolute; left:calc(var(--col) / 2); top:var(--l0,0px); height:var(--lh,100%); width:2px; translate:-1px 0;
  background:repeating-linear-gradient(180deg,rgb(17 17 17/.24) 0 2px,transparent 2px 9px); }
.ddm-x .ddm-sv-line-lit { position:absolute; left:-1px; top:0; width:4px; height:100%; border-radius:4px; background:var(--sun); box-shadow:0 0 10px rgb(255 199 0/.75); transform-origin:50% 0; transform:scaleY(var(--fill,0)); }
.ddm-x .ddm-sv-bead { position:absolute; left:1px; top:calc(var(--fill,0) * 100%); width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 3px var(--sun), 0 0 18px 6px rgb(255 199 0/.55), 0 0 2px 1px rgb(59 91 255/.5); opacity:0; transition:opacity .3s; }
.ddm-x .ddm-sv-route.is-moving .ddm-sv-bead { opacity:1; }
.ddm-x .ddm-sv-stage { position:relative; min-height:max(56vh,380px); display:grid; grid-template-columns:var(--col) minmax(0,1fr); gap:20px; align-items:center; }

/* Stops: frosted glass with the service's icon; lit once the light has passed; the one on screen opens into a lens */
.ddm-x .ddm-sv-stop { --s:62px; position:relative; z-index:2; display:grid; justify-items:center; gap:10px; }
.ddm-x .ddm-sv-stop-face { position:relative; display:grid; place-items:center; width:var(--s); height:var(--s); border-radius:50%; overflow:hidden;
  background:rgb(255 255 255/.7); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgb(17 17 17/.08), 0 14px 26px -16px rgb(0 0 0/.4);
  transition:width .8s var(--ease), height .8s var(--ease), background .4s, box-shadow .4s; }
.ddm-x .ddm-sv-stop-face.ddm-contour::before { padding:2px; }
.ddm-x .ddm-sv-stop-face > svg { width:26px; height:26px; fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; transition:opacity .3s; }
.ddm-x .ddm-sv-stop-face > svg.ddm-sv-stop-mark { width:32px; height:auto; aspect-ratio:81 / 50; fill:var(--ink); stroke:none; }
.ddm-x .ddm-sv-stop > b { font:500 .66rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; transition:color .3s; }
.ddm-x .ddm-sv-stage.is-lit .ddm-sv-stop-face { background:#fff; box-shadow:inset 0 1px 0 #fff, 0 0 0 3px var(--sun), 0 0 22px 2px rgb(255 199 0/.45), 0 16px 30px -16px rgb(0 0 0/.45); }
.ddm-x .ddm-sv-stage.is-lit .ddm-sv-stop > b { color:var(--ink); }
.ddm-x .ddm-sv-stage.is-now .ddm-sv-stop { --s:var(--col); }
.ddm-x .ddm-sv-stage.is-now .ddm-sv-stop-face > svg { opacity:0; }
.ddm-x .ddm-sv-stop-scene { position:absolute; inset:0; display:grid; place-items:center; border-radius:50%; overflow:hidden; clip-path:circle(0% at 50% 50%); transition:clip-path .8s cubic-bezier(.65,0,.25,1) .15s; }
.ddm-x .ddm-sv-stage.is-now .ddm-sv-stop-scene { clip-path:circle(50% at 50% 50%); }
/* Each stage's text: shown beside its stop on phones; on wider screens the big card on the left carries it */
.ddm-x .ddm-sv-stage-text { max-width:36ch; }
.ddm-x .ddm-sv-stage-text .ddm-sv-answer-name { font-size:1.35rem; }
@media (min-width:861px) {
  .ddm-x .ddm-sv-stage-text { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .ddm-x .ddm-sv-stage-link { display:none; } /* the step card on the left carries the link here */
  /* Wide screens: the route runs down the middle of the right half and the open lens is large */
  .ddm-x .ddm-sv-route { --col:clamp(240px,22vw,330px); }
  .ddm-x .ddm-sv-line { left:50%; }
  .ddm-x .ddm-sv-stage { grid-template-columns:1fr; justify-items:center; min-height:max(50vh,360px); }
}
/* Scenes borrowed from the cards, sized for the lens */
.ddm-x .ddm-sv-stop-scene > video { width:100%; height:100%; object-fit:cover; object-position:30% 0; }
.ddm-x .ddm-sv-stop-scene[data-scene="branding"] { background:radial-gradient(120% 90% at 30% 10%,#F2F2EF,#DCDCD8); perspective:600px; }
.ddm-x .ddm-sv-stop-scene .ddm-sv-cards { width:64%; animation:ddm-sv-float 6s ease-in-out infinite; }
@keyframes ddm-sv-float { 50% { transform:rotateX(6deg) rotateY(-10deg) translateY(-4px); } }
.ddm-x .ddm-sv-stop-scene .ddm-sv-bc-back b { font-size:.6rem; }
.ddm-x .ddm-sv-stop-scene:is([data-scene="social"],[data-scene="ads"]) { background:radial-gradient(110% 90% at 70% 0%,#EDEDEA,#D8D8D4); }
.ddm-x .ddm-sv-stop-scene .ddm-sv-phone { width:min(84px,30%); min-width:84px; margin-top:34%; padding:5px; border-radius:16px; }
.ddm-x .ddm-sv-stop-scene .ddm-sv-rec { display:none; }
.ddm-x .ddm-sv-stop-scene .ddm-svc-post { border-radius:11px; font-size:.42rem; }
.ddm-x .ddm-sv-stop-scene .ddm-sv-ad { width:56%; margin-top:20%; }
.ddm-x .ddm-sv-stop-scene .ddm-sv-ad .ddm-svc-post { height:auto; aspect-ratio:.8; }
.ddm-x .ddm-sv-stop-scene .ddm-sv-ad .ddm-svc-post-head { padding:5px 7px 3px; }
.ddm-x .ddm-sv-stop-scene .ddm-sv-ad .ddm-svc-post-head i { width:12px; height:12px; }
.ddm-x .ddm-sv-stop-scene .ddm-sv-ad .ddm-svc-post-foot { padding:4px 7px; font-size:.38rem; }
.ddm-x .ddm-sv-stop-scene .ddm-sv-ad .ddm-svc-post-foot b { font-size:.42rem; }
.ddm-x .ddm-sv-stop-scene .ddm-sv-ad .ddm-svc-post-foot em { padding:3px 5px; }
.ddm-x .ddm-sv-stop-scene .ddm-sv-heart { animation:ddm-sv-like 2.8s ease-in-out 1s infinite; }
@keyframes ddm-sv-like { 0%,70%,100% { scale:1; background:var(--ink); } 78% { scale:1.4; background:var(--sun); } 90% { scale:1; background:var(--sun); } }
.ddm-x .ddm-sv-stop-scene[data-scene="found"] { background:radial-gradient(110% 90% at 70% 0%,#EDEDEA,#D8D8D4); }
.ddm-x .ddm-sv-stop-scene .ddm-sv-map { width:74%; gap:5px; }
.ddm-x .ddm-sv-stop-scene .ddm-sv-map-q { font-size:.5rem; padding:5px 8px; }
.ddm-x .ddm-sv-stop-scene .ddm-sv-map-list { gap:4px; }
.ddm-x .ddm-sv-stop-scene .ddm-sv-map-list li { padding:5px 7px; gap:6px; }
.ddm-x .ddm-sv-stop-scene .ddm-sv-map-list b { font-size:.52rem; }
.ddm-x .ddm-sv-stop-scene .ddm-sv-map-list small { font-size:.42rem; }
.ddm-x .ddm-sv-stop-scene .ddm-sv-map-list i { width:9px; height:9px; }

/* ---------- Menu: five services in a bento, in path order ---------- */
.ddm-x .ddm-sv-menu { background:var(--canvas); padding-top:clamp(56px,7vw,104px); }
.ddm-x .ddm-sv-menu h2 > span:not(.ddm-in-w) { display:inline; }
.ddm-x .ddm-sv-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); }
.ddm-x .ddm-sv-card { grid-column:span 2; display:flex; flex-direction:column; gap:22px; padding:clamp(16px,1.6vw,22px); border-radius:24px; background:var(--paper); scroll-margin-top:calc(var(--nav-h) + 24px);
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgb(17 17 17/.07), 0 24px 48px -32px rgb(0 0 0/.3);
  transition:transform .6s var(--ease), box-shadow .4s var(--ease), opacity .5s var(--ease), filter .5s var(--ease); }
.ddm-x .ddm-sv-card:hover { transform:translateY(-4px); box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgb(17 17 17/.1), 0 34px 60px -34px rgb(0 0 0/.4); }
.ddm-x .ddm-sv-card-web { grid-column:span 4; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:center; gap:clamp(20px,3vw,40px); }
.ddm-x .ddm-sv-copy { display:flex; flex-direction:column; padding:0 6px 6px; flex:1; }
.ddm-x .ddm-sv-card-web .ddm-sv-copy { padding:8px 10px 8px 0; }
.ddm-x .ddm-sv-copy h3 { font-size:clamp(1.35rem,1.9vw,1.7rem); margin-bottom:12px; }
.ddm-x .ddm-sv-copy > p:not(.ddm-sv-badge):not(.ddm-tags) { color:var(--ink-2); margin-bottom:0; }
.ddm-x .ddm-sv-copy .ddm-tags { margin:16px 0 0; gap:6px; }
.ddm-x .ddm-sv-copy .ddm-tags span { padding:5px 10px; font-size:.78rem; }
.ddm-x .ddm-sv-copy .ddm-link { margin-top:auto; padding-top:22px; }
.ddm-x .ddm-sv-copy .ddm-link .ddm-arrow { transition:transform .4s var(--ease); }
.ddm-x .ddm-sv-card:hover .ddm-link .ddm-arrow { transform:translateX(4px); }
.ddm-x .ddm-sv-badge { display:flex; align-items:center; gap:8px; margin:0 0 12px; font:500 .68rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-sv-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ink-3); }
.ddm-x .ddm-sv-badge.is-free { color:var(--blue-ink); }
.ddm-x .ddm-sv-badge.is-free::before { background:var(--blue-ink); }

.ddm-x .ddm-sv-card { position:relative; }

/* Visual panels share one height so the copy lines up across a row */
.ddm-x .ddm-sv-vis { position:relative; height:clamp(190px,17vw,230px); border-radius:16px; overflow:hidden; background:#E4E4E1; box-shadow:inset 0 0 0 1px rgb(17 17 17/.05); display:grid; place-items:center; }
.ddm-x .ddm-sv-card-web .ddm-sv-vis { height:auto; overflow:visible; background:none; box-shadow:none; }
.ddm-x .ddm-sv-screen { width:100%; }
.ddm-x .ddm-sv-screen .ddm-svc-pane video { width:100%; height:100%; object-fit:cover; object-position:50% 0; }

/* Premium print: two cards, the front one on black stock with a foil mark and a painted Sunflower edge; it tilts with the pointer */
.ddm-x .ddm-sv-vis:has(.ddm-sv-cards) { background:radial-gradient(120% 90% at 30% 10%,#F2F2EF,#DCDCD8); perspective:900px; }
.ddm-x .ddm-sv-cards { --rx:0deg; --ry:0deg; --fx:30%; position:relative; width:62%; aspect-ratio:1.75; transform-style:preserve-3d; transform:rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .5s var(--ease); }
.ddm-x .ddm-sv-cards.is-tracking { transition:transform .12s linear; }
.ddm-x .ddm-sv-bc { position:absolute; inset:0; border-radius:8px; }
.ddm-x .ddm-sv-bc-back { display:flex; flex-direction:column; justify-content:flex-end; padding:8% 9%; background:#FBFBF8; color:var(--ink); transform:translate(-14%,-16%) rotate(-7deg);
  box-shadow:0 1px 1px rgb(0 0 0/.08), 0 18px 30px -18px rgb(0 0 0/.45); transition:transform .6s var(--ease); }
.ddm-x .ddm-sv-bc-back b { font-size:.85rem; letter-spacing:-.02em; }
.ddm-x .ddm-sv-bc-back small { font:500 .55rem/1.4 var(--mono); color:var(--ink-3); letter-spacing:.04em; }
.ddm-x .ddm-sv-bc-front { display:grid; place-items:center; overflow:hidden; background:linear-gradient(160deg,#1a1a1b,#070708); transform:translate(10%,12%) rotate(4deg) translateZ(20px);
  box-shadow:3px 3px 0 -1px var(--sun), 4px 4px 0 -1px #c99a00, 0 26px 40px -20px rgb(0 0 0/.65); transition:transform .6s var(--ease); }
.ddm-x .ddm-sv-bc-front svg { width:34%; height:auto; aspect-ratio:81 / 50; fill:#D9D6CC; filter:drop-shadow(0 1px 0 rgb(255 255 255/.35)) drop-shadow(0 -1px 0 rgb(0 0 0/.6)); }
.ddm-x .ddm-sv-foil { position:absolute; inset:-20%; pointer-events:none; mix-blend-mode:overlay;
  background:linear-gradient(115deg,transparent 30%,rgb(255 255 255/.75) calc(var(--fx) + 8%),transparent calc(var(--fx) + 22%)); }
.ddm-x .ddm-sv-card-print:hover .ddm-sv-bc-back { transform:translate(-20%,-20%) rotate(-10deg); }
.ddm-x .ddm-sv-card-print:hover .ddm-sv-bc-front { transform:translate(12%,14%) rotate(2deg) translateZ(40px); }

/* Social media: a phone with a fresh post */
.ddm-x .ddm-sv-vis:has(.ddm-sv-phone) { background:radial-gradient(110% 90% at 70% 0%,#EDEDEA,#D8D8D4); }
.ddm-x .ddm-sv-phone { position:relative; width:clamp(118px,10vw,140px); aspect-ratio:9/17; margin-top:22%; padding:7px; border-radius:22px; background:var(--ink); box-shadow:inset 0 0 0 1.5px rgb(255 255 255/.14), 0 30px 40px -24px rgb(0 0 0/.6); transition:translate .6s var(--ease); }
.ddm-x .ddm-sv-phone .ddm-svc-post { height:100%; width:100%; max-width:none; aspect-ratio:auto; border-radius:16px; font-size:.55rem; box-shadow:none; }
.ddm-x .ddm-sv-phone .ddm-svc-post-head { padding:8px 9px 5px; }
.ddm-x .ddm-sv-phone .ddm-svc-post-head i { width:16px; height:16px; }
.ddm-x .ddm-sv-phone .ddm-svc-post-head small { font-size:.5rem; }
.ddm-x .ddm-sv-phone .ddm-svc-post-img span { font-size:.5rem; }
.ddm-x .ddm-sv-post-acts { display:flex; gap:7px; padding:7px 9px 9px; }
.ddm-x .ddm-sv-post-acts i { width:13px; height:13px; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgb(17 17 17/.35); }
.ddm-x .ddm-sv-post-acts .ddm-sv-heart { border-radius:0; box-shadow:none; background:var(--ink); transition:background .3s, scale .45s cubic-bezier(.34,1.8,.64,1);
  -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-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.7 4.5c2.2 0 3.6 1.3 5.3 3.2 1.7-1.9 3.1-3.2 5.3-3.2 3.7 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21Z'/%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-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.7 4.5c2.2 0 3.6 1.3 5.3 3.2 1.7-1.9 3.1-3.2 5.3-3.2 3.7 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ddm-x .ddm-sv-rec { position:absolute; top:-30px; left:50%; translate:-50% 0; display:flex; align-items:center; gap:6px; white-space:nowrap; padding:5px 10px; border-radius:999px; background:#fff;
  font:500 .58rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; box-shadow:0 6px 14px -8px rgb(0 0 0/.35); }
.ddm-x .ddm-sv-rec i { width:7px; height:7px; border-radius:50%; background:var(--sun); box-shadow:0 0 0 1px rgb(17 17 17/.25); animation:ddm-sv-blink 1.6s steps(1,end) infinite; }
@keyframes ddm-sv-blink { 50% { opacity:.25; } }
.ddm-x .ddm-sv-card-social:hover .ddm-sv-phone { translate:0 -8px; }
.ddm-x .ddm-sv-card-social:hover .ddm-sv-heart { background:var(--sun); scale:1.35; }

/* Video ads: a sponsored video post with a call button */
.ddm-x .ddm-sv-vis:has(.ddm-sv-ad) { background:radial-gradient(110% 90% at 30% 0%,#EDEDEA,#D8D8D4); }
.ddm-x .ddm-sv-ad { position:relative; width:clamp(128px,11vw,148px); margin-top:0; transition:translate .6s var(--ease); }
.ddm-x .ddm-sv-ad .ddm-svc-post { width:100%; max-width:none; border-radius:14px; font-size:.55rem; box-shadow:0 26px 40px -22px rgb(0 0 0/.55); }
.ddm-x .ddm-sv-ad .ddm-svc-post-head { padding:8px 10px 5px; }
.ddm-x .ddm-sv-ad .ddm-svc-post-head i { width:16px; height:16px; }
.ddm-x .ddm-sv-ad .ddm-svc-post-foot { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:7px 10px; font-size:.5rem; line-height:1.3; }
.ddm-x .ddm-sv-ad .ddm-svc-post-foot em { flex:none; font-style:normal; font-weight:600; padding:4px 7px; border-radius:6px; background:var(--sun); color:var(--ink); }
.ddm-x .ddm-sv-card-ads:hover .ddm-sv-ad { translate:0 -8px; }
.ddm-x .ddm-sv-ad .ddm-svc-post-img { display:grid; place-items:center; }
.ddm-x .ddm-sv-play { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgb(255 255 255/.92); box-shadow:0 6px 14px -6px rgb(0 0 0/.45); transition:scale .45s cubic-bezier(.34,1.8,.64,1); }
.ddm-x .ddm-sv-play::before { content:""; margin-left:3px; border-left:10px solid var(--ink); border-block:6px solid transparent; }
.ddm-x .ddm-sv-card-ads:hover .ddm-sv-play { scale:1.15; }
.ddm-x .ddm-sv-stop-scene .ddm-sv-play { width:18px; height:18px; }
.ddm-x .ddm-sv-stop-scene .ddm-sv-play::before { margin-left:2px; border-left-width:6px; border-block-width:4px; }

/* Get Found: a local search where your business sits on top, lit */
.ddm-x .ddm-sv-vis:has(.ddm-sv-map) { background:radial-gradient(110% 90% at 70% 0%,#EDEDEA,#D8D8D4); }
.ddm-x .ddm-sv-map { display:grid; gap:8px; width:84%; }
.ddm-x .ddm-sv-map-q { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; font-size:.78rem; color:var(--ink-2); box-shadow:inset 0 0 0 1px rgb(17 17 17/.08), 0 6px 14px -10px rgb(0 0 0/.35); }
.ddm-x .ddm-sv-map-q::before { content:""; flex:none; width:9px; height:9px; border:1.5px solid var(--ink-3); border-radius:50%; }
.ddm-x .ddm-sv-map-list { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.ddm-x .ddm-sv-map-list li { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px; background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px rgb(17 17 17/.06); transition:translate .6s var(--ease), opacity .4s; }
.ddm-x .ddm-sv-map-list span { display:grid; line-height:1.2; }
.ddm-x .ddm-sv-map-list b { font-size:.82rem; font-weight:600; letter-spacing:-.01em; }
.ddm-x .ddm-sv-map-list small { font:500 .58rem/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-sv-map-list i { flex:none; width:12px; height:12px; border-radius:50% 50% 50% 0; rotate:-45deg; background:rgb(17 17 17/.25); }
.ddm-x .ddm-sv-map-list .is-you i { background:var(--ink); box-shadow:0 0 0 2.5px var(--sun), 0 0 12px 2px rgb(255 199 0/.6); }
.ddm-x .ddm-sv-map-list li:not(.is-you) { opacity:.85; }
.ddm-x .ddm-sv-card-found:hover .ddm-sv-map-list .is-you { translate:0 -3px; }
.ddm-x .ddm-sv-card-found:hover .ddm-sv-map-list li:not(.is-you) { translate:0 3px; opacity:.55; }

/* Dark cards (Daniel, Oct 19): each menu card is a small obsidian panel over its own dark digit field, with the content
   inverted. Scoped to .ddm-sv-card so the scenes the route clones into its lens keep their light look. */
.ddm-x .ddm-sv-card { isolation:isolate; overflow:hidden; background:var(--obsidian); color:var(--on-dark);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.1), inset 0 0 0 1px rgb(255 255 255/.07), 0 24px 48px -30px rgb(0 0 0/.55); }
.ddm-x .ddm-sv-card:hover { box-shadow:inset 0 1px 0 rgb(255 255 255/.14), inset 0 0 0 1px rgb(255 255 255/.1), 0 34px 60px -32px rgb(0 0 0/.65); }
.ddm-x .ddm-sv-card > .ddm-digits { opacity:.6; -webkit-mask:radial-gradient(ellipse 75% 85% at 85% 15%,#000 10%,transparent 72%); mask:radial-gradient(ellipse 75% 85% at 85% 15%,#000 10%,transparent 72%); }
.ddm-x .ddm-sv-card > .ddm-grain { mix-blend-mode:overlay; opacity:.5; }
.ddm-x .ddm-sv-card > :is(.ddm-sv-vis,.ddm-sv-copy) { position:relative; z-index:1; }
.ddm-x .ddm-sv-card .ddm-sv-copy h3 { color:#fff; }
.ddm-x .ddm-sv-card .ddm-sv-copy > p:not(.ddm-sv-badge):not(.ddm-tags) { color:var(--on-dark-2); }
.ddm-x .ddm-sv-card .ddm-sv-badge { color:var(--on-dark-2); }
.ddm-x .ddm-sv-card .ddm-sv-badge::before { background:var(--on-dark-2); }
.ddm-x .ddm-sv-card .ddm-sv-badge.is-free { color:var(--blue-light); }
.ddm-x .ddm-sv-card .ddm-sv-badge.is-free::before { background:var(--blue-light); }
.ddm-x .ddm-sv-card .ddm-tags span { background:rgb(255 255 255/.07); color:var(--on-dark); }
.ddm-x .ddm-sv-card .ddm-link { color:var(--blue-light); }
.ddm-x .ddm-sv-card .ddm-sv-vis { background:rgb(255 255 255/.04); box-shadow:inset 0 0 0 1px rgb(255 255 255/.08); }
.ddm-x .ddm-sv-card-web .ddm-sv-vis { background:none; box-shadow:none; }
.ddm-x .ddm-sv-card .ddm-sv-vis:is(:has(.ddm-sv-cards),:has(.ddm-sv-phone),:has(.ddm-sv-ad),:has(.ddm-sv-map)) { background:radial-gradient(110% 90% at 30% 0%,rgb(255 255 255/.09),rgb(255 255 255/.02)); }
/* Hover: the light-double-yellow/blue rim (light.css) wakes on the card and takes over from the contour orbit (Daniel, Oct 19) */
.ddm-x .ddm-sv-card.ddm-light-double::after { opacity:0; animation-play-state:paused; transition:opacity .45s var(--ease); }
@media (hover:hover) and (pointer:fine) {
  .ddm-x .ddm-sv-card.ddm-light-double:is(:hover,:focus-within)::after { opacity:1; animation-play-state:running; }
  .ddm-x .ddm-sv-card.ddm-contour:is(:hover,:focus-within)::before { opacity:0; animation:none; }
}
.ddm-x .ddm-sv-card.ddm-light-double:focus-visible::after { opacity:1; animation-play-state:running; }
/* Light computer frame (Daniel, Oct 19) */
.ddm-x .ddm-sv-card .ddm-svc-screen { background:#F4F4F1; box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgb(17 17 17/.08), 0 30px 50px -28px rgb(0 0 0/.85); }
.ddm-x .ddm-sv-card .ddm-svc-bar i { background:rgb(17 17 17/.18); }
.ddm-x .ddm-sv-card .ddm-svc-bar span { color:var(--ink-3); }
.ddm-x .ddm-sv-card .ddm-sv-rec { color:var(--ink); }
.ddm-x .ddm-sv-card .ddm-sv-bc-front { box-shadow:inset 0 0 0 1px rgb(255 255 255/.12), 3px 3px 0 -1px var(--sun), 4px 4px 0 -1px #c99a00, 0 26px 40px -20px rgb(0 0 0/.8); }
.ddm-x .ddm-sv-card .ddm-sv-phone { box-shadow:inset 0 0 0 1.5px rgb(255 255 255/.22), 0 30px 40px -24px rgb(0 0 0/.8); }

/* ---------- How it builds (obsidian) ---------- */
.ddm-x .ddm-sv-build .ddm-digits { -webkit-mask:radial-gradient(ellipse 60% 70% at 85% 30%,#000 15%,transparent 70%); mask:radial-gradient(ellipse 60% 70% at 85% 30%,#000 15%,transparent 70%); }
.ddm-x .ddm-sv-build-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(40px,6vw,96px); align-items:center; }
.ddm-x .ddm-sv-build .ddm-head { margin-bottom:0; }
.ddm-x .ddm-sv-build .ddm-head > p:not(.ddm-eyebrow) { max-width:44ch; }
.ddm-x .ddm-sv-stack { display:flex; flex-direction:column; align-items:center; gap:10px; margin:0; padding:0; list-style:none; }
/* Layers: narrower as they rise, each with the Services rim (one crisp white line, soft glow) */
.ddm-x .ddm-sv-layer { position:relative; width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 18px; align-items:baseline; padding:20px 22px; border-radius:18px;
  border:1px solid rgb(255 255 255/.9); background:rgb(255 255 255/.03); box-shadow:0 0 1.5px #fff, 0 0 8px rgb(255 255 255/.4), inset 0 0 14px rgb(255 255 255/.08);
  transition:opacity .8s var(--ease), translate .9s cubic-bezier(.34,1.3,.64,1); transition-delay:calc(var(--k,0) * 260ms); }
.ddm-x .ddm-sv-layer.is-mid { width:90%; }
.ddm-x .ddm-sv-layer.is-top { width:80%; }
.ddm-x .ddm-sv-layer.is-base { padding-block:26px; background:rgb(255 255 255/.06); }
.ddm-x .ddm-sv-layer h3 { grid-column:1; color:#fff; font-size:clamp(1.15rem,1.6vw,1.4rem); }
.ddm-x .ddm-sv-layer.is-base h3 { color:var(--sun); font-size:clamp(1.35rem,2vw,1.7rem); }
.ddm-x .ddm-sv-layer p { grid-column:1 / -1; margin:0; color:var(--on-dark-2); font-size:.92rem; max-width:52ch; }
.ddm-x .ddm-sv-when { grid-column:2; grid-row:1; font:500 .64rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-2); white-space:nowrap; }
.ddm-x .ddm-sv-layer.is-base .ddm-sv-when { color:var(--sun); }
.ddm-x .ddm-sv-stack.is-waiting .ddm-sv-layer { opacity:0; translate:0 -36px; }
/* Branding & print runs under the whole stack: it fits in anytime */
.ddm-x .ddm-sv-rail { position:relative; display:flex; align-items:center; gap:14px; margin:14px 0 0; padding:12px 4px 0; color:var(--on-dark-2); font-size:.92rem; }
.ddm-x .ddm-sv-rail::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; border-radius:2px;
  background:repeating-linear-gradient(90deg,rgb(255 255 255/.55) 0 10px,transparent 10px 18px); background-size:36px 2px; animation:ddm-sv-rail 2.4s linear infinite; }
@keyframes ddm-sv-rail { to { background-position:36px 0; } }
.ddm-x .ddm-sv-rail .ddm-sv-when { color:var(--sun); }
.ddm-x .ddm-sv-rail b { color:#fff; font-weight:600; }
/* The Included box, as dark glass (same recipe as Home's dark Services had) */
.ddm-x .ddm-sv-build .ddm-pack { background:rgb(255 255 255/.035); -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.14), inset 0 0 0 1px rgb(255 255 255/.07), 0 30px 60px -30px rgb(0 0 0/.8); }
.ddm-x .ddm-sv-build .ddm-pack::before { opacity:.35; }
.ddm-x .ddm-sv-build .ddm-pack h3 { color:#fff; }
.ddm-x .ddm-sv-build .ddm-svc-no { color:var(--on-dark-2); }
.ddm-x .ddm-sv-build .ddm-pack-copy > p:not(.ddm-svc-no) { color:var(--on-dark-2); }
.ddm-x .ddm-sv-build .ddm-checklist li { border-bottom-color:var(--line-dark); color:var(--on-dark); }
.ddm-x .ddm-sv-build .ddm-pack.is-waiting .ddm-checklist li::before { box-shadow:inset 0 0 0 1.5px rgb(255 255 255/.25); }

/* ---------- Smaller screens ---------- */
@media (max-width:1060px) {
  .ddm-x .ddm-sv-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ddm-x .ddm-sv-card, .ddm-x .ddm-sv-card-web { grid-column:span 1; }
  .ddm-x .ddm-sv-card-web { grid-column:1 / -1; }
}
@media (max-width:860px) {
  .ddm-x .ddm-sv-top-grid, .ddm-x .ddm-sv-build-grid { grid-template-columns:1fr; }
  .ddm-x .ddm-sv-side { position:static; }
  .ddm-x .ddm-sv-now { display:none; }
  .ddm-x .ddm-sv-route { --col:112px; margin-top:12px; padding-bottom:0; }
  .ddm-x .ddm-sv-stop { --s:52px; }
  .ddm-x .ddm-sv-stage { min-height:0; padding:28px 0; align-items:center; }
  .ddm-x .ddm-sv-digits { -webkit-mask:linear-gradient(180deg,transparent 30%,#000 60%,#000 80%,transparent); mask:linear-gradient(180deg,transparent 30%,#000 60%,#000 80%,transparent); }
}
@media (max-width:640px) {
  .ddm-x .ddm-sv-grid { grid-template-columns:1fr; }
  .ddm-x .ddm-sv-card, .ddm-x .ddm-sv-card-web { grid-column:1; display:flex; }
  .ddm-x .ddm-sv-card-web .ddm-sv-copy { padding:0 6px 6px; }
  .ddm-x .ddm-sv-title .ddm-mark { white-space:normal; }
  .ddm-x .ddm-sv-layer, .ddm-x .ddm-sv-layer.is-mid, .ddm-x .ddm-sv-layer.is-top { width:100%; grid-template-columns:1fr; }
  .ddm-x .ddm-sv-when { grid-column:1; grid-row:auto; }
}

/* ---------- Preferences ---------- */
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-sv-now.is-swap > * { animation:none; }
  .ddm-x .ddm-sv-rec i, .ddm-x .ddm-sv-rail::before, .ddm-x .ddm-sv-stop-scene .ddm-sv-cards, .ddm-x .ddm-sv-stop-scene .ddm-sv-heart { animation:none; }
  .ddm-x .ddm-sv-stop-face, .ddm-x .ddm-sv-stop-scene { transition:none; }
  .ddm-x .ddm-sv-stack .ddm-sv-layer { opacity:1 !important; translate:none !important; }
  .ddm-x .ddm-sv-card, .ddm-x .ddm-sv-cards, .ddm-x .ddm-sv-bc { transition:none; }
}
@media (prefers-reduced-transparency:reduce) {
  .ddm-x .ddm-sv-answer, .ddm-x .ddm-sv-stop-face { background:var(--paper); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .ddm-x .ddm-sv-build .ddm-pack { background:#161617; }
}
@media (forced-colors:active) {
  .ddm-x .ddm-sv-card, .ddm-x .ddm-sv-answer, .ddm-x .ddm-sv-layer, .ddm-x .ddm-sv-stop-face { border:1px solid CanvasText; }
}
/* The chapter heading runs a size down so "Your website first." holds one line beside the stack */
.ddm-x .ddm-sv-build h2 { font-size:clamp(2.3rem,4.3vw,4rem); }

/* ---------- One dark run: the portal flows straight into How it builds (Daniel, Oct 24; qa/portal-into-dark-howto.md) ----------
   The portal moved up from the end of the page, so How it builds wears the portal's background: the same full number field
   and soft grain, no fade at the seam. Before: source/archive/services-portal-pre-2026-10-24/. */
.ddm-x.ddm-sv-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-sv-page .ddm-sv-build { margin-top:-1px; padding-top:clamp(0px,2.4vw,36px); }
.ddm-x.ddm-sv-page .ddm-sv-build > .ddm-digits { opacity:1; -webkit-mask:linear-gradient(180deg,#000 88%,transparent); mask:linear-gradient(180deg,#000 88%,transparent); }
.ddm-x.ddm-sv-page .ddm-sv-build > .ddm-grain { mix-blend-mode:normal; opacity:.14; }
/* Quiet the number field where people read: grey veil on the layers and the Included box, a soft halo behind the lede */
.ddm-x.ddm-sv-page .ddm-sv-layer { background:rgb(34 34 37/.66); }
.ddm-x.ddm-sv-page .ddm-sv-layer.is-base { background:rgb(40 40 43/.7); }
.ddm-x.ddm-sv-page .ddm-sv-build .ddm-pack { background:rgb(34 34 37/.66); }
.ddm-x.ddm-sv-page .ddm-sv-build .ddm-head > p:not(.ddm-eyebrow) { position:relative; }
.ddm-x.ddm-sv-page .ddm-sv-build .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)); }