/* Design Fiction page: film block and how-we-work steps. Work page teaser card. */
/* Same hero treatment as Pods and Team Redesign (companion.css and world-pages.css). */
body[data-page=design-fiction] h1{max-width:950px}
body[data-page=design-fiction] #wash{background:rgba(250,250,246,.92)!important}
.df-film{width:min(100%,1200px,max(320px,calc((100svh - 220px) * 16 / 9)));margin:0 auto;position:relative;border-radius:20px;overflow:hidden;background:#04050a;box-shadow:0 30px 80px -40px rgba(4,5,10,.55)}
.df-film video{display:block;width:100%;aspect-ratio:16/9;height:auto;background:#04050a}
.df-film figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 22px;color:#fafaf6;font-size:14px;letter-spacing:.02em;background:#04050a}
.df-film figcaption span:first-child{font-weight:600}
.df-film figcaption span:last-child{opacity:.7}
.df-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.df-steps .surface h3{margin-top:14px}
.df-step{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--brand-purple-ink,#7546dc)}
@media (max-width:900px){.df-steps{grid-template-columns:1fr}.df-film{border-radius:14px}.df-film figcaption{padding:12px 16px;font-size:13px}}