/* Deft Digital Media — Branding & premium print page (Daniel, October 24, 2026). The page sits on the service template
   (styles/service.css); these are its own pieces, prefix ddm-br-. The black card with a foil mark and a painted Sunflower
   edge comes from the Services hub's print card (styles/services.css), drawn bigger here. Motion: scripts/branding.js.
   Sample brand "Your Business" is a demo, never a client. Foil is drawn neutral (silver), so Sunflower stays the only
   brand color: it shows up as the painted card edge and a swatch. Nothing loops. */

@property --fx { syntax:'<percentage>'; inherits:true; initial-value:30%; }

/* ---------- The sample mark (strokes, so it can draw in) ---------- */
.ddm-x.ddm-br-page svg:has(use[href="#ddm-br-mark"]) { fill:none; stroke:currentColor; stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }

/* ---------- Hero: three real foil cards (Oct 24). The stack leans toward a fine pointer (--rx/--ry from branding.js), one
   sweep crosses the foils on load in turn (--d), and a hovered card slides out from under the others, rises and slides back
   in on top (branding.js plays --out then --z, and reverses it on leave, so it never passes through another card). Only the foil catches the light:
   each card's sweep and glint are masked by its foil plate (https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/print/foil-*-mask.png). ---------- */
@property --sw { syntax:'<percentage>'; inherits:false; initial-value:-40%; }
@property --z { syntax:'<length>'; inherits:false; initial-value:0px; }
.ddm-x .ddm-br-hero-vis { display:grid; place-items:center; min-height:clamp(300px,36vw,520px); perspective:1200px; }
.ddm-x .ddm-br-deck { --rx:4deg; --ry:-10deg; --fx:30%; position:relative; width:min(100%,560px); aspect-ratio:1.1; transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .7s var(--ease), --fx .7s var(--ease); }
.ddm-x .ddm-br-deck.is-tracking { transition:transform .14s linear, --fx .14s linear; }
.ddm-x .ddm-br-fc { --r:0deg; --z:0px; position:absolute; display:block; border-radius:clamp(5px,.6vw,9px); overflow:hidden; background:#0b0b0c;
  transform:translateZ(var(--z)); rotate:var(--r); transition:rotate .5s var(--ease), scale .5s var(--ease), box-shadow .5s var(--ease);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.08), 0 1px 0 #26262a, 0 2px 0 #18181b, 0 34px 50px -26px rgb(0 0 0/.6), 0 10px 18px -12px rgb(0 0 0/.35); }
