/* === Layout === */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

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

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

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

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

.section--teal {
  background: var(--teal);
  color: var(--white);
}

/* Grid Utilities */
.grid {
  display: grid;
  gap: 32px;
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.grid--2-1 { grid-template-columns: 2fr 1fr; }
.grid--1-2 { grid-template-columns: 1fr 2fr; }

/* Flex Utilities */
.flex { display: flex; }
.flex--center { align-items: center; justify-content: center; }
.flex--between { justify-content: space-between; align-items: center; }
.flex--gap { gap: 24px; }
.flex--column { flex-direction: column; }
.flex--wrap { flex-wrap: wrap; }

/* Two-Column Content */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.two-col--wide-left {
  grid-template-columns: 1.5fr 1fr;
}

.two-col--wide-right {
  grid-template-columns: 1fr 1.5fr;
}