/* ── 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.05em; 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%, color-mix(in oklab, color-mix(in oklab, var(--yellow-150) 65%, var(--orange-150)) 90%, var(--gray-150)) 0%, transparent 60%), linear-gradient(180deg, color-mix(in oklab, color-mix(in oklab, var(--blue-350) 95%, var(--violet-350)) 35%, var(--gray-400)), color-mix(in oklab, color-mix(in oklab, var(--blue-600) 80%, var(--violet-600)) 35%, var(--gray-650)) 60%, color-mix(in oklab, color-mix(in oklab, var(--blue-800) 65%, var(--violet-800)) 45%, 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.04em; 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; } }