/* Our work row (Daniel, Oct 24): the closing "Real sites for real businesses" row of client sites, shared by Home, Services
   and People. Same as the service pages' reel (service-social.css "Our sites reel", from Get Found), under the shared ddm-ow- prefix.
   It closes the page, after the page's own ending, and runs straight into the footer. Script: scripts/work-row.js. */
.ddm-x .ddm-ow { 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:has(.ddm-ow) .ddm-footer { border-top:0; }
.ddm-x:has(.ddm-ow) .ddm-footer::before { display:none; }
.ddm-x .ddm-ow-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-ow-head .ddm-head { margin:0; }
.ddm-x .ddm-ow-head h2 { margin:0; }
.ddm-x .ddm-ow-head > .ddm-link { margin-bottom:10px; }
.ddm-x .ddm-ow-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-ow-track { display:flex; gap:var(--gap); flex:none; margin:0; padding:0; list-style:none; animation:ddm-ow 60s linear infinite; }
.ddm-x .ddm-ow:not(.is-on) .ddm-ow-track { animation-play-state:paused; } /* only runs while on screen */
@keyframes ddm-ow { to { translate:calc(-100% - var(--gap)) 0; } }
.ddm-x .ddm-ow-item { position:relative; flex:none; width:clamp(260px,30vw,460px); }
.ddm-x .ddm-ow-card { position:absolute; inset:0; z-index:8; border-radius:14px; }
.ddm-x .ddm-ow-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ddm-x .ddm-ow-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-ow-bar { display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-bottom:1px solid var(--line); background:#f6f5f2; }
.ddm-x .ddm-ow-bar i { width:8px; height:8px; border-radius:50%; background:rgb(0 0 0/.14); }
.ddm-x .ddm-ow-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-ow-win img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.ddm-x .ddm-ow-cap { display:flex; flex-direction:column; gap:2px; padding:14px 4px 0; }
.ddm-x .ddm-ow-cap b { font-weight:600; letter-spacing:-.01em; }
.ddm-x .ddm-ow-cap small { font:500 .7rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-ow-item:is(:hover,:focus-within) .ddm-ow-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-ow-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-ow-win.ddm-light-double::after { opacity:0; transition:opacity .45s var(--ease); }
.ddm-x .ddm-ow-item:is(:hover,:focus-within) .ddm-ow-win.ddm-light-double::after { opacity:1; }
.ddm-x .ddm-ow-item:has(.ddm-ow-card:focus-visible) .ddm-ow-win { outline:2px solid var(--blue-ink); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-ow-track { animation:none; }
  .ddm-x .ddm-ow-track[aria-hidden] { display:none; }
  .ddm-x .ddm-ow-view { overflow-x:auto; -webkit-mask:none; mask:none; padding-inline:var(--gutter,20px); }
}