/* Deft Digital Media — Services hub menu: "Five trailers" (Daniel's pick, Oct 24). Five obsidian panels; the open one widens
   and plays a small version of its page's hero. Page: pages/services.html; motion: scripts/services-trailers.js. Prefix ddm-tr-.
   Panels are obsidian, so Sunflower may be text here; the section around them stays studio light. */

.ddm-x .ddm-tr-wrap { container-type:inline-size; margin-top:clamp(28px,3.6vw,52px); }
.ddm-x .ddm-tr { --gap:10px; --ow:calc((100cqw - 4 * var(--gap)) * 4.6 / 8.6); display:flex; gap:var(--gap); height:clamp(560px,46vw,660px); }
.ddm-x .ddm-tr-p { position:relative; flex:1 1 0; min-width:0; border-radius:24px; overflow:hidden; isolation:isolate;
  background:radial-gradient(120% 70% at 70% 0%,#1d1d20,#0c0c0d 70%); box-shadow:0 0 0 1px rgb(17 17 17/.1), 0 24px 48px -32px rgb(0 0 0/.55);
  transition:flex-grow .8s cubic-bezier(.7,0,.2,1), box-shadow .5s ease; }
.ddm-x .ddm-tr-p::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.16; pointer-events:none;
  background: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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.ddm-x .ddm-tr-p.is-open { flex-grow:4.6; box-shadow:inset 0 0 0 1px rgb(255 255 255/.9), 0 0 1.5px #fff, 0 0 14px rgb(255 255 255/.35), 0 30px 60px -30px rgb(0 0 0/.6); }

/* Closed: the tab fills the panel, name runs up the side */
.ddm-x .ddm-tr-h { margin:0; }
.ddm-x .ddm-tr-tab { position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; padding:22px 20px 24px; border:0; border-radius:inherit; background:none; color:#fff; text-align:left; cursor:pointer; font:inherit;
  transition:opacity .35s ease; }
.ddm-x .ddm-tr-tab:hover { background:linear-gradient(180deg,rgb(255 255 255/.04),transparent 60%); }
.ddm-x .ddm-tr-tab:focus-visible { outline:2px solid var(--blue-light); outline-offset:-4px; }
.ddm-x .ddm-tr-k { margin:0; font:500 .68rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-2); }
.ddm-x .ddm-tr-tab .ddm-tr-k { display:flex; align-items:center; gap:8px; }
.ddm-x .ddm-tr-tab .ddm-tr-k::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--sun); box-shadow:0 0 8px rgb(255 199 0/.7); }
.ddm-x .ddm-tr-n { writing-mode:vertical-rl; rotate:180deg; font-size:clamp(1.3rem,1.8vw,1.7rem); font-weight:600; letter-spacing:-.03em; line-height:1; white-space:nowrap; }
.ddm-x .ddm-tr-p.is-open .ddm-tr-tab { opacity:0; pointer-events:none; }

