/* Section padding is declared ONCE. Never override it on a child. */
.mq-section { padding-block: var(--section-y); border-bottom: var(--hairline); position: relative; }
.mq-section--flush { padding-block: 0; }
.mq-section--tint { background: var(--mq-tint); }
.mq-section--dark { background: var(--mq-invert); color: #fff; }
.mq-section--dark .mq-h2, .mq-section--dark .mq-h3, .mq-section--dark .mq-display-l, .mq-section--dark .mq-display-xl { color: #fff; }
.mq-section--dark .mq-eyebrow { color: var(--mq-brand-soft); }
.mq-section--dark .mq-body, .mq-section--dark .mq-body-l { color: rgba(255,255,255,0.82); }
.mq-section--dark .mq-small, .mq-section--dark .mq-mute { color: rgba(255,255,255,0.66); }
.mq-section--dark .mq-data-xl { color: #fff; }

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

.mq-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-5); }
@media (max-width: 1023px) { .mq-grid { grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 767px)  { .mq-grid { grid-template-columns: 1fr; } }

.mq-stack   { display: flex; flex-direction: column; }
.mq-stack-3 { gap: var(--s-3); }
.mq-stack-4 { gap: var(--s-4); }
.mq-stack-5 { gap: var(--s-5); }
.mq-stack-7 { gap: var(--s-7); }