.ddm-x .ddm-br-fc img { display:block; width:100%; height:auto; }
.ddm-x .ddm-br-fc.is-glass { left:0; top:17%; width:36%; --r:-7deg; --z:0px; --out:-30% 4%; --d:.9s; --tint:255 236 180; --m:url("https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/print/foil-glass-mask.png"); }
.ddm-x .ddm-br-fc.is-scaffold { left:31%; top:1%; width:68%; --r:5deg; --z:24px; --out:10% -30%; --d:1.25s; --tint:255 255 255; --m:url("https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/print/foil-scaffold-mask.png"); }
.ddm-x .ddm-br-fc.is-interiors { left:30%; top:52%; width:64%; --r:-3deg; --z:48px; --out:8% 30%; --d:1.05s; --tint:255 236 180; --m:url("https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/print/foil-interiors-mask.png"); }
/* The card on top squares up a little */
.ddm-x .ddm-br-fc.is-up { rotate:calc(var(--r) * .4); scale:1.03;
    box-shadow:inset 0 0 0 1px rgb(255 255 255/.1), 0 1px 0 #26262a, 0 2px 0 #18181b, 0 46px 60px -28px rgb(0 0 0/.65), 0 14px 22px -14px rgb(0 0 0/.4); }
.ddm-x .ddm-br-fc :is(.ddm-br-fc-sweep,.ddm-br-fc-glint) { position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  -webkit-mask:var(--m) center / 100% 100% no-repeat; mask:var(--m) center / 100% 100% no-repeat; }
/* The one sweep on load: bright on the foil, a faint sheen on the paper */
.ddm-x .ddm-br-fc-sweep { background:linear-gradient(112deg,transparent calc(var(--sw) - 22%),rgb(var(--tint)/.6) calc(var(--sw) - 6%),rgb(255 255 255/.98) var(--sw),rgb(var(--tint)/.6) calc(var(--sw) + 6%),transparent calc(var(--sw) + 22%));
  animation:ddm-br-sweep 1.9s cubic-bezier(.4,.1,.35,1) var(--d) both; }
.ddm-x .ddm-br-fc::after { content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(112deg,transparent calc(var(--sw) - 14%),rgb(255 255 255/.09) var(--sw),transparent calc(var(--sw) + 14%));
  animation:ddm-br-sweep 1.9s cubic-bezier(.4,.1,.35,1) var(--d) both; }
@keyframes ddm-br-sweep { from { --sw:-40%; } to { --sw:140%; } }
/* The glint that follows a fine pointer once the stack is tracking */
.ddm-x .ddm-br-fc-glint { opacity:0; transition:opacity .4s var(--ease);
  background:linear-gradient(112deg,transparent calc(var(--fx) - 20%),rgb(var(--tint)/.75) var(--fx),transparent calc(var(--fx) + 20%)); }
.ddm-x .ddm-br-deck.is-tracking .ddm-br-fc-glint { opacity:1; }

/* ---------- Why it matters: "From mark to card" ---------- */
.ddm-x .ddm-br-stage { --w:min(440px,36vw); position:relative; z-index:1; width:var(--w); aspect-ratio:4 / 4.6; perspective:1100px; }
.ddm-x .ddm-br-sheet { position:absolute; inset:0; display:grid; grid-template-rows:auto 1fr auto auto; gap:6%; padding:9% 9% 8%; border-radius:22px; background:#FBFBF8;
  box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgb(17 17 17/.07), 0 40px 70px -40px rgb(0 0 0/.45); transition:opacity .6s var(--ease), transform .8s var(--ease), filter .6s var(--ease); }
.ddm-x .ddm-br-sheet-label { font:500 .66rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-br-sheet-mark { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.ddm-x .ddm-br-sheet-mark svg { width:30%; aspect-ratio:1; color:var(--ink); stroke-dasharray:1; stroke-dashoffset:0; }
.ddm-x .ddm-br-sheet-mark b { font-size:clamp(.8rem,1.4vw,1.15rem); font-weight:600; letter-spacing:.24em; text-transform:uppercase; transition:opacity .5s var(--ease) .9s, letter-spacing .9s var(--ease) .9s; }
.ddm-x .ddm-br-sheet-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.ddm-x .ddm-br-sw { display:grid; gap:6px; transition:opacity .45s var(--ease), translate .6s cubic-bezier(.3,1.4,.5,1); transition-delay:calc(var(--k,0) * 90ms); }
.ddm-x .ddm-br-sw i { aspect-ratio:1.3; border-radius:10px; box-shadow:inset 0 0 0 1px rgb(17 17 17/.08); }
.ddm-x .ddm-br-sw small { font:500 .58rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-br-sw.sw1 i { background:#1B2340; } .ddm-x .ddm-br-sw.sw2 { --k:1; } .ddm-x .ddm-br-sw.sw2 i { background-color:#C9A55A; background-image:linear-gradient(135deg,#8d6a2b,#e7c77f 30%,#fbeab2 48%,#b48a3c 72%,#e2c27a); }
.ddm-x .ddm-br-sw.sw3 { --k:2; } .ddm-x .ddm-br-sw.sw3 i { background:#F3EEE4; } .ddm-x .ddm-br-sw.sw4 { --k:3; } .ddm-x .ddm-br-sw.sw4 i { background:#A9A59A; }
.ddm-x .ddm-br-sheet-type { display:flex; align-items:center; gap:14px; padding-top:6%; border-top:1px solid var(--line); transition:opacity .45s var(--ease) .35s, translate .6s var(--ease) .35s; }
.ddm-x .ddm-br-sheet-type b { font-size:clamp(1.6rem,3vw,2.6rem); font-weight:600; letter-spacing:-.04em; line-height:1; }
.ddm-x .ddm-br-sheet-type > span { font:500 .62rem/1.5 var(--mono); color:var(--ink-3); letter-spacing:.06em; }
.ddm-x .ddm-br-sheet-alt { position:absolute; right:9%; bottom:8%; display:flex; gap:6px; transition:opacity .45s var(--ease) .5s, translate .6s var(--ease) .5s; }
.ddm-x .ddm-br-sheet-alt > span { display:grid; place-items:center; width:clamp(28px,3vw,40px); aspect-ratio:1; border-radius:9px; background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px rgb(17 17 17/.08); }
.ddm-x .ddm-br-sheet-alt > span.is-dark { background:#1B2340; color:#E2C27A; }
.ddm-x .ddm-br-sheet-alt > span.is-sun { background:linear-gradient(135deg,#b48a3c,#f3dc9c 45%,#c9a55a); color:#1B2340; }
.ddm-x .ddm-br-sheet-alt svg { width:58%; stroke-width:6; }

.ddm-x .ddm-br-stage-cards { --rx:0deg; --ry:0deg; --px:0deg; --py:0deg; --fx:-30%; position:absolute; left:4%; right:4%; top:50%; aspect-ratio:1.75; translate:0 -50%; transform-style:preserve-3d;
  transform:rotateX(calc(var(--rx) + var(--py))) rotateY(calc(var(--ry) + var(--px))); transition:transform 1s var(--ease), --fx 1.6s cubic-bezier(.45,0,.2,1) 1s; }
/* Last beat: both sides lean toward a fine pointer and the foil glint follows it (--px/--py/--fx from branding.js, subtler than the hero) */
.ddm-x .ddm-br-stage-cards.is-tracking { transition:transform .18s linear, --fx .18s linear; }
/* Beat states (no script: rests on 3, the finished card) */
.ddm-x .ddm-br-why.is-live .ddm-br-stage[data-beat="0"] .ddm-br-sheet-mark svg:not(.ddm-br-guides) { animation:ddm-br-draw 1.3s cubic-bezier(.65,0,.35,1) .15s both; }
@keyframes ddm-br-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
.ddm-x .ddm-br-stage[data-beat="0"] .ddm-br-sheet-mark b { letter-spacing:.5em; }
.ddm-x .ddm-br-stage[data-beat="0"] :is(.ddm-br-sw,.ddm-br-sheet-type,.ddm-br-sheet-alt) { opacity:0; translate:0 14px; transition-delay:0s; }
.ddm-x .ddm-br-stage:is([data-beat="2"],[data-beat="3"]) .ddm-br-sheet { opacity:0; transform:scale(.86); filter:blur(6px); pointer-events:none; }
.ddm-x .ddm-br-stage[data-beat="3"] .ddm-br-stage-cards { --rx:12deg; --ry:-18deg; --fx:120%; }

/* Beat 0 fills the whole sheet: construction guides around the mark, and dashed slots where the colors, type and
   alternates will land on beat 1 (Daniel, Oct 24: keep the sample, fill the sheet) */
.ddm-x .ddm-br-sheet-mark { position:relative; }
.ddm-x .ddm-br-sheet-mark .ddm-br-guides { position:absolute; left:50%; top:-6%; width:56%; translate:-50% 0; aspect-ratio:1; fill:none; stroke:var(--blue); stroke-width:.35; opacity:0;
  stroke-dasharray:1.4 1.2; pointer-events:none; transition:opacity .6s var(--ease); }
.ddm-x .ddm-br-guides .is-x { stroke-dasharray:none; stroke-width:.5; }
.ddm-x .ddm-br-stage[data-beat="0"] .ddm-br-sheet-mark .ddm-br-guides { opacity:.55; transition-delay:.3s; }
.ddm-x .ddm-br-stage[data-beat="1"] .ddm-br-sheet-mark .ddm-br-guides { opacity:.16; }
.ddm-x .ddm-br-sw i { transition:background-color .5s var(--ease), box-shadow .5s var(--ease); transition-delay:inherit; }
.ddm-x .ddm-br-stage[data-beat="0"] .ddm-br-sw { opacity:1; translate:0 0; }
.ddm-x .ddm-br-stage[data-beat="0"] .ddm-br-sw i { background-color:transparent; background-image:none; box-shadow:inset 0 0 0 1.5px rgb(17 17 17/.13); outline:1.5px dashed rgb(17 17 17/.16); outline-offset:-1.5px; }
.ddm-x .ddm-br-stage[data-beat="0"] .ddm-br-sw small { opacity:.45; }
.ddm-x .ddm-br-stage[data-beat="0"] :is(.ddm-br-sheet-type,.ddm-br-sheet-alt) { opacity:.16; translate:0 8px; }

/* The sample cards (Daniel, Oct 24: nicer sample, gold foil only, a real QR on the back, no clipping). Real images, so
   the foil sweep is masked to the foil like the hero. The front is four plates in one 3D group; nothing in that group
   ever gets opacity (it would flatten the 3D), each plate fades on its own. The back only shows once the front lies flat
   above it, so the two never cut through each other. */
.ddm-x .ddm-br-sback, .ddm-x .ddm-br-plates, .ddm-x .ddm-br-plate { position:absolute; inset:0; display:block; }
.ddm-x :is(.ddm-br-sback,.ddm-br-plate) img { display:block; width:100%; height:100%; border-radius:clamp(5px,.6vw,9px); }
/* The back waits tucked under the front and slides out from behind it once the front lies flat */
.ddm-x .ddm-br-sback { transform:translate(3%,10%) rotate(2deg) translateZ(-40px) scale(.96); opacity:0; transition:opacity .2s var(--ease), transform .5s var(--ease); }
.ddm-x .ddm-br-sback img { box-shadow:0 1px 0 #e5dfd3, 0 2px 0 #d8d1c3, 0 24px 36px -22px rgb(0 0 0/.45); }
.ddm-x .ddm-br-plates { transform-style:preserve-3d; transform:translate(4%,14%) rotate(3deg) translateZ(30px); transition:transform 1s var(--ease); }
.ddm-x .ddm-br-plate { transform:translateZ(calc(var(--i) * .5px)); opacity:1; transition:transform .9s var(--ease), opacity .4s var(--ease); }
.ddm-x .ddm-br-plate.is-stock img { box-shadow:0 1px 0 #2a3150, 0 2px 0 #141a33, 0 30px 44px -24px rgb(0 0 0/.6); }
.ddm-x .ddm-br-plate:not(.is-stock)::before { content:""; position:absolute; inset:0; border-radius:clamp(5px,.6vw,9px); opacity:0; transition:opacity .4s var(--ease);
  background:rgb(255 255 255/.16); box-shadow:inset 0 0 0 1px rgb(255 255 255/.55), 0 0 0 1px rgb(17 17 17/.12); }
.ddm-x .ddm-br-plate:not(.is-stock) img { position:relative; }
.ddm-x .ddm-br-plate small { position:absolute; left:calc(100% + 20px); top:80%; translate:0 -50%; white-space:nowrap; font:600 .74rem/1 var(--mono); opacity:0;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); padding:5px 8px; border-radius:999px; background:rgb(255 255 255/.9); box-shadow:0 0 0 1px rgb(17 17 17/.08); transition:opacity .3s var(--ease); }
.ddm-x .ddm-br-sweep { position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(112deg,transparent calc(var(--fx) - 22%),rgb(255 236 180/.55) calc(var(--fx) - 6%),rgb(255 255 255/.95) var(--fx),rgb(255 236 180/.55) calc(var(--fx) + 6%),transparent calc(var(--fx) + 22%)); }
.ddm-x .ddm-br-plate.is-foil .ddm-br-sweep { -webkit-mask:url("https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/print/sample-front-foil.webp") center / 100% 100% no-repeat; mask:url("https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/print/sample-front-foil.webp") center / 100% 100% no-repeat; }
.ddm-x .ddm-br-sback .ddm-br-sweep { -webkit-mask:url("https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/print/sample-back-foil-mask.png") center / 100% 100% no-repeat; mask:url("https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/print/sample-back-foil-mask.png") center / 100% 100% no-repeat; }

/* Thickness (Daniel, Oct 24: rims to give the illusion of thickness): six thin layers under each card, about 4px of
   gold-painted edge, so the card shows a real edge whenever it tilts */
.ddm-x .ddm-br-sback { transform-style:preserve-3d; }
.ddm-x .ddm-br-sback img { position:relative; }
.ddm-x .ddm-br-edge { position:absolute; inset:0; border-radius:clamp(5px,.6vw,9px); transform:translateZ(calc(var(--e) * -.7px));
  background:linear-gradient(115deg,#8d6a2b,#e2c27a 35%,#f6e3a6 50%,#b48a3c 70%,#d6b468); transition:opacity .4s var(--ease); }
.ddm-x .ddm-br-edge[style*="--e:6"] { box-shadow:0 30px 44px -24px rgb(0 0 0/.55); }
.ddm-x .ddm-br-stage:is([data-beat="0"],[data-beat="1"]) .ddm-br-plates .ddm-br-edge { opacity:0; }
/* Beats 0-1: no card yet */
.ddm-x .ddm-br-stage:is([data-beat="0"],[data-beat="1"]) .ddm-br-plates { transform:translate(0,4%) scale(.7); }
.ddm-x .ddm-br-stage:is([data-beat="0"],[data-beat="1"]) .ddm-br-plate { opacity:0; transform:none; transition-delay:0s; }
/* Beat 2: the card tips back and its plates float apart */
.ddm-x .ddm-br-stage[data-beat="2"] .ddm-br-plates { transform:translateY(12%) rotateX(54deg) rotateZ(-30deg) scale(.8); transition-delay:.15s; }
.ddm-x .ddm-br-stage[data-beat="2"] .ddm-br-plate { transform:translateZ(calc(var(--i) * clamp(34px,4.4vw,62px))); transition-delay:calc(.25s + var(--i) * 80ms); }
.ddm-x .ddm-br-stage[data-beat="2"] .ddm-br-plate:not(.is-stock)::before,
.ddm-x .ddm-br-stage[data-beat="2"] .ddm-br-plate small { opacity:1; transition-delay:.45s; }
/* Beat 3: the plates press together, then the back slides in behind and the foil catches the light once */
.ddm-x .ddm-br-stage[data-beat="3"] .ddm-br-sback { opacity:1; transform:translate(-9%,-30%) rotate(-6deg) translateZ(-40px);
  transition:opacity .45s var(--ease) .75s, transform 1.1s cubic-bezier(.22,1,.36,1) .75s; }
/* ---------- Proof: the finishes ---------- */
.ddm-x .ddm-br-fin { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,22px); margin:0; padding:0; list-style:none; }
.ddm-x .ddm-br-fin-item h3 { font-size:1.35rem; margin:20px 0 6px; }
.ddm-x .ddm-br-fin-item p { margin:0; color:var(--ink-2); max-width:34ch; }
.ddm-x .ddm-br-fin-vis { --rx:0deg; --ry:0deg; --fx:30%; position:relative; display:grid; place-items:center; aspect-ratio:4 / 3; border-radius:22px; perspective:900px;
  background:radial-gradient(120% 90% at 30% 10%,#F4F4F1,#DCDCD8); box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgb(17 17 17/.06); }
.ddm-x .ddm-br-fin-vis > span { position:relative; width:64%; aspect-ratio:1.75; transform:rotateX(var(--rx)) rotateY(var(--ry)); transform-style:preserve-3d; transition:transform .6s var(--ease), --fx 1.4s cubic-bezier(.45,0,.2,1); }
.ddm-x .ddm-br-fin-vis.is-tracking > span { transition:transform .12s linear, --fx .12s linear; }
/* Finish cards: the gold-foil sample (Daniel, Oct 24: make the finishes match the cards above). Same thickness layers and
   masked light as the stage; the light follows the pointer (--fx from tilt()) and only lands on the finish being shown. */
.ddm-x .ddm-br-fcard { position:absolute; inset:0; display:block; transform-style:preserve-3d; }
.ddm-x .ddm-br-fin-vis > .ddm-br-fcard { position:relative; inset:auto; }
.ddm-x .ddm-br-fcard img { position:absolute; inset:0; width:100%; height:100%; border-radius:clamp(5px,.6vw,9px); box-shadow:0 26px 40px -22px rgb(0 0 0/.55); }
.ddm-x .ddm-br-fcard .ddm-br-sweep { border-radius:clamp(5px,.6vw,9px); }
.ddm-x .ddm-br-fcard.is-foil .ddm-br-sweep { -webkit-mask:url("https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/print/sample-front-foil.webp") center / 100% 100% no-repeat; mask:url("https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/print/sample-front-foil.webp") center / 100% 100% no-repeat; }
/* Spot gloss: the diamonds are clear varnish, invisible until the light crosses them */
.ddm-x .ddm-br-fcard.is-gloss .ddm-br-sweep { mix-blend-mode:screen; opacity:1; background:linear-gradient(112deg,transparent calc(var(--fx) - 18%),rgb(255 255 255/.12) calc(var(--fx) - 6%),rgb(255 255 255/.7) calc(var(--fx) - 1%),rgb(255 255 255/.7) calc(var(--fx) + 1%),rgb(255 255 255/.12) calc(var(--fx) + 6%),transparent calc(var(--fx) + 18%));
  -webkit-mask:url("https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/print/sample-front-gloss-mask.png") center / 100% 100% no-repeat; mask:url("https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/print/sample-front-gloss-mask.png") center / 100% 100% no-repeat; }
.ddm-x .ddm-br-fcard.is-stock .ddm-br-sweep { -webkit-mask:url("https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/print/sample-back-foil-mask.png") center / 100% 100% no-repeat; mask:url("https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/print/sample-back-foil-mask.png") center / 100% 100% no-repeat; }
.ddm-x .ddm-br-fcard.is-stock img { box-shadow:0 26px 40px -20px rgb(0 0 0/.42); }
.ddm-x .ddm-br-stack > i { position:absolute; inset:0; border-radius:clamp(5px,.6vw,9px); background:#F3EEE4; box-shadow:0 1px 0 #ddd5c4, 0 2px 0 #cfc6b3; }
.ddm-x .ddm-br-stack > i:nth-child(1) { transform:translate(-6%,10%) rotate(-8deg); }
.ddm-x .ddm-br-stack > i:nth-child(2) { transform:translate(4%,6%) rotate(5deg); }
.ddm-x .ddm-br-stack > i:nth-child(3) { transform:translate(-2%,3%) rotate(-3deg); }
/* Paper grain on the specialty stock (Daniel, Oct 24: "give the white card some film grain") */
.ddm-x .ddm-br-stack .ddm-br-fcard::after, .ddm-x .ddm-br-stack > i::after { content:""; position:absolute; inset:0; border-radius:clamp(5px,.6vw,9px); transform:translateZ(.2px); pointer-events:none; mix-blend-mode:multiply; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:140px; }

/* ---------- Proof: real print work (shared field gallery, landscape tiles, captions under glass) ---------- */
.ddm-x .ddm-br-job { margin:0; }
.ddm-x .ddm-br-job img { aspect-ratio:4 / 3; }
.ddm-x .ddm-br-job figcaption { position:absolute; left:10px; right:10px; bottom:10px; display:grid; gap:1px; padding:9px 12px; border-radius:12px;
  background:rgb(255 255 255/.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 #fff, 0 10px 20px -14px rgb(0 0 0/.4); }
.ddm-x .ddm-br-work { padding-top:clamp(40px,5vw,80px); }

/* ---------- One dark run: the portal flows straight into Price and FAQ (Daniel, Oct 24; qa/portal-into-dark-howto.md) ----------
   The dark chapter wears the portal's background: the same full number field and soft grain, no fade at the seam. */
.ddm-x.ddm-br-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-br-price { margin-top:-1px; padding-top:clamp(0px,2.4vw,36px); }
.ddm-x .ddm-br-price > .ddm-digits { opacity:1; -webkit-mask:linear-gradient(180deg,#000 88%,transparent); mask:linear-gradient(180deg,#000 88%,transparent); }
.ddm-x .ddm-br-price > .ddm-grain { mix-blend-mode:normal; opacity:.14; }
/* Quiet the number field where people read: grey veil on the cards, a soft halo behind the lede and the questions */
.ddm-x .ddm-br-price .ddm-se-tier { background:rgb(34 34 37/.66); }
.ddm-x .ddm-br-price .ddm-se-tier.is-lift { background:rgb(40 40 43/.7); }
.ddm-x .ddm-br-price .ddm-head > p:not(.ddm-eyebrow) { position:relative; }
.ddm-x .ddm-br-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)); }
.ddm-x .ddm-br-price .ddm-se-qa { position:relative; }
.ddm-x .ddm-br-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)); }
.ddm-x .ddm-br-price .ddm-se-faq { margin-top:clamp(120px,16vw,230px); }
.ddm-x.ddm-br-page .ddm-se-next { padding-top:clamp(96px,11vw,160px); padding-bottom:clamp(8px,1.5vw,24px); }

/* ---------- Next: a site in the brand, with its card ---------- */
.ddm-x .ddm-br-next-vis { position:relative; display:block; aspect-ratio:16 / 10; background:radial-gradient(120% 90% at 30% 10%,#F2F2EF,#DCDCD8); }
.ddm-x .ddm-br-mini-site { position:absolute; left:8%; right:22%; top:12%; bottom:12%; display:flex; flex-direction:column; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 24px 40px -24px rgb(0 0 0/.5), 0 0 0 1px rgb(17 17 17/.06); }
.ddm-x .ddm-br-mini-bar { display:flex; gap:4px; padding:7px 9px; background:#EFEFEC; }
.ddm-x .ddm-br-mini-bar i { width:6px; height:6px; border-radius:50%; background:rgb(17 17 17/.18); }
.ddm-x .ddm-br-mini-hero { flex:1; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 9%; background:linear-gradient(160deg,#1c1c1d,#070708); color:#fff; }
.ddm-x .ddm-br-mini-hero svg { width:24px; aspect-ratio:1; stroke-width:5.5; }
.ddm-x .ddm-br-mini-hero b { font-size:.62rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; }
.ddm-x .ddm-br-mini-hero em { display:block; width:62%; height:5px; border-radius:3px; background:rgb(255 255 255/.25); }
.ddm-x .ddm-br-mini-hero em + em { width:44%; }
.ddm-x .ddm-br-mini-hero > span { width:30%; height:12px; margin-top:4px; border-radius:999px; background:var(--sun); }
.ddm-x .ddm-br-mini-card { position:absolute; right:8%; bottom:12%; display:grid; place-items:center; width:30%; aspect-ratio:1.75; border-radius:6px; background:linear-gradient(160deg,#1c1c1d,#070708); color:#D9D6CC;
  box-shadow:2px 2px 0 -1px var(--sun), 0 18px 30px -14px rgb(0 0 0/.6); rotate:6deg; transition:rotate .6s var(--ease), translate .6s var(--ease); }
.ddm-x .ddm-br-mini-card svg { width:28%; aspect-ratio:1; stroke-width:5; }
.ddm-x .ddm-se-next-card:hover .ddm-br-mini-card { rotate:-2deg; translate:-6px -6px; }

/* ---------- Our sites reel (Daniel, Oct 24): real client sites drift past at the bottom of the page.
   Copied from the Social page (Get Found, Websites) with this page's prefix; it closes the page, after the Next card, with room to breathe. ---------- */
.ddm-x .ddm-br-sites { 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-br-page .ddm-footer { border-top:0; }
.ddm-x.ddm-br-page .ddm-footer::before { display:none; }
.ddm-x .ddm-br-sites-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-br-sites-head .ddm-head { margin:0; }
.ddm-x .ddm-br-sites-head h2 { margin:0; }
.ddm-x .ddm-br-sites-head > .ddm-link { margin-bottom:10px; }
.ddm-x .ddm-br-sites-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-br-sites-track { display:flex; gap:var(--gap); flex:none; margin:0; padding:0; list-style:none; animation:ddm-br-sites 60s linear infinite; }
.ddm-x .ddm-br-sites:not(.is-on) .ddm-br-sites-track { animation-play-state:paused; } /* only runs while on screen */
@keyframes ddm-br-sites { to { translate:calc(-100% - var(--gap)) 0; } }
.ddm-x .ddm-br-sites-item { position:relative; flex:none; width:clamp(260px,30vw,460px); }
.ddm-x .ddm-br-sites-card { position:absolute; inset:0; z-index:8; border-radius:14px; }
.ddm-x .ddm-br-sites-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-br-sites-bar { display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-bottom:1px solid var(--line); background:#f6f5f2; }
.ddm-x .ddm-br-sites-bar i { width:8px; height:8px; border-radius:50%; background:rgb(0 0 0/.14); }
.ddm-x .ddm-br-sites-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-br-sites-win img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.ddm-x .ddm-br-sites-cap { display:flex; flex-direction:column; gap:2px; padding:14px 4px 0; }
.ddm-x .ddm-br-sites-cap b { font-weight:600; letter-spacing:-.01em; }
.ddm-x .ddm-br-sites-cap small { font:500 .7rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-br-sites-item:is(:hover,:focus-within) .ddm-br-sites-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-br-sites-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-br-sites-win.ddm-light-double::after { opacity:0; transition:opacity .45s var(--ease); }
.ddm-x .ddm-br-sites-item:is(:hover,:focus-within) .ddm-br-sites-win.ddm-light-double::after { opacity:1; }
.ddm-x .ddm-br-sites-item:has(.ddm-br-sites-card:focus-visible) .ddm-br-sites-win { outline:2px solid var(--blue-ink); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-br-sites-track { animation:none; }
  .ddm-x .ddm-br-sites-track[aria-hidden] { display:none; }
  .ddm-x .ddm-br-sites-view { overflow-x:auto; -webkit-mask:none; mask:none; padding-inline:var(--gutter,20px); }
}
/* ---------- Phones and tablets ---------- */
@media (max-width:960px) {
  .ddm-x .ddm-br-stage { --w:min(300px,38vw); }
  .ddm-x .ddm-br-fin { grid-template-columns:1fr; max-width:520px; }
  .ddm-x .ddm-br-hero-vis { min-height:0; }
  .ddm-x .ddm-br-deck { width:min(100%,480px); }
}
@media (max-width:640px) {
  .ddm-x .ddm-br-stage { --w:340px; zoom:.42; } /* the desktop stage, scaled whole so the sheet keeps its layout */
  .ddm-x .ddm-br-plate small { font-size:1.2rem; padding:6px 11px; left:calc(100% + 14px); } /* readable after the .42 zoom */
  .ddm-x .ddm-br-stage[data-beat="2"] .ddm-br-plates { transform:translate(-16%,12%) rotateX(54deg) rotateZ(-30deg) scale(.8); } /* room for the labels at the screen edge */
  .ddm-x .ddm-br-deck { width:min(100%,400px); }
  .ddm-x .ddm-br-job { overflow:visible; background:none; box-shadow:none; }
  .ddm-x .ddm-br-job img { border-radius:14px; box-shadow:0 16px 30px -24px rgb(0 0 0/.5); }
  .ddm-x .ddm-br-job figcaption { position:static; padding:8px 2px 0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
}

/* ---------- Reduced motion, reduced transparency, forced colors ---------- */
@media (prefers-reduced-transparency:reduce) { .ddm-x .ddm-br-job figcaption { -webkit-backdrop-filter:none; backdrop-filter:none; background:#fff; } }
@media (prefers-reduced-motion:reduce) {
  .ddm-x.ddm-br-page * { animation:none !important; }
  .ddm-x .ddm-br-sheet-mark svg { stroke-dashoffset:0 !important; }
  .ddm-x :is(.ddm-br-plates,.ddm-br-plate,.ddm-br-sback) { transition:none !important; }
  .ddm-x :is(.ddm-br-fc-sweep,.ddm-br-fc::after) { display:none; }
  .ddm-x .ddm-br-fc { transition:none; }
}
@media (forced-colors:active) {
  .ddm-x :is(.ddm-br-fcard,.ddm-br-sheet,.ddm-br-fin-vis) { border:1px solid CanvasText; }
}