/* Um único eixo para header, seções e rodapé. */
.ns-container {
  inline-size: min(100% - 2 * var(--ns-gutter), var(--ns-container));
  margin-inline: auto;
}

.ns-section { padding-block: var(--ns-section-space); position: relative; }
.ns-light { background: var(--ns-white); color: var(--ns-text); }
.ns-paper { background: var(--ns-paper); color: var(--ns-text); }
.ns-dark { background: var(--ns-night); color: var(--ns-text-on-dark); }

/* Cabeçalho de seção: eyebrow + título + lead, mesmo ritmo em todas. */
.ns-head { display: grid; gap: var(--ns-s-6); margin-block-end: clamp(2.5rem, 5vw, 4.5rem); }
.ns-head--split { grid-template-columns: 1fr; align-items: end; }
@media (min-width: 1024px) {
  .ns-head--split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: var(--ns-s-16); }
}

.ns-hairline { border-block-start: 1px solid var(--ns-line); }
.ns-dark .ns-hairline { border-color: rgba(238, 242, 247, 0.12); }