.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--bleed-right { margin-right: 0; width: calc(100% - var(--gutter)); max-width: none; margin-left: max(var(--gutter), (100% - var(--container)) / 2); }

.section { position: relative; padding-block: var(--space-section); }
.section--flush { padding-block: 0; }

.stack > * + * { margin-top: var(--stack, var(--space-5)); }

/* Two-column text split. Figma offsets differ per section (872 / 822 / 800 px), so the second column is a variable. */
.split { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 1025px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, var(--split-col2, 0.62fr)); column-gap: var(--space-7); align-items: start; }
}

/* 3-up image cards: 424 x 248 at 1440 with ~17.6px gaps */
.grid-3 { display: grid; gap: var(--gap-cards); grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Horizontal scroller (product row, timeline): content wider than viewport */
.scroller { display: flex; gap: var(--scroller-gap, 2.9rem); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { flex: 0 0 auto; scroll-snap-align: start; }