/* Styles of /dragonflygin/ only (moved out of its <style> block on 2026-11-10).
   Loaded after the shared sheets, at the same place the block was, so the
   cascade is unchanged. Rules shared by several pages go in /css. */

/* Page-specific: the reel keeps its black stage (the video is 16:9 and the
   hero box is not), and the two square renders share one row of the content
   columns (4 + 4 of nine, with one empty column between them, on desktop;
   5 + 5 of twelve, two between, above 1200px). */
body.case-page .cp-hero .cp-fit { background: #000; }
body.case-page .cp-fit--black { background: #000; }
body.case-page .cp-flow > .cp-duo {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
}
body.case-page .cp-duo > .cp-figure { grid-column: 1 / span 4; }
body.case-page .cp-duo > .cp-figure + .cp-figure { grid-column: 6 / span 4; }
@media (min-width: 75.0625em) {
  body.case-page .cp-duo > .cp-figure { grid-column: 1 / span 5; }
  body.case-page .cp-duo > .cp-figure + .cp-figure { grid-column: 8 / span 5; }
}
@media (max-width: 63.99em) {
  body.case-page .cp-flow > .cp-duo { grid-column: 1 / -1; }
  body.case-page .cp-duo > .cp-figure { grid-column: 1 / span 4; }
  body.case-page .cp-duo > .cp-figure + .cp-figure { grid-column: 5 / span 4; }
}
@media (max-width: 37.49em) {
  body.case-page .cp-flow > .cp-duo { row-gap: var(--cp-gap); }
  body.case-page .cp-duo > .cp-figure,
  body.case-page .cp-duo > .cp-figure + .cp-figure { grid-column: 1 / -1; }
}