/* Sections: spacing, section titles, dark bands (Highlights, Next project). */

.section { padding: var(--space-9) 0; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.section__head h2 { font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: -0.045em; }
.section__head sup { position: relative; top: 0.35em; vertical-align: top; margin-left: 0.15em; font-family: var(--font-body); font-size: 0.32em; font-weight: 400; letter-spacing: 0; color: var(--color-ink-2); }
.section--dark, .next-section { background: var(--color-black); color: #fff; }
.section--dark .section__head h2, .next-section .section__head h2 { color: #fff; }
/* On dark, links are white + underlined (never a second blue) */
.next-section a:not(.btn):not(.tile), .section--dark a:not(.btn):not(.tile) { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 860px) { .section { padding: var(--space-8) 0; } }
/* Optional short description to the right of a section title */
.section__head:has(p) { align-items: flex-end; }   /* like the case-study section heads: description sits on the title's bottom line */
.section__head p { margin: 0; max-width: 34ch; font-size: var(--text-md); color: var(--color-ink); text-align: right; }
.section--dark .section__head p { color: rgba(255, 255, 255, 0.78); }
@media (max-width: 640px) { .section__head:has(p) { flex-direction: column; align-items: flex-start; gap: var(--space-3); } .section__head p { text-align: left; } }