/* ── Container ── */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }
.container--narrow { max-width: 800px; }

/* ── Section ── */
.section { padding: var(--section-py) 0; }
.section--gray { background: var(--light-gray); }
.section--navy { background: var(--navy); color: var(--text-inverse); }
.section--navy h2, .section--navy h3, .section--navy h4 { color: var(--text-inverse); }
.section--navy p { color: rgba(255,255,255,.8); }

/* ── Section Header ── */
.section-header { text-align: center; margin-bottom: var(--sp-16); }
.section-label {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--royal-blue);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: var(--sp-4);
}
.section-title { margin-bottom: var(--sp-6); }
.section-desc { font-size: var(--fs-lg); max-width: 640px; margin: 0 auto; }
.section--navy .section-label { color: var(--gold); }

/* ── Gold Divider ── */
.gold-divider {
  width: 48px; height: 3px;
  background: var(--gold);
  border-radius: var(--r-full);
  margin: var(--sp-6) auto;
}

/* ── Grid ── */
.grid { display: grid; gap: var(--sp-8); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Flex ── */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }

/* ── Text alignment ── */
.text-center { text-align: center; }