/* Deft Digital Media — service page template (Daniel, October 23, 2026). First used by pages/websites.html; plan in
   qa/service-pages-plan.md. 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, one obsidian chapter per page. Uses home.css tokens,
   light.css (contour, portal), sections.css (screen bezel, Included box + checks) and Home's .ddm-obsidian chapter.
   Motion: scripts/service.js. Prefix ddm-se-. The page's unique element sits under its own heading below. */

.ddm-x .ddm-se-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ddm-x .ddm-se-wa { width:20px; height:20px; flex:none; fill:currentColor; }

/* ---------- Hero ---------- */
.ddm-x .ddm-se-hero { position:relative; padding:calc(var(--nav-h) + clamp(40px,5vw,72px)) 0 clamp(36px,4vw,56px); }
.ddm-x .ddm-se-digits { opacity:.9; -webkit-mask:radial-gradient(55% 55% at 78% 35%,#000 25%,transparent 100%); mask:radial-gradient(55% 55% at 78% 35%,#000 25%,transparent 100%); }
.ddm-x .ddm-se-hero > .ddm-grain { -webkit-mask:linear-gradient(180deg,#000 70%,transparent); mask:linear-gradient(180deg,#000 70%,transparent); }
.ddm-x .ddm-se-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:center; }
.ddm-x .ddm-se-title { font-size:clamp(2.8rem,5.6vw,5.4rem); line-height:.92; letter-spacing:-.058em; margin-bottom:26px; }
.ddm-x .ddm-se-title .ddm-mark { white-space:nowrap; background-image:linear-gradient(transparent 20%,var(--sun) 20%,var(--sun) 90%,transparent 90%); }
.ddm-x .ddm-se-head > p:not(.ddm-eyebrow):not(.ddm-fine) { font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--ink-2); max-width:44ch; margin-bottom:28px; }
.ddm-x .ddm-se-head .ddm-fine { margin:14px 0 0; }
.ddm-x .ddm-se-screen { box-shadow:0 40px 80px -40px rgb(0 0 0/.55), 0 0 0 1px rgb(17 17 17/.06); rotate:-1.5deg; }
.ddm-x .ddm-se-screen video { width:100%; height:100%; object-fit:cover; object-position:50% 0; }
.ddm-x .ddm-se-hero-cap { margin:16px 0 0; font-size:.85rem; color:var(--ink-3); text-align:right; }
.ddm-x .ddm-se-hero-cap b { color:var(--ink); font-weight:600; margin-right:6px; }

/* ---------- Path bar: the client path, this page lit ----------
   Rebuilt Oct 24 (Daniel: "looks a little broken"). Each step is a compact link; the connector after it is its own
   flexible line, so it never runs into a dot or a label. Steps already behind you are joined by a solid line, steps
   ahead by a dotted one. The last path step (Grow) takes no line, and the side stop (Start anywhere) sits after a short
   dashed divider with a dashed dot, beside the path rather than on it. The bar wears the same paper surface as the
   Next card under it and sits just above it (more room below, Daniel Oct 24), so the two read as one block. Undo: source/archive/path-bar-pre-2026-10-24/ */
.ddm-x .ddm-se-path { position:relative; z-index:1; margin-bottom:clamp(20px,2.2vw,28px); }
.ddm-x .ddm-se-path ol { display:flex; align-items:center; margin:0; padding:6px; list-style:none; border-radius:999px; overflow-x:auto; scrollbar-width:none;
  background:var(--paper); 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); }
.ddm-x .ddm-se-path ol::-webkit-scrollbar { display:none; }
.ddm-x .ddm-se-path li { display:flex; align-items:center; flex:1 0 auto; }
.ddm-x .ddm-se-path li::after { content:""; flex:1 1 auto; min-width:24px; height:2px; margin-inline:10px 14px; border-radius:2px;
  background:radial-gradient(circle,rgb(17 17 17/.26) 1px,transparent 1.4px) 0 50% / 6px 2px repeat-x; }
.ddm-x .ddm-se-path li:has(~ .is-here:not(.is-side))::after { background:rgb(17 17 17/.32); }
.ddm-x .ddm-se-path li:nth-last-child(2) { flex-grow:0; }
.ddm-x .ddm-se-path li:is(:nth-last-child(2),.is-side)::after { content:none; }
.ddm-x .ddm-se-path li.is-side { flex:none; position:relative; margin-left:clamp(14px,2.4vw,32px); padding-left:clamp(14px,2.4vw,32px); }
.ddm-x .ddm-se-path li.is-side::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:1px;
  background:repeating-linear-gradient(180deg,rgb(17 17 17/.22) 0 3px,transparent 3px 6px); }
