/* ═══════════════════════════════════════════════════════════════
   02 · LAYOUT
   Container · sections · full-bleed helpers
   ═══════════════════════════════════════════════════════════════ */

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

.section            { padding: 110px 0; }
.section--lg        { padding: 140px 0; }
.section--sm        { padding: 70px 0; }

.section--bone      { background: var(--bone); }
.section--paper     { background: var(--paper); }
.section--white     { background: #fff; }
.section--navy      { background: var(--navy-800); color: #fff; }
.section--navy-deep { background: var(--navy-900); color: #fff; }

/* Full-bleed: section breaks out of container constraints */
.full-bleed {
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}