.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--section-gap) 0;
}

.section--tight { padding: 56px 0; }

.section--navy {
  background: var(--blueprint-navy);
  color: var(--drafting-white);
}

.section--light { background: var(--drafting-white); }
.section--tint { background: var(--drafting-white); }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

@media (max-width: 900px) {
  .section { padding: var(--section-gap-mobile) 0; }
  .grid-12 { grid-template-columns: repeat(4, 1fr); }
  .grid-12 > [style*="span 6"],
  .grid-12 > [style*="span 4"] { grid-column: span 4 !important; }
}