/* Open: the trailer on top, what you get underneath. The body is as wide as an open panel, so nothing reflows while it opens. */
.ddm-x .ddm-tr-body { position:absolute; left:0; top:0; bottom:0; width:var(--ow); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s; }
.ddm-x .ddm-tr-p.is-open .ddm-tr-body { opacity:1; visibility:visible; transition:opacity .5s ease .3s, visibility 0s; }
.ddm-x .ddm-tr-vis { position:absolute; left:0; right:0; top:0; height:61%; display:grid; place-items:center; }
.ddm-x .ddm-tr-copy { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:56px clamp(22px,2.4vw,32px) clamp(22px,2.4vw,30px); background:linear-gradient(180deg,rgb(12 12 13/0),rgb(12 12 13/.92) 38%); }
.ddm-x .ddm-tr-t { margin:4px 0 10px; color:#fff; font-size:clamp(1.6rem,2.3vw,2.1rem); font-weight:600; letter-spacing:-.04em; line-height:1; }
.ddm-x .ddm-tr-copy > p:not(.ddm-tr-k):not(.ddm-tr-t) { margin:0; max-width:52ch; color:var(--on-dark-2); font-size:.95rem; }
.ddm-x .ddm-tr-list { display:flex; flex-wrap:wrap; gap:6px 18px; margin:14px 0 16px; padding:0; list-style:none; color:var(--on-dark); font-size:.86rem; }
.ddm-x .ddm-tr-list li { display:flex; align-items:center; gap:8px; }
.ddm-x .ddm-tr-list li::before { content:""; width:14px; height:14px; flex:none; border-radius:50%; background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-5' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.ddm-x .ddm-tr-p.is-open .ddm-tr-copy > * { animation:ddm-tr-rise .6s var(--ease) both; animation-delay:calc(.45s + var(--n,0) * 60ms); }
.ddm-x .ddm-tr-copy > :nth-child(2) { --n:1; } .ddm-x .ddm-tr-copy > :nth-child(3) { --n:2; } .ddm-x .ddm-tr-copy > :nth-child(4) { --n:3; } .ddm-x .ddm-tr-copy > :nth-child(5) { --n:4; }
.ddm-x .ddm-tr-cap { margin:12px 0 0; font-size:.78rem; color:var(--on-dark-2); text-align:right; }
.ddm-x .ddm-tr-cap b { color:#fff; font-weight:600; margin-right:6px; }
.ddm-x .ddm-tr-vis img, .ddm-x .ddm-tr-vis video { display:block; width:100%; height:100%; object-fit:cover; }
.ddm-x .ddm-tr-post-h { display:flex; align-items:center; gap:6px; padding:7px 9px; font-size:.62rem; font-weight:600; color:var(--ink); background:#fff; }
.ddm-x .ddm-tr-post-h i { width:14px; height:14px; flex:none; border-radius:50%; background:var(--ink); box-shadow:0 0 0 1.5px var(--sun); }
.ddm-x .ddm-tr-post-h small { display:block; font-size:.55rem; font-weight:400; color:var(--ink-3); }

/* ---------- Websites: Galaxy's live site in a window ---------- */
.ddm-x .ddm-tr-web { width:74%; perspective:1400px; }
.ddm-x .ddm-tr-win { overflow:hidden; aspect-ratio:16 / 10.6; border-radius:12px; background:#0b0b0c; padding:0 5px 5px; box-shadow:0 0 0 1px rgb(255 255 255/.12), 0 40px 60px -30px rgb(0 0 0/.8); rotate:x 6deg; transform:rotateY(-10deg); }
.ddm-x .ddm-tr-win video { height:calc(100% - 22px); border-radius:0 0 8px 8px; object-position:top; }
.ddm-x .ddm-tr-bar { display:flex; align-items:center; gap:5px; height:22px; padding:0 6px; }
.ddm-x .ddm-tr-bar i { width:6px; height:6px; border-radius:50%; background:rgb(255 255 255/.22); }
.ddm-x .ddm-tr-bar em { margin-left:8px; font:normal .6rem/1 var(--mono); color:rgb(255 255 255/.5); }
.ddm-x .ddm-tr-p.is-open .ddm-tr-win { animation:ddm-tr-settle 1.1s cubic-bezier(.3,1.2,.5,1) .3s both; }
@keyframes ddm-tr-settle { from { opacity:0; transform:rotateY(-24deg) translateY(30px) scale(.92); } }

/* ---------- Get Found: calls from the map ---------- */
.ddm-x .ddm-tr-map { position:relative; width:80%; aspect-ratio:16 / 10; border-radius:16px; overflow:hidden; background:#E8EBE3; box-shadow:0 30px 50px -30px rgb(0 0 0/.8); rotate:x 8deg; }
.ddm-x .ddm-tr-streets, .ddm-x .ddm-tr-routes { position:absolute; inset:0; width:100%; height:100%; }
.ddm-x .ddm-tr-streets path { fill:none; stroke:#fff; stroke-width:1.6; vector-effect:non-scaling-stroke; }
.ddm-x .ddm-tr-streets path.w { stroke-width:5; }
.ddm-x .ddm-tr-streets path.g { fill:#D3E2C8; stroke:none; } .ddm-x .ddm-tr-streets path.b { fill:#CADCEB; stroke:none; }
.ddm-x .ddm-tr-routes path { fill:none; stroke:var(--ink); stroke-width:.7; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; opacity:.55; }
.ddm-x .ddm-tr-town { position:absolute; left:var(--x); top:var(--y); translate:-50% -160%; font:500 .55rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:rgb(17 17 17/.5); }
.ddm-x .ddm-tr-dot { position:absolute; left:var(--x); top:var(--y); width:9px; height:9px; translate:-50% -50%; border-radius:50%; background:var(--ink); box-shadow:0 0 0 4px rgb(255 199 0/.45); }
.ddm-x .ddm-tr-pin { position:absolute; left:50%; top:38%; width:30px; height:30px; translate:-50% -50%; rotate:-45deg; border-radius:50% 50% 50% 0; background:var(--ink); box-shadow:0 0 0 3px var(--sun), 0 10px 18px rgb(0 0 0/.3); }
.ddm-x .ddm-tr-pin::after { content:""; position:absolute; inset:33%; border-radius:50%; background:#fff; }
.ddm-x .ddm-tr-ring { position:absolute; left:50%; top:46%; width:120px; height:60px; translate:-50% -50%; border-radius:50%; border:2px solid rgb(255 199 0/.9); opacity:0; }
.ddm-x .ddm-tr-calls { position:absolute; left:4%; bottom:6%; display:grid; gap:6px; width:44%; }
.ddm-x .ddm-tr-call { display:grid; grid-template-columns:auto 1fr; column-gap:8px; align-items:center; padding:8px 10px; border-radius:10px; background:#fff; box-shadow:0 10px 20px -12px rgb(0 0 0/.5); }
.ddm-x .ddm-tr-call.is-in { box-shadow:0 0 0 2px var(--sun), 0 10px 20px -12px rgb(0 0 0/.5); }
.ddm-x .ddm-tr-call i { grid-row:span 2; width:22px; height:22px; border-radius:50%; background:var(--sun); }
.ddm-x .ddm-tr-call:not(.is-in) i { background:#E9E9E6; }
.ddm-x .ddm-tr-call b { font-size:.66rem; color:var(--ink); } .ddm-x .ddm-tr-call small { font-size:.56rem; color:var(--ink-3); }
.ddm-x .ddm-tr-p.is-open .ddm-tr-routes path { animation:ddm-tr-draw 1s cubic-bezier(.6,0,.2,1) both; animation-delay:calc(.5s + var(--n,0) * 180ms); }
.ddm-x .ddm-tr-routes path:nth-child(2) { --n:1; } .ddm-x .ddm-tr-routes path:nth-child(3) { --n:2; }
.ddm-x .ddm-tr-p.is-open .ddm-tr-pin { animation:ddm-tr-drop .7s cubic-bezier(.3,1.5,.6,1) .3s both; }
.ddm-x .ddm-tr-p.is-open .ddm-tr-ring { animation:ddm-tr-ping 2s ease-out 1s infinite; }
.ddm-x .ddm-tr-p.is-open .ddm-tr-call { animation:ddm-tr-up .55s var(--ease) both; }
.ddm-x .ddm-tr-p.is-open .ddm-tr-call.is-in { animation-delay:1.5s; } .ddm-x .ddm-tr-p.is-open .ddm-tr-call:not(.is-in) { animation-delay:2.1s; }
@keyframes ddm-tr-draw { from { stroke-dashoffset:1; } }
@keyframes ddm-tr-drop { from { translate:-50% -260%; opacity:0; } 60% { opacity:1; } }
@keyframes ddm-tr-ping { 0% { opacity:1; scale:.3; } 100% { opacity:0; scale:1.6; } }

/* ---------- Social content: the shoot-day reel ---------- */
.ddm-x .ddm-tr-social { position:relative; width:86%; height:92%; }
.ddm-x .ddm-tr-phone { position:absolute; left:50%; top:0; height:100%; aspect-ratio:9 / 18.5; translate:-50% 0; padding:5px; border-radius:26px; background:#0b0b0c; box-shadow:0 0 0 1px rgb(255 255 255/.16), 0 30px 50px -24px rgb(0 0 0/.9); z-index:2; }
.ddm-x .ddm-tr-phone video { border-radius:21px; }
.ddm-x .ddm-tr-reel-h { position:absolute; left:16px; top:14px; color:#fff; font-size:.7rem; font-weight:600; text-shadow:0 1px 4px rgb(0 0 0/.5); }
.ddm-x .ddm-tr-reel-f { position:absolute; left:12px; right:12px; bottom:16px; display:flex; align-items:center; gap:6px; color:#fff; font-size:.6rem; text-shadow:0 1px 4px rgb(0 0 0/.6); }
.ddm-x .ddm-tr-reel-f i { width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 0 0 1.5px var(--sun); }
.ddm-x .ddm-tr-reel-f em { margin-left:auto; padding:2px 8px; border:1px solid rgb(255 255 255/.7); border-radius:6px; font-style:normal; }
.ddm-x .ddm-tr-post { position:absolute; top:12%; width:30%; overflow:hidden; border-radius:10px; background:#fff; box-shadow:0 20px 36px -20px rgb(0 0 0/.9); }
.ddm-x .ddm-tr-post img { height:auto; aspect-ratio:4 / 4.6; }
.ddm-x .ddm-tr-post.is-l { left:4%; rotate:-7deg; } .ddm-x .ddm-tr-post.is-r { right:4%; top:6%; rotate:6deg; }
.ddm-x .ddm-tr-chip-s { position:absolute; left:-14%; bottom:10%; padding:6px 9px; border-radius:9px; background:#fff; font-size:.55rem; color:var(--ink-3); box-shadow:0 10px 20px -10px rgb(0 0 0/.6); rotate:-6deg; }
.ddm-x .ddm-tr-chip-s b { display:block; color:var(--ink); font-size:.6rem; }
.ddm-x .ddm-tr-rec { position:absolute; left:6%; top:0; z-index:3; display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius:99px; background:rgb(255 255 255/.92); font:500 .6rem/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.ddm-x .ddm-tr-rec i, .ddm-x .ddm-tr-mon-top em i { width:7px; height:7px; border-radius:50%; background:#E5484D; }
.ddm-x .ddm-tr-toast { position:absolute; left:2%; bottom:6%; z-index:3; display:grid; grid-template-columns:auto 1fr; column-gap:8px; align-items:center; padding:8px 12px; border-radius:12px; background:#fff; box-shadow:0 0 0 2px var(--sun), 0 16px 28px -14px rgb(0 0 0/.8); }
.ddm-x .ddm-tr-toast i { grid-row:span 2; width:20px; height:20px; border-radius:50%; background:var(--sun); }
.ddm-x .ddm-tr-toast b { font-size:.64rem; color:var(--ink); } .ddm-x .ddm-tr-toast small { font-size:.58rem; color:var(--ink-3); }
.ddm-x .ddm-tr-p.is-open .ddm-tr-phone { animation:ddm-tr-up .8s var(--ease) .25s both; }
.ddm-x .ddm-tr-p.is-open .ddm-tr-post { animation:ddm-tr-fade .6s ease .6s both, ddm-tr-bob 5s ease-in-out 1.2s infinite; }
.ddm-x .ddm-tr-p.is-open .ddm-tr-post.is-r { animation-delay:.75s, 1.8s; }
.ddm-x .ddm-tr-p.is-open .ddm-tr-rec { animation:ddm-tr-pop .5s cubic-bezier(.34,1.5,.64,1) .9s both; }
.ddm-x .ddm-tr-p.is-open .ddm-tr-rec i, .ddm-x .ddm-tr-p.is-open .ddm-tr-mon-top em i { animation:ddm-tr-blink 1.2s steps(1) infinite; }
.ddm-x .ddm-tr-p.is-open .ddm-tr-toast { animation:ddm-tr-pop .5s cubic-bezier(.34,1.5,.64,1) 1.8s both; }
@keyframes ddm-tr-bob { 50% { translate:0 -8px; } }
@keyframes ddm-tr-blink { 50% { opacity:.2; } }

/* ---------- Video ads: the director's monitor ---------- */
.ddm-x .ddm-tr-ads { position:relative; width:84%; }
.ddm-x .ddm-tr-mon { position:relative; display:block; width:78%; aspect-ratio:16 / 10.5; border-radius:12px; background:#050506; box-shadow:0 0 0 1px rgb(255 255 255/.14), 0 30px 50px -26px rgb(0 0 0/.9); color:rgb(255 255 255/.85); font:500 .56rem/1.3 var(--mono); }
.ddm-x .ddm-tr-mon-top { position:absolute; left:10px; right:10px; top:8px; display:flex; justify-content:space-between; align-items:center; }
.ddm-x .ddm-tr-mon-top em { display:flex; align-items:center; gap:5px; font-style:normal; }
.ddm-x .ddm-tr-mon-top b { font-weight:500; letter-spacing:.06em; }
.ddm-x .ddm-tr-mon-side { position:absolute; left:10px; top:28%; display:grid; gap:1px; }
.ddm-x .ddm-tr-mon-side small { margin-top:5px; font-size:.48rem; color:rgb(255 255 255/.45); }
.ddm-x .ddm-tr-mon-frame { position:absolute; left:50%; top:13%; bottom:12%; aspect-ratio:3 / 4; translate:-50% 0; overflow:hidden; }
.ddm-x .ddm-tr-mon-frame i { position:absolute; inset:8px; border:1px solid rgb(255 255 255/.55); -webkit-mask:linear-gradient(#000 0 0) top left/14px 14px no-repeat, linear-gradient(#000 0 0) top right/14px 14px no-repeat, linear-gradient(#000 0 0) bottom left/14px 14px no-repeat, linear-gradient(#000 0 0) bottom right/14px 14px no-repeat; mask:linear-gradient(#000 0 0) top left/14px 14px no-repeat, linear-gradient(#000 0 0) top right/14px 14px no-repeat, linear-gradient(#000 0 0) bottom left/14px 14px no-repeat, linear-gradient(#000 0 0) bottom right/14px 14px no-repeat; }
.ddm-x .ddm-tr-mon-bot { position:absolute; left:10px; bottom:7px; color:rgb(255 255 255/.55); }
.ddm-x .ddm-tr-ad { position:absolute; right:0; top:18%; width:34%; overflow:hidden; border-radius:12px; background:#fff; box-shadow:0 24px 40px -20px rgb(0 0 0/.9); }
.ddm-x .ddm-tr-ad img { height:auto; aspect-ratio:1; }
.ddm-x .ddm-tr-ad-f { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:7px 9px; font-size:.56rem; color:var(--ink-2); }
.ddm-x .ddm-tr-ad-f em { position:relative; overflow:hidden; padding:4px 8px; border-radius:99px; background:var(--sun); color:var(--ink); font-style:normal; font-weight:600; white-space:nowrap; }
.ddm-x .ddm-tr-ad-f em i { position:absolute; left:50%; top:50%; width:22px; height:22px; translate:-50% -50%; border-radius:50%; background:rgb(17 17 17/.3); opacity:0; }
.ddm-x .ddm-tr-ads .ddm-tr-cap { text-align:left; }
.ddm-x .ddm-tr-p.is-open .ddm-tr-mon { animation:ddm-tr-up .8s var(--ease) .25s both; }
.ddm-x .ddm-tr-p.is-open .ddm-tr-ad { animation:ddm-tr-slide .7s var(--ease) 1s both; }
.ddm-x .ddm-tr-p.is-open .ddm-tr-ad-f em i { animation:ddm-tr-tap .6s ease-out 2.2s both; }
@keyframes ddm-tr-slide { from { opacity:0; translate:40px 0; } }
@keyframes ddm-tr-tap { 0% { opacity:.9; scale:.2; } 100% { opacity:0; scale:2.6; } }

/* ---------- Branding & print: our foil cards ---------- */
.ddm-x .ddm-tr-vis:has(.ddm-tr-deck) { grid-template-rows:1fr auto; padding:18px 0 0; }
.ddm-x .ddm-tr-deck { position:relative; width:72%; height:100%; }
.ddm-x .ddm-tr-fc { position:absolute; overflow:hidden; border-radius:8px; box-shadow:0 0 0 1px rgb(255 255 255/.08), 0 24px 40px -18px rgb(0 0 0/.9); }
.ddm-x .ddm-tr-fc img { height:auto; }
.ddm-x .ddm-tr-fc i { position:absolute; inset:0; background:linear-gradient(115deg,transparent 35%,rgb(255 240 200/.35) 48%,transparent 60%); translate:-110% 0; }
.ddm-x .ddm-tr-fc.is-glass { left:2%; top:14%; width:24%; rotate:-8deg; }
.ddm-x .ddm-tr-fc.is-scaffold { right:2%; top:2%; width:52%; rotate:5deg; }
.ddm-x .ddm-tr-fc.is-interiors { left:26%; bottom:4%; width:54%; rotate:-2deg; z-index:2; }
.ddm-x .ddm-tr-vis:has(.ddm-tr-deck) .ddm-tr-cap { width:72%; }
.ddm-x .ddm-tr-p.is-open .ddm-tr-fc { animation:ddm-tr-deal .8s cubic-bezier(.3,1.25,.5,1) both, ddm-tr-bob 6s ease-in-out infinite; animation-delay:calc(.3s + var(--n,0) * 140ms), calc(1.4s + var(--n,0) * 700ms); }
.ddm-x .ddm-tr-fc.is-scaffold { --n:1; } .ddm-x .ddm-tr-fc.is-interiors { --n:2; }
.ddm-x .ddm-tr-p.is-open .ddm-tr-fc i { animation:ddm-tr-sweep 1.6s ease both; animation-delay:calc(1.2s + var(--n,0) * 220ms); }
@keyframes ddm-tr-deal { from { opacity:0; translate:0 60px; rotate:0deg; } }
@keyframes ddm-tr-sweep { to { translate:110% 0; } }

/* Shared entrances */
@keyframes ddm-tr-rise { from { opacity:0; translate:0 12px; } }
@keyframes ddm-tr-up { from { opacity:0; translate:0 26px; } }
@keyframes ddm-tr-fade { from { opacity:0; } }
@keyframes ddm-tr-pop { from { opacity:0; scale:.8; } }

/* ---------- Phones and narrow screens: a vertical accordion ---------- */
@media (max-width:860px) {
  .ddm-x .ddm-tr { --ow:100%; flex-direction:column; height:auto; }
  .ddm-x .ddm-tr-p { flex:none; height:76px; transition:height .7s cubic-bezier(.7,0,.2,1), box-shadow .5s ease; }
  .ddm-x .ddm-tr-p.is-open { height:min(620px,150vw); }
  .ddm-x .ddm-tr-tab { flex-direction:row-reverse; justify-content:space-between; align-items:center; padding:0 20px; }
  .ddm-x .ddm-tr-n { writing-mode:horizontal-tb; rotate:none; font-size:1.25rem; }
  .ddm-x .ddm-tr-vis { height:56%; }
  .ddm-x .ddm-tr-web, .ddm-x .ddm-tr-map { width:88%; }
  .ddm-x .ddm-tr-ads { width:94%; }
  .ddm-x .ddm-tr-social { width:96%; }
  .ddm-x .ddm-tr-deck, .ddm-x .ddm-tr-vis:has(.ddm-tr-deck) .ddm-tr-cap { width:90%; }
  .ddm-x .ddm-tr-list { gap:6px 14px; }
  .ddm-x .ddm-tr-cap { display:none; } /* the copy sits close under the scene on phones */
  .ddm-x .ddm-tr-vis:has(.ddm-tr-deck) { padding-bottom:28px; }
  .ddm-x .ddm-tr-ads .ddm-tr-mon { width:74%; }
  .ddm-x .ddm-tr-mon-side { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-tr-p, .ddm-x .ddm-tr-body, .ddm-x .ddm-tr-tab { transition:none !important; }
  .ddm-x .ddm-tr-p *, .ddm-x .ddm-tr-p *::before, .ddm-x .ddm-tr-p *::after { animation:none !important; }
}
@media (forced-colors:active) {
  .ddm-x .ddm-tr-p { border:1px solid CanvasText; }
}