.mod-hero { background: #050505; }
.mod-cols { position: absolute; inset: 0 6%; display: grid; grid-template-columns: repeat(var(--cols, 40), minmax(0, 1fr)); gap: 4px; }
.mod-col { position: relative; }
.mod-seg { position: absolute; right: 0; background: #F4F4F4; transition: top .55s cubic-bezier(.7, 0, .2, 1), height .55s cubic-bezier(.7, 0, .2, 1), left .3s; }
.mod-hero.glitch .mod-seg, .mod-hero.glitch .mod-title span { transition: none; }
.mod-tear { position: absolute; left: -10%; right: -10%; opacity: .9; transition: transform .2s; }
.mod-title { position: relative; margin: 0; font-weight: 600; font-size: clamp(64px, 11vw, 168px); line-height: 1; letter-spacing: -.05em; height: 1em; color: #fff; }
.mod-title span { position: absolute; left: 0; top: 0; background: #050505; white-space: nowrap; transition: transform .45s cubic-bezier(.7, 0, .2, 1); }
.mod-title span:nth-child(1) { clip-path: inset(0 0 64% 0); }
.mod-title span:nth-child(2) { clip-path: inset(36% 0 30% 0); }
.mod-title span:nth-child(3) { position: relative; display: block; clip-path: inset(70% 0 0 0); }
.mod-btn { background: #F4F4F4; color: #050505; border-color: #F4F4F4; }