.ddm-x .ddm-se-path a { display:flex; flex:none; align-items:center; gap:10px; padding:9px 18px 9px 12px; border-radius:999px; white-space:nowrap; transition:background .3s var(--ease), box-shadow .3s var(--ease); }
.ddm-x .ddm-se-path a:hover { background:rgb(17 17 17/.05); }
.ddm-x .ddm-se-path i { flex:none; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1.5px rgb(17 17 17/.28); }
.ddm-x .ddm-se-path li:has(~ .is-here:not(.is-side)) i { background:rgb(17 17 17/.32); box-shadow:none; }
.ddm-x .ddm-se-path .is-side i { background:transparent; box-shadow:none; border:1.5px dashed rgb(17 17 17/.34); }
.ddm-x .ddm-se-path span { display:grid; line-height:1.15; }
.ddm-x .ddm-se-path b { font-size:.9rem; font-weight:600; letter-spacing:-.01em; }
.ddm-x .ddm-se-path small { font:500 .64rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-se-path .is-here a { background:#fff; box-shadow:inset 0 0 0 1px rgb(17 17 17/.06), 0 8px 20px -14px rgb(0 0 0/.45); }
.ddm-x .ddm-se-path .is-here i, .ddm-x .ddm-se-path .is-side.is-here i { border:0; background:#fff; box-shadow:0 0 0 3px var(--sun), 0 0 14px 2px rgb(255 199 0/.55); }

/* ---------- Why it matters (Websites: "From search to ring") ---------- */
.ddm-x .ddm-se-why { padding-top:clamp(64px,8vw,120px); }
.ddm-x .ddm-se-phone-digits { inset:-6% -30%; width:160%; height:112%; opacity:.8; -webkit-mask:radial-gradient(50% 50% at 50% 50%,#000 30%,transparent 100%); mask:radial-gradient(50% 50% at 50% 50%,#000 30%,transparent 100%); }
.ddm-x .ddm-se-phone, .ddm-x .ddm-se-dots { position:relative; z-index:1; }
.ddm-x .ddm-se-why-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(32px,6vw,96px); }
.ddm-x .ddm-se-why-head { margin-bottom:clamp(24px,4vw,48px); }
.ddm-x .ddm-se-beats { margin:0; padding:0 0 18vh; list-style:none; }
.ddm-x .ddm-se-beat { min-height:62vh; display:flex; flex-direction:column; justify-content:center; padding-left:22px; border-left:2px solid var(--line); transition:border-color .4s var(--ease); }
.ddm-x .ddm-se-beat h3 { font-size:clamp(1.6rem,2.6vw,2.3rem); margin-bottom:12px; transition:color .4s var(--ease); }
.ddm-x .ddm-se-beat p { max-width:38ch; font-size:1.08rem; color:var(--ink-2); margin:0; }
.ddm-x .ddm-se-why.is-live .ddm-se-beat:not(.is-on) :is(h3,p) { color:var(--ink-3); }
.ddm-x .ddm-se-beat.is-on { border-left-color:var(--sun); }
.ddm-x .ddm-se-phone-col { position:sticky; top:calc(var(--nav-h) + 4vh); height:calc(100vh - var(--nav-h) - 8vh); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; }

/* The phone: one bezel, three screens; data-beat (0-4) picks what shows */
.ddm-x .ddm-se-phone { --w:min(300px,30vw); position:relative; width:var(--w); aspect-ratio:9 / 18.5; padding:10px; border-radius:42px; 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); }
.ddm-x .ddm-se-notch { position:absolute; z-index:9; top:18px; left:50%; width:30%; height:20px; translate:-50% 0; border-radius:12px; background:#0d0d0e; }
.ddm-x .ddm-se-scr { position:absolute; inset:10px; border-radius:33px; overflow:hidden; background:#F4F4F1; opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility 0s .45s; }
.ddm-x .ddm-se-phone[data-beat="0"] .ddm-se-scr-search,
.ddm-x .ddm-se-phone:is([data-beat="1"],[data-beat="2"]) .ddm-se-scr-map,
.ddm-x .ddm-se-phone:is([data-beat="3"],[data-beat="4"]) .ddm-se-scr-site { opacity:1; visibility:visible; transition:opacity .45s var(--ease); }

/* 0: search, the words decode in */
.ddm-x .ddm-se-scr-search { padding:58px 14px 0; background:radial-gradient(120% 60% at 50% 0%,#fff,#EDEDEA); }
.ddm-x .ddm-se-q { display:flex; align-items:center; gap:8px; padding:12px 14px; border-radius:999px; background:#fff; box-shadow:0 10px 24px -14px rgb(0 0 0/.35), inset 0 0 0 1px rgb(17 17 17/.08); font-size:.8rem; font-weight:500; white-space:nowrap; overflow:hidden; }
.ddm-x .ddm-se-q svg { width:16px; height:16px; flex:none; fill:none; stroke:var(--ink-3); stroke-width:2; stroke-linecap:round; }
.ddm-x .ddm-se-caret { width:1.5px; height:15px; background:var(--blue-ink); animation:ddm-se-blink 1s steps(1,end) 4 both; }
@keyframes ddm-se-blink { 50% { opacity:0; } }
.ddm-x .ddm-se-sugg { margin:16px 4px 0; padding:0; list-style:none; display:grid; gap:12px; }
.ddm-x .ddm-se-sugg li { height:9px; border-radius:6px; background:rgb(17 17 17/.08); }
.ddm-x .ddm-se-sugg li:nth-child(1) { width:78%; } .ddm-x .ddm-se-sugg li:nth-child(2) { width:62%; } .ddm-x .ddm-se-sugg li:nth-child(3) { width:70%; }
.ddm-x .ddm-se-phone[data-beat="0"] .ddm-se-sugg li { animation:ddm-se-up .5s var(--ease) both; animation-delay:calc(1.2s + var(--k,0) * 90ms); }
.ddm-x .ddm-se-sugg li:nth-child(2) { --k:1; } .ddm-x .ddm-se-sugg li:nth-child(3) { --k:2; }
@keyframes ddm-se-up { from { opacity:0; translate:0 6px; } }

/* 1 + 2: map with pins and the list; in 2 the business without a site fades and is scrolled past */
.ddm-x .ddm-se-map { position:relative; height:46%; background:#E3E6E1; overflow:hidden; }
.ddm-x .ddm-se-road { position:absolute; background:#fff; box-shadow:0 0 0 1px rgb(17 17 17/.05); }
.ddm-x .ddm-se-road.r1 { left:-10%; right:-10%; top:42%; height:10px; rotate:-12deg; }
.ddm-x .ddm-se-road.r2 { top:-10%; bottom:-10%; left:58%; width:8px; rotate:8deg; }
.ddm-x .ddm-se-road.r3 { left:-10%; right:30%; top:78%; height:6px; rotate:4deg; }
.ddm-x .ddm-se-pin { position:absolute; width:20px; height:20px; translate:-50% -100%; border-radius:50% 50% 50% 0; rotate:-45deg; background:#9A9A95; box-shadow:0 6px 10px -4px rgb(0 0 0/.4); transition:background .4s, opacity .4s, scale .5s var(--ease); }
.ddm-x .ddm-se-pin::after { content:""; position:absolute; inset:6px; border-radius:50%; background:#fff; }
.ddm-x .ddm-se-pin.p1 { left:26%; top:40%; } .ddm-x .ddm-se-pin.p2 { left:62%; top:58%; } .ddm-x .ddm-se-pin.p3 { left:40%; top:86%; }
.ddm-x .ddm-se-pin.is-you { background:var(--ink); }
.ddm-x .ddm-se-phone:is([data-beat="1"],[data-beat="2"]) .ddm-se-pin.is-you { scale:1.3; background:var(--ink); box-shadow:0 0 0 3px var(--sun), 0 0 16px 3px rgb(255 199 0/.6); }
.ddm-x .ddm-se-phone[data-beat="2"] .ddm-se-pin.is-none { opacity:.3; }
.ddm-x .ddm-se-list { margin:0; padding:10px; list-style:none; display:grid; gap:8px; transition:translate .7s var(--ease); }
.ddm-x .ddm-se-list li { display:grid; gap:2px; padding:10px 12px; border-radius:14px; background:#fff; box-shadow:0 6px 16px -12px rgb(0 0 0/.35), inset 0 0 0 1px rgb(17 17 17/.06); font-size:.68rem; transition:opacity .5s var(--ease), filter .5s var(--ease), box-shadow .4s; }
.ddm-x .ddm-se-list b { font-size:.74rem; font-weight:600; }
.ddm-x .ddm-se-list small { color:var(--ink-3); }
.ddm-x .ddm-se-list span { display:flex; gap:6px; margin-top:6px; }
.ddm-x .ddm-se-list em { font-style:normal; font-weight:500; padding:4px 9px; border-radius:999px; background:rgb(17 17 17/.06); }
.ddm-x .ddm-se-list em.is-off { color:#B5B5B0; text-decoration:line-through; }
.ddm-x .ddm-se-list li.is-you { box-shadow:0 0 0 2px var(--sun), 0 10px 20px -12px rgb(0 0 0/.4); }
.ddm-x .ddm-se-list li.is-none small { color:var(--ink-3); font-weight:600; }
.ddm-x .ddm-se-phone[data-beat="2"] .ddm-se-list li.is-none { opacity:.35; filter:grayscale(1) blur(.4px); }
.ddm-x .ddm-se-phone[data-beat="2"] .ddm-se-list { translate:0 -6px; }

/* 3: the site opens through a lens from the tapped pin; 4: the call button rings */
.ddm-x .ddm-se-scr-site { background:#fff; }
.ddm-x .ddm-se-site { position:absolute; inset:0; padding-top:44px; clip-path:circle(0% at 62% 30%); transition:clip-path .9s cubic-bezier(.65,0,.25,1) .1s; }
.ddm-x .ddm-se-phone:is([data-beat="3"],[data-beat="4"]) .ddm-se-site { clip-path:circle(150% at 62% 30%); }
.ddm-x .ddm-se-site-bar { display:flex; align-items:center; gap:8px; padding:6px 14px 10px; font-size:.72rem; font-weight:600; }
.ddm-x .ddm-se-site-bar img { width:24px; height:24px; border-radius:6px; }
.ddm-x .ddm-se-site-bar i { margin-left:auto; width:16px; height:10px; border-block:2px solid var(--ink); position:relative; }
.ddm-x .ddm-se-site-bar i::after { content:""; position:absolute; left:0; right:0; top:2px; height:2px; background:var(--ink); }
.ddm-x .ddm-se-site-hero { position:relative; margin:0 10px; border-radius:14px; overflow:hidden; aspect-ratio:4 / 3; }
.ddm-x .ddm-se-site-hero img { width:100%; height:100%; object-fit:cover; }
.ddm-x .ddm-se-site-hero b { position:absolute; left:10px; right:10px; bottom:10px; color:#fff; font-size:.95rem; line-height:1.05; letter-spacing:-.03em; text-shadow:0 2px 10px rgb(0 0 0/.5); }
.ddm-x .ddm-se-site-gal { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:8px 10px 0; }
.ddm-x .ddm-se-site-gal img { width:100%; aspect-ratio:3 / 4; object-fit:cover; border-radius:8px; }
.ddm-x .ddm-se-phone:is([data-beat="3"],[data-beat="4"]) .ddm-se-site-gal img { animation:ddm-se-up .5s var(--ease) both; animation-delay:calc(.7s + var(--k,0) * 100ms); }
.ddm-x .ddm-se-site-chips { display:flex; flex-wrap:wrap; gap:5px; margin:10px 10px 0; padding:0; list-style:none; }
.ddm-x .ddm-se-site-chips li { padding:5px 9px; border-radius:999px; background:rgb(17 17 17/.06); font-size:.62rem; font-weight:500; }
.ddm-x .ddm-se-site-area { margin:9px 12px 0; font-size:.6rem; color:var(--ink-3); }
.ddm-x .ddm-se-site-gal img:nth-child(2) { --k:1; } .ddm-x .ddm-se-site-gal img:nth-child(3) { --k:2; }
.ddm-x .ddm-se-call { position:absolute; left:10px; right:10px; bottom:14px; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:999px; background:var(--sun-sheen,none), var(--sun); box-shadow:var(--sun-depth,none); font-size:.8rem; font-weight:600; }
.ddm-x .ddm-se-call svg { width:15px; height:15px; fill:var(--ink); }
.ddm-x .ddm-se-phone[data-beat="4"] .ddm-se-call { animation:ddm-se-press .5s var(--ease) .1s both; }
@keyframes ddm-se-press { 40% { scale:.94; } }
.ddm-x .ddm-se-ring { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:rgb(11 11 12/.86); color:#fff; opacity:0; visibility:hidden; transition:opacity .4s var(--ease) .45s, visibility 0s .85s; }
.ddm-x .ddm-se-phone[data-beat="4"] .ddm-se-ring { opacity:1; visibility:visible; transition:opacity .4s var(--ease) .45s; }
.ddm-x .ddm-se-ring i { position:relative; width:62px; height:62px; margin-bottom:12px; border-radius:50%; background:var(--sun); }
.ddm-x .ddm-se-ring i::before, .ddm-x .ddm-se-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-se-phone[data-beat="4"] .ddm-se-ring i::before { animation:ddm-se-wave 1.4s ease-out .8s 3 both; }
.ddm-x .ddm-se-phone[data-beat="4"] .ddm-se-ring i::after { animation:ddm-se-wave 1.4s ease-out 1.5s 3 both; }
@keyframes ddm-se-wave { 0% { opacity:1; scale:1; } 100% { opacity:0; scale:2.2; } }
.ddm-x .ddm-se-ring b { font-size:1rem; font-weight:600; }
.ddm-x .ddm-se-ring small { color:var(--on-dark-2); font-size:.72rem; }
/* The tap: a soft dot that lands where the visitor would tap in beats 1, 3 and 4 */
.ddm-x .ddm-se-tap { position:absolute; z-index:8; left:62%; top:56%; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; background:rgb(255 255 255/.55); box-shadow:0 0 0 1px rgb(17 17 17/.12), 0 6px 14px -6px rgb(0 0 0/.4); opacity:0; pointer-events:none; }
.ddm-x .ddm-se-phone[data-beat="1"] .ddm-se-tap { left:56%; top:34%; animation:ddm-se-tap 1s var(--ease) .9s both; }
.ddm-x .ddm-se-phone[data-beat="4"] .ddm-se-tap { left:50%; top:92%; animation:ddm-se-tap 1s var(--ease) .05s both; }
@keyframes ddm-se-tap { 0% { opacity:0; scale:1.6; } 35% { opacity:1; scale:1; } 55% { scale:.8; } 100% { opacity:0; scale:1; } }
.ddm-x .ddm-se-dots { display:flex; gap:8px; margin:0; padding:0; list-style:none; }
.ddm-x .ddm-se-dots li { width:7px; height:7px; border-radius:50%; background:rgb(17 17 17/.18); transition:background .3s, scale .3s; }
.ddm-x .ddm-se-dots li.is-on { background:var(--ink); scale:1.25; }

/* ---------- What you get ---------- */
.ddm-x .ddm-se-get { padding-top:clamp(40px,5vw,80px); }
.ddm-x .ddm-se-pack { margin-top:0; }
/* The Included box, rebalanced (Daniel, Oct 24; tried on Websites, then rolled out to every service page): copy runs across
   the top (title left, words right) and the checks fill an even grid under it, 3 columns from 9 items, otherwise 4. They
   still switch on one by one (sections.js). Undo: source/archive/pack-pre-2026-10-24/. */
.ddm-x .ddm-se-pack { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(24px,3vw,40px); }
.ddm-x .ddm-se-pack .ddm-pack-copy { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; gap:8px clamp(24px,5vw,80px); }
.ddm-x .ddm-se-pack .ddm-pack-copy .ddm-svc-no { grid-column:1 / -1; margin:0; }
.ddm-x .ddm-se-pack .ddm-pack-copy h3 { margin:0; }
.ddm-x .ddm-se-pack .ddm-pack-copy > p:not(.ddm-svc-no) { margin:0; max-width:52ch; }
.ddm-x .ddm-se-pack .ddm-checklist { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(20px,3vw,40px); border-top:1px solid var(--line); }
.ddm-x .ddm-se-pack .ddm-checklist:not(:has(li:nth-child(9))) { grid-template-columns:repeat(4,minmax(0,1fr)); }
.ddm-x .ddm-se-pack .ddm-checklist li { align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line); line-height:1.35; }
.ddm-x .ddm-se-pack .ddm-checklist li:last-child { border-bottom:1px solid var(--line); }
.ddm-x .ddm-se-pack .ddm-checklist li::before { margin-top:-1px; }
@media (max-width:960px) {
  .ddm-x .ddm-se-pack .ddm-pack-copy { grid-template-columns:minmax(0,1fr); }
  .ddm-x .ddm-se-pack .ddm-checklist, .ddm-x .ddm-se-pack .ddm-checklist:not(:has(li:nth-child(9))) { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .ddm-x .ddm-se-pack .ddm-checklist, .ddm-x .ddm-se-pack .ddm-checklist:not(:has(li:nth-child(9))) { grid-template-columns:minmax(0,1fr); }
  .ddm-x .ddm-se-pack .ddm-checklist li { padding:14px 0; }
}

/* ---------- How it works: three steps on one line of light ---------- */
.ddm-x .ddm-se-how { padding-top:clamp(40px,5vw,80px); }
.ddm-x .ddm-se-steps { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,48px); margin:0; padding:0; list-style:none; }
.ddm-x .ddm-se-line { position:absolute; left:28px; right:calc(33.333% - 28px); top:27px; height:2px; background:repeating-linear-gradient(90deg,rgb(17 17 17/.24) 0 2px,transparent 2px 9px); }
.ddm-x .ddm-se-line i { position:absolute; inset:-1px 0; border-radius:4px; background:var(--sun); box-shadow:0 0 10px rgb(255 199 0/.75); transform-origin:0 50%; transform:scaleX(var(--fill,1)); }
.ddm-x .ddm-se-step { position:relative; z-index:1; }
.ddm-x .ddm-se-dot { display:grid; place-items:center; width:56px; height:56px; margin-bottom:24px; border-radius:50%; background:#fff;
  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:box-shadow .4s var(--ease); }
.ddm-x .ddm-se-dot svg { width:24px; height:24px; fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ddm-x .ddm-se-dot svg.ddm-se-wa { fill:var(--ink); stroke:none; }
.ddm-x .ddm-se-step.is-lit .ddm-se-dot { 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-se-step h3 { margin-bottom:10px; }
.ddm-x .ddm-se-step p { color:var(--ink-2); max-width:32ch; margin:0; }

/* ---------- Proof: field gallery ---------- */
.ddm-x .ddm-se-proof { padding-top:clamp(40px,5vw,80px); }
.ddm-x .ddm-se-proof-top { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 40px; margin-bottom:clamp(28px,4vw,48px); }
.ddm-x .ddm-se-proof-top .ddm-head { margin-bottom:0; }
.ddm-x .ddm-se-filters { display:flex; flex-wrap:wrap; gap:6px; }
.ddm-x .ddm-se-filters button { min-height:40px; padding:0 16px; border:0; border-radius:999px; background:rgb(17 17 17/.06); color:var(--ink); font:500 .86rem/1 var(--sans); cursor:pointer; transition:background .3s var(--ease), color .3s; }
.ddm-x .ddm-se-filters button:hover { background:rgb(17 17 17/.1); }
.ddm-x .ddm-se-filters button[aria-pressed="true"] { background:var(--ink); color:#fff; }
.ddm-x .ddm-se-field { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.4vw,18px); margin:0; padding:0; list-style:none; }
.ddm-x .ddm-se-field li { transition:opacity .45s var(--ease), filter .45s var(--ease), transform .45s var(--ease); }
.ddm-x .ddm-se-field li.is-out { opacity:.18; filter:grayscale(1); transform:scale(.97); }
.ddm-x .ddm-se-job { display:block; position:relative; border-radius:18px; overflow:hidden; background:var(--paper); box-shadow:0 20px 40px -30px rgb(0 0 0/.45); }
.ddm-x .ddm-se-job img { width:100%; aspect-ratio:3 / 4; object-fit:cover; transition:transform .8s var(--ease); }
.ddm-x .ddm-se-job:hover img { transform:scale(1.04); }
.ddm-x .ddm-se-job > span { position:absolute; left:10px; right:10px; bottom:10px; display:grid; gap:1px; padding:9px 12px; border-radius:12px;
  background:rgb(255 255 255/.78); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 #fff; }
.ddm-x .ddm-se-job b { font-size:.86rem; font-weight:600; }
.ddm-x .ddm-se-job small { font-size:.74rem; color:var(--ink-3); }
.ddm-x .ddm-se-more { margin-top:clamp(24px,3vw,40px); }

/* ---------- Price, Care and FAQ (the obsidian chapter) ---------- */
.ddm-x .ddm-se-price .ddm-shell { position:relative; z-index:1; }
.ddm-x .ddm-se-tiers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,22px); align-items:start; margin:0; padding:0; list-style:none; }
.ddm-x .ddm-se-tier { display:flex; flex-direction:column; padding:clamp(22px,2.4vw,32px); border-radius:24px; background:rgb(255 255 255/.035);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.9), 0 0 18px -4px rgb(255 255 255/.25), 0 30px 60px -40px #000; transition:transform .6s var(--ease); }
.ddm-x .ddm-se-tier.is-lift { transform:translateY(-14px); background:rgb(255 255 255/.06); }
.ddm-x .ddm-se-tier-name { margin:0 0 18px; font:500 .74rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-2); }
.ddm-x .ddm-se-tier-price { display:flex; align-items:baseline; gap:10px; margin:0 0 12px; }
.ddm-x .ddm-se-tier-price b { font-size:clamp(2.6rem,4.4vw,3.8rem); font-weight:600; line-height:1; letter-spacing:-.05em; color:#fff; }
.ddm-x .ddm-se-tier.is-lift .ddm-se-tier-price b { color:var(--sun); }
.ddm-x .ddm-se-tier-price small { font-size:.85rem; color:var(--on-dark-2); }
.ddm-x .ddm-se-tier-fit { color:var(--on-dark); margin:0 0 20px; min-height:3.2em; }
.ddm-x .ddm-se-tier ul { flex:1; margin:0 0 26px; padding:0; list-style:none; }
.ddm-x .ddm-se-tier li { position:relative; padding:11px 0 11px 26px; border-top:1px solid var(--line-dark); color:var(--on-dark-2); font-size:.94rem; }
.ddm-x .ddm-se-tier li::before { content:""; position:absolute; left:2px; top:17px; width:12px; height:7px; border-left:2px solid #fff; border-bottom:2px solid #fff; rotate:-45deg; }
.ddm-x .ddm-se-tier li:first-child { color:#fff; font-weight:500; }
.ddm-x .ddm-se-tier .ddm-btn { align-self:stretch; }
.ddm-x .ddm-se-tier-note { margin:clamp(28px,3vw,40px) 0 0; text-align:center; color:var(--on-dark-2); }

.ddm-x .ddm-se-care { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(24px,4vw,64px); align-items:center; margin-top:clamp(56px,7vw,96px); padding:clamp(24px,3.2vw,44px); 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-se-care h3 { font-size:clamp(1.7rem,2.8vw,2.5rem); color:#fff; margin-bottom:14px; }
.ddm-x .ddm-se-care h3 span { color:var(--sun); }
.ddm-x .ddm-se-care-copy > p:not(.ddm-eyebrow) { color:var(--on-dark-2); max-width:52ch; }
.ddm-x .ddm-se-care-list { margin:20px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.ddm-x .ddm-se-care-list li { position:relative; padding-left:24px; color:var(--on-dark); }
.ddm-x .ddm-se-care-list li::before { content:""; position:absolute; left:2px; top:.5em; width:10px; height:6px; border-left:2px solid var(--sun); border-bottom:2px solid var(--sun); rotate:-45deg; }
/* The Care log checks itself off once, when it arrives */
.ddm-x .ddm-se-log { margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.ddm-x .ddm-se-log li { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px; background:rgb(255 255 255/.05); box-shadow:inset 0 0 0 1px var(--line-dark); color:var(--on-dark); font-size:.9rem; }
.ddm-x .ddm-se-log i { flex:none; width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgb(255 255 255/.3); transition:background .3s, box-shadow .3s; }
.ddm-x .ddm-se-log small { margin-left:auto; font:500 .64rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-2); }
.ddm-x .ddm-se-log li.is-done i { 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.5l4 4 8-9' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; box-shadow:0 0 12px rgb(255 199 0/.5); }
.ddm-x .ddm-se-small { margin:18px 0 0; font-size:13px; line-height:1.5; color:var(--on-dark-2); }

.ddm-x .ddm-se-faq { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(24px,5vw,80px); margin-top:clamp(72px,9vw,128px); }
.ddm-x .ddm-se-faq-title { font-size:clamp(2.2rem,4.4vw,3.8rem); }
.ddm-x .ddm-se-qa details { border-top:1px solid var(--line-dark); }
.ddm-x .ddm-se-qa details:last-child { border-bottom:1px solid var(--line-dark); }
.ddm-x .ddm-se-qa summary { position:relative; display:block; padding:20px 44px 20px 0; cursor:pointer; list-style:none; color:#fff; font-size:1.1rem; font-weight:500; letter-spacing:-.01em; border-radius:6px; }
.ddm-x .ddm-se-qa summary::-webkit-details-marker { display:none; }
.ddm-x .ddm-se-qa summary::after { content:""; position:absolute; right:8px; top:50%; width:12px; height:12px; margin-top:-8px; border-right:2px solid var(--on-dark-2); border-bottom:2px solid var(--on-dark-2); rotate:45deg; transition:rotate .35s var(--ease), margin .35s var(--ease); }
.ddm-x .ddm-se-qa details[open] summary::after { rotate:225deg; margin-top:-2px; border-color:var(--sun); }
.ddm-x .ddm-se-qa details p { margin:0; padding:0 44px 22px 0; color:var(--on-dark-2); max-width:62ch; }

/* ---------- Next on the path ---------- */
.ddm-x .ddm-se-next { padding-block:clamp(64px,8vw,120px) clamp(24px,3vw,48px); }
.ddm-x .ddm-se-next-card { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(20px,4vw,56px); align-items:center; padding:clamp(16px,1.8vw,24px); border-radius:28px; background:var(--paper);
  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); }
.ddm-x .ddm-se-next-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-se-next-vis { display:block; border-radius:20px; overflow:hidden; }
.ddm-x .ddm-se-mini-map { position:relative; display:block; aspect-ratio:16 / 10; background:#E3E6E1; }
.ddm-x .ddm-se-mini-map .ddm-se-pin.is-you { box-shadow:0 0 0 3px var(--sun), 0 0 16px 3px rgb(255 199 0/.6); scale:1.3; }
.ddm-x .ddm-se-next-card:hover .ddm-se-mini-map .ddm-se-pin.is-you { scale:1.5; }
.ddm-x .ddm-se-next-copy { display:grid; justify-items:start; padding:8px 12px 8px 0; }
.ddm-x .ddm-se-next-copy .ddm-eyebrow { margin-bottom:14px; }
.ddm-x .ddm-se-next-h { font-size:clamp(1.7rem,3vw,2.6rem); font-weight:600; line-height:1; letter-spacing:-.045em; margin-bottom:14px; }
.ddm-x .ddm-se-next-p { color:var(--ink-2); max-width:44ch; margin-bottom:22px; }
.ddm-x .ddm-se-next-card:hover .ddm-link .ddm-arrow { transform:translateX(4px); }
.ddm-x .ddm-se-next-card .ddm-arrow { transition:transform .4s var(--ease); }

/* ---------- Portal small print ---------- */
.ddm-x .ddm-se-portal-fine { margin:18px 0 0; font-size:13px; color:var(--on-dark-2); }
.ddm-x .ddm-se-portal-fine a { color:#fff; text-decoration:underline; text-decoration-color:rgb(255 255 255/.4); text-underline-offset:3px; }

/* ---------- Phones and tablets ---------- */
@media (max-width:960px) {
  .ddm-x .ddm-se-hero-grid { grid-template-columns:1fr; }
  .ddm-x .ddm-se-hero-vis { max-width:640px; }
  .ddm-x .ddm-se-why-grid { grid-template-columns:minmax(0,1fr) auto; gap:20px; }
  .ddm-x .ddm-se-phone { --w:min(220px,38vw); }
  .ddm-x .ddm-se-beat { min-height:56vh; }
  .ddm-x .ddm-se-tiers { grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
  .ddm-x .ddm-se-tier.is-lift { transform:none; }
  .ddm-x .ddm-se-tier-fit { min-height:0; }
  .ddm-x .ddm-se-care, .ddm-x .ddm-se-faq { grid-template-columns:1fr; }
  .ddm-x .ddm-se-field { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  /* The phone rides beside the beats, small, on the right */
  .ddm-x .ddm-se-why-grid { grid-template-columns:minmax(0,1fr) auto; column-gap:14px; }
  .ddm-x .ddm-se-why-text { display:contents; }
  .ddm-x .ddm-se-why-head { grid-column:1 / -1; }
  .ddm-x .ddm-se-beats { grid-column:1; grid-row:2; }
  .ddm-x .ddm-se-phone-col { grid-column:2; grid-row:2; align-self:start; top:calc(var(--nav-h) + 18vh); height:auto; gap:12px; }
  .ddm-x .ddm-se-phone { --w:290px; zoom:.44; } /* the desktop phone, scaled whole so its screens keep their layout */
  .ddm-x .ddm-se-beat { min-height:52vh; padding-left:16px; }
  .ddm-x .ddm-se-beat h3 { font-size:1.45rem; }
  .ddm-x .ddm-se-beat p { font-size:1rem; }
  .ddm-x .ddm-se-steps { grid-template-columns:1fr; gap:28px; }
  .ddm-x .ddm-se-line { left:27px; right:auto; top:28px; bottom:28px; width:2px; height:auto; background:repeating-linear-gradient(180deg,rgb(17 17 17/.24) 0 2px,transparent 2px 9px); }
  .ddm-x .ddm-se-line i { inset:0 -1px; transform-origin:50% 0; transform:scaleY(var(--fill,1)); }
  .ddm-x .ddm-se-step { display:grid; grid-template-columns:56px 1fr; column-gap:18px; }
  .ddm-x .ddm-se-dot { grid-row:span 2; margin:0; }
  .ddm-x .ddm-se-next-card { grid-template-columns:1fr; }
  .ddm-x .ddm-se-hero-cap { text-align:left; }
}

/* ---------- Reduced motion, reduced transparency, forced colors ---------- */
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-se-page *, .ddm-x.ddm-se-page * { animation:none !important; transition:none !important; }
  .ddm-x .ddm-se-site { clip-path:none; }
}
@media (prefers-reduced-transparency:reduce) {
  .ddm-x .ddm-se-job > span { -webkit-backdrop-filter:none; backdrop-filter:none; background:#fff; }
}
@media (forced-colors:active) {
  .ddm-x :is(.ddm-se-tier,.ddm-se-care,.ddm-se-next-card,.ddm-se-path ol) { border:1px solid CanvasText; }
  .ddm-x .ddm-se-path .is-here a { outline:2px solid Highlight; }
}