.motion-library { padding-block: clamp(3rem, 7vw, 6rem); scroll-margin-top: 6rem; }
.motion-intro { display: grid; gap: 1.25rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.motion-intro h2, .motion-group h2 { font-family: "Space Grotesk", sans-serif; font-size: clamp(2rem, 4.4vw, 3.65rem); letter-spacing: -.045em; line-height: 1.06; margin-block: .4rem .65rem; }
.motion-intro p, .motion-group p { color: var(--muted); max-width: 66ch; }
.motion-tools, .motion-jumps { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.motion-tools { justify-content: space-between; }
.motion-tools .btn { min-height: 42px; padding: .6rem .85rem; }
.motion-toggle[hidden], .motion-poster[hidden] { display: none; }
.motion-group { margin-top: clamp(2.75rem, 6vw, 5.5rem); scroll-margin-top: 7rem; }
.motion-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.25rem); margin-top: 1.4rem; }
.motion-grid-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.motion-card { min-width: 0; }
.motion-frame { min-height: 200px; }
.motion-frame-wide { aspect-ratio: 16 / 9; }
.motion-frame::after { display: none; }
.motion-poster { position: absolute; inset: 0; display: block; }
.motion-poster:focus-visible { outline: 3px solid var(--green-2); outline-offset: -4px; }
.motion-poster .video-expand { z-index: 1; }
.motion-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.motion-card-caption { display: grid; gap: .4rem; padding: .85rem 1rem 1rem; }
.motion-card-caption h3 { font-size: 1rem; line-height: 1.35; }
.motion-card-caption a { color: var(--green-2); width: fit-content; font-size: .8rem; font-weight: 700; text-underline-offset: .2em; }
.motion-card-caption a:hover, .motion-card-caption a:focus-visible { text-decoration: underline; }
.motion-subhead { font-family: "Space Grotesk", sans-serif; font-size: 1.35rem; margin-top: 2rem; }
.motion-story { display: grid; grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: center; margin-top: 1.4rem; }
.motion-story-copy { display: grid; gap: .75rem; }
.motion-story-copy .btn { justify-self: start; }
.motion-library + .section { padding-top: clamp(3rem, 7vw, 6rem); }
body:has(.motion-library) .video-modal .video-modal-player iframe { inset: 0; width: 100%; height: 100%; }
body:has(.motion-library) .video-modal-dialog.vertical { width: min(470px, 88vw, 45vh); }
@media (max-width: 1000px) {
  .motion-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .motion-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 750px) {
  .motion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motion-story { grid-template-columns: minmax(0, 1fr); }
}

.motion-mobile-preview { display: none; }
@media (max-width: 470px) {
  .motion-grid, .motion-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motion-grid .motion-frame { min-height: 0; }
  .motion-grid .motion-frame:not(.motion-frame-wide) { aspect-ratio: 3 / 4; }
  .motion-card-caption { padding: .6rem .65rem .75rem; }
  .motion-card-caption h3 { font-size: .9rem; }
  .motion-mobile-preview:not([hidden]) {
    display: grid; grid-template-columns: minmax(200px, 1.35fr) minmax(0, 1fr); gap: .7rem;
    align-items: center; margin-top: 1rem; border: 1px solid var(--line);
    border-radius: 16px; overflow: hidden; background: #090d09;
  }
  .motion-mobile-preview[hidden] { display: none; }
  .motion-mobile-screen {
    position: relative; display: grid; place-items: center; height: 200px;
    color: var(--muted); background: #000; font-size: .78rem;
  }
  .motion-mobile-caption { padding-right: .55rem; overflow-wrap: anywhere; }
  .motion-mobile-caption .eyebrow { font-size: .65rem; }
  .motion-mobile-caption p { font-size: .85rem; line-height: 1.35; }
  .motion-mobile-preview + .motion-grid { margin-top: .75rem; }
  .motion-story .motion-frame { width: min(100%, 22rem); }
}