/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  S E R V I C E  P A G E  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  /* One service, said once and plainly: its name, its promise, its own pixel drawing, then exactly what is included. */
  body { margin: 0; }
  img { max-width: 100%; }

  .page-hero { padding-block: clamp(40px, 5.5vw, 84px) clamp(56px, 8vw, 112px); }
  .page-hero .crumb { margin-bottom: clamp(20px, 3vw, 36px); }
  .page-hero .crumb a { text-decoration: none; }
  .page-hero .crumb a:hover { color: var(--ink); }
  .page-hero .crumb .kind-px { margin-right: 0.6em; }                 /* same air either side of the pixel between the two words */
  .page-hero h1 { font-size: var(--step-hero); line-height: 0.98; letter-spacing: -0.045em; }
  .page-hero h1 .px { animation: blink 0.9s steps(1, end) 0.6s 3 backwards; }   /* three blinks, then it holds as the full stop, as on the homepage */
  .page-hero .lead { max-width: 30ch; }                               /* keeps the promise to three or four lines beside the drawing */

  /* the drawing: this service's object from the homepage stage, assembled once and held */
  .picture { min-width: 0; }
  .picture canvas { display: block; width: 100%; max-width: 100%; aspect-ratio: 18 / 14; }   /* 36 by 28 cells, the stage's own proportions */

  /* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  I N C L U D E D  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  /* Four short lists side by side, each under its own pixel. Nothing to read twice. */
  .incl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) 24px; }
  .incl.of-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }     /* a service with three groups fills the row with three */
  .incl.of-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }     /* and one with two groups, with two */
  @media (max-width: 980px) { .incl, .incl.of-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 520px) { .incl, .incl.of-3, .incl.of-2 { grid-template-columns: minmax(0, 1fr); } }
  .incl-group { min-width: 0; border-top: 1px solid var(--rule); padding-top: 18px; }
  .incl-group h3 { font-weight: 400; color: var(--ink); }
  .incl-group h3 .kind-px { margin-left: 0; margin-right: 0.8em; }    /* the pixel leads the label here */
  .incl-group ul { list-style: none; margin: 16px 0 0; padding: 0; }
  .incl-group li { padding-block: 9px; color: var(--soft); border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }   /* a fainter rule than the group's, so the list reads as one block */
  .incl-group li:last-child { border-bottom: 0; }

  /* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  E X A M P L E S  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  /* Six slots: real pieces from the homepage gallery that match this service first, placeholders for the rest until there is more work. */
  .shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
  @media (max-width: 620px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .shots .slot { aspect-ratio: 4 / 3; }
  .shots .shot { margin-bottom: 0; }   /* the homepage gallery tile, exactly as it is there; the grid's gap does the spacing here */
  .shots-foot { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; }

  /* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  M O R E  S E R V I C E S  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  /* The other four, in the same rows as the homepage, so the way out of one service is into another. */