/* ============================================
   Layout — Container, Grid, Sections
   ============================================ */

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

/* --- Sections --- */
.section {
  position: relative;
  overflow: hidden;
}

.section--dark {
  background-color: var(--color-bg-dark);
}

.section--dark-alt {
  background-color: var(--color-bg-dark-alt);
}

.section--dark-footer {
  background-color: var(--color-bg-dark-footer);
}

.section--light {
  background-color: var(--color-bg);
}

.section__header {
  margin-bottom: var(--spacing-4xl);
}

.section__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-extra-bold);
  line-height: 40px;
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-xs);
}

.section__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-body);
  line-height: var(--line-height-relaxed);
}