/* Our Story + Services. Scoped: enqueued only on those two templates.
   Both pages are the same editorial shape — a split intro and numbered steps —
   so they share one file rather than duplicating it. */

/* Split intro: prose beside a photograph. Stacks below 1024. */
.story-split { display: grid; gap: var(--mv-s10); align-items: center; }
.story-split__media { aspect-ratio: 4/3; overflow: hidden; }
.story-split__media img { width: 100%; height: 100%; object-fit: cover; }
/* Portrait frames (the bespoke drawing is shot 4:5). cover would crop a
   portrait to landscape and lose the drawing, so the box takes the picture's
   ratio instead of the picture taking the box's. */
.story-split--portrait .story-split__media { aspect-ratio: 4/5; }

/* Numbered process steps. Auto-fit rather than a fixed count: Our Story runs
   five and Services four, and neither should leave a widow in the last row. */
.story-steps { display: grid; gap: var(--mv-s8); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.story-step { border-top: 1px solid var(--mv-line); padding-top: var(--mv-s5); }
.story-step__num { color: var(--mv-highlight); font-family: var(--mv-mono); letter-spacing: 0.12em; }

@media (min-width: 1024px) {
  .story-split { grid-template-columns: 1fr 1fr; gap: var(--mv-s16); }
}