.container { width: min(100% - (var(--page-gutter) * 2), var(--content-wide)); margin-inline: auto; }
.container--narrow { width: min(100% - (var(--page-gutter) * 2), 780px); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.section--paper { background: var(--color-paper); }
.section--dark { color: #f4f1ec; background: var(--color-black); }
.section--charcoal { color: #f4f1ec; background: var(--color-charcoal); }
.section--paper + .section--paper,
.section--dark + .section--dark,
.section--charcoal + .section--charcoal,
.section:not(.section--paper):not(.section--dark):not(.section--charcoal) + .section:not(.section--paper):not(.section--dark):not(.section--charcoal) {
  padding-top: 0;
}
.section-heading { margin-bottom: clamp(30px, 5vw, 50px); }
.eyebrow {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.eyebrow::after { width: 24px; height: 2px; content: ""; background: var(--color-red); }
.section-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .04em;
  text-wrap: balance;
}
.section-lead { max-width: 720px; margin: 15px 0 0; color: var(--color-muted); text-wrap: pretty; }
.section--dark .section-lead, .section--charcoal .section-lead { color: #d4d0ca; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 76px); align-items: center; }
.stack { display: grid; gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .section { padding-block: clamp(64px, 18vw, 90px); }
  .desktop-break { display: none; }
  .split, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .section-title {
    font-size: clamp(28px, 8vw, 36px);
    word-break: auto-phrase;
  }
  .section-lead { font-size: 14px; }
}