/* ── 18. Header that changes ink with the page ───────── */
.s18 { height: 620px; background: var(--gray-40); }
.li-sc { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.li-sc::-webkit-scrollbar { display: none; }
.li-s { min-height: 460px; padding: 130px clamp(22px, 5cqw, 60px) 60px; }
.li-s h3 { margin: 0; font-size: clamp(40px, 7cqw, 88px); line-height: .94; letter-spacing: -0.022em; font-weight: 550; max-width: 11ch; }
.li-s p { margin: 18px 0 0; font-size: 17px; max-width: 42ch; opacity: .75; }
.li-ph { background: radial-gradient(90% 70% at 30% 30%, var(--yellow-150) 0%, transparent 60%), linear-gradient(180deg, var(--gray-400), var(--blue-650) 60%, var(--gray-800)); color: var(--gray-0); min-height: 560px; }
.li-h { position: absolute; left: 0; right: 0; top: 0; height: 76px; z-index: 10; display: flex; align-items: center; gap: 28px; padding: 0 clamp(22px, 5cqw, 60px); pointer-events: none; }
.li-h > * { pointer-events: auto; }
.li-lg { font-size: 20px; font-weight: 550; letter-spacing: -0.022em; display: flex; align-items: center; gap: 8px; }
.li-lg i { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; }
.li-nav { display: flex; gap: 24px; font-size: 15px; font-weight: 500; margin-left: auto; }
.li-btn { font-size: 13px; font-weight: 550; padding: 9px 16px; border-radius: 9999px; }
.li-d { color: var(--gray-870); } .li-d .li-btn { background: var(--gray-870); color: var(--gray-40); }
.li-l { color: var(--gray-40); } .li-l .li-btn { background: var(--gray-40); color: var(--gray-870); }
@container (max-width: 700px) { .li-nav { display: none; } .li-btn { margin-left: auto; } }