/* Scoped motion showcase and brief composer. */
.motion-showcase{padding-block:72px}.motion-heading{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:28px}.motion-heading h2{margin:10px 0}.motion-heading p{max-width:420px;line-height:1.6;color:var(--muted)}.motion-player{margin:0;border-radius:0;overflow:hidden;background:var(--panel)}.motion-player video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--panel)}.motion-credit{font-size:12px;line-height:1.7;color:var(--muted);margin:12px 0}.motion-credit a{color:inherit;text-decoration:underline}.motion-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:24px}.motion-page h1{max-width:18ch;margin:0 0 22px}.motion-page .motion-lead{font-size:clamp(16px,1.3vw,19px);line-height:1.55;max-width:56ch;color:#e7e6e2}.motion-page .motion-player{margin-top:36px}.motion-compose{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:72px}.motion-compose h2{margin:0 0 20px}.motion-compose p{line-height:1.7;color:var(--body)}.motion-form{display:grid;gap:18px}.motion-form label{display:grid;gap:8px;font-size:14px;font-weight:600}.motion-form input,.motion-form textarea,.motion-form select{width:100%;padding:14px;border:1px solid var(--line);border-radius:3px;background:var(--panel);color:var(--ink);font:inherit}.motion-form textarea{min-height:130px;resize:vertical}.motion-form button{justify-self:start}.motion-form :focus-visible,.motion-page a:focus-visible{outline:2px solid var(--orange);outline-offset:4px}.motion-prompt{grid-column:1/-1;margin-top:-26px}.motion-prompt summary{cursor:pointer;padding:16px 0}.motion-prompt pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--panel);border-left:2px solid var(--orange);padding:22px;border-radius:0;max-height:430px;overflow:auto;font:13px/1.7 var(--mono)}.motion-status{min-height:24px;margin:0!important}.motion-steps{padding-left:20px;line-height:1.7}.motion-steps li{margin:12px 0}.motion-kicker{letter-spacing:.14em;text-transform:uppercase}.motion-form .button{border:0;cursor:pointer}
@media(max-width:700px){.motion-showcase{padding-block:40px}.motion-heading{display:block}.motion-heading p{max-width:none}.motion-compose{grid-template-columns:1fr;gap:28px;margin-top:40px}.motion-prompt{margin-top:0}.motion-page .motion-lead{font-size:17px}.motion-player{border-radius:9px}}

/* The page-wide light surface and the bespoke header that came with it are gone:
   the ground, the bar and the ink are plate-identity.css's, like every other page. */
.motion-page-body .motion-prompt pre{color:var(--body)}

/* The film is a frame, not a player. No controls sit over the picture; the one
   thing a visitor needs is a way to turn the sound on, so that is the one
   control, and it stays out of the frame's centre. */
/* The cut edge is the edge: the film sits in an opening, not in a rounded card
   with a drop shadow. Same decision as the apertures on the homepage. */
.film-stage { position: relative; margin: 0; border-radius: 0; overflow: hidden; background: #0d0d0f;
  border: 0; transform-origin: 50% 20%; }
.film-stage > video, .film-stage .film-fallback { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; background: #0d0d0f; }
.film-button { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px 9px 12px; border-radius: 999px; border: 1px solid #ffffff2e; background: #0b0b0ca8;
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); color: #f2f2f0; font: inherit; font-size: 12px;
  letter-spacing: .01em; cursor: pointer; transition: background .25s, border-color .25s, opacity .25s; }
.film-button:hover { background: #16161ad9; border-color: #ffffff4d; }
.film-button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.film-button[aria-pressed="true"] .film-slash { opacity: 0; }
.film-button[aria-pressed="false"] .film-wave { opacity: 0; }
.film-stage:not(.is-playing) .film-slash, .film-stage:not(.is-playing) .film-wave { opacity: 0; }

/* The film page leads with the film and the workspace a licence buys; the brief
   form is the quicker second route, so it gets a heading of its own rather than
   being the first thing on the page. */
.motion-form-panel{display:grid;gap:14px;align-content:start}
.motion-form-title{margin:0}
.motion-form-note{font-size:14px;line-height:1.65;color:var(--muted);margin:0}
.motion-form-panel .motion-form{margin-top:6px}
.motion-compose .motion-steps li b{font-weight:600;color:var(--ink)}
.motion-compose .button{justify-self:start;margin:6px 0 18px}
@media(max-width:700px){}