/* Bizzy: a taxi-yellow sky and a black city of bars rising like a chart, offices lit, a cab running along the street. */
.ns-sig--skyline { --sig-bg: #facc15; --sig-fg: #18181b; min-height: clamp(34rem, 86svh, 47rem); align-items: start; padding-block-start: clamp(1rem, 3vh, 2rem); }
.ns-sig--skyline .ns-sig__inner { box-sizing: border-box; gap: .5rem; max-width: none; padding-inline-start: clamp(0rem, 3vw, 3.6rem); }
.ns-sig--skyline .ns-sig__title { font-size: clamp(5rem, 15vw, 12.5rem); line-height: .86; font-weight: 400; }
.ns-sig--skyline .ns-sig__ch { animation: sk-up .6s cubic-bezier(.2, 1.3, .4, 1) backwards; animation-delay: calc(var(--i) * 80ms); transform-origin: 50% 100%; }
@keyframes sk-up { from { transform: scaleY(.4); } }
.ns-sig--skyline .ns-sig__tagline { font-weight: 700; max-width: none; }
.ns-sig--skyline .ns-sig__search { background: #18181b; border-radius: 0; width: min(100%, 27rem); }
.ns-sig--skyline .ns-sig__search input { color: #fff; background: #18181b; }
.ns-sig--skyline .ns-sig__search input::placeholder { color: #e4e4e7; }
.ns-sig--skyline .ns-sig__search button { color: #18181b; background: #facc15; border-radius: 0; }

/* the city */
.sk { position: absolute; inset: 0; width: 100%; height: 100%; }
.sk-b { fill: #e3b40d; transform: translateX(calc((var(--mx) - .5) * 26px)); transition: transform .5s ease-out; }
.sk-t path { fill: #18181b; }
.sk-t g { transform-box: fill-box; transform-origin: 50% 100%; animation: sk-rise .9s cubic-bezier(.2, 1.1, .3, 1) both; animation-delay: calc(var(--i) * .17s + .1s); }
@keyframes sk-rise { from { transform: scaleY(0); } }
/* first they are only bars on a chart; then the offices come on and it is a city */
.sk-t rect { animation: sk-lit .45s steps(3) both; animation-delay: calc(var(--i) * .17s + 1.5s); }
@keyframes sk-lit { from { opacity: 0; } }
.sk-t .w { animation: sk-tw 9s steps(1) infinite; animation-delay: calc(var(--i) * -.8s); }
@keyframes sk-tw { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
.sk-x { transform: translateX(760px); animation: sk-cab 13s linear 2s infinite both; }
@keyframes sk-cab { from { transform: translateX(1500px); } to { transform: translateX(-140px); } }

@media (max-width: 767px) {
	.ns-sig--skyline { min-height: clamp(30rem, 70svh, 35rem); }
	.ns-sig--skyline .ns-sig__title { font-size: clamp(5rem, 27vw, 7rem); }
	.sk { inset: auto 0 0 auto; width: 232vw; height: 118.6vw; }
}

/* touches: three rising bars before section titles, a checker strip above the footer */
body.ns-sig-skyline .ns-cat-block__head .ns-section-title::before { content: ""; display: inline-block; width: .8em; height: .85em; margin-inline-end: .45em; background: linear-gradient(#18181b, #18181b) 100% 100% / 26% 40% no-repeat, linear-gradient(#a16207, #a16207) 50% 100% / 26% 70% no-repeat, linear-gradient(#18181b, #18181b) 0 100% / 26% 100% no-repeat; }
body.ns-sig-skyline .ns-fc:hover { box-shadow: 0 6px 0 #facc15, 0 8px 0 #18181b; }
body.ns-sig-skyline .ns-footer { border-block-start: 14px solid; border-image: repeating-linear-gradient(90deg, #facc15 0 14px, #18181b 14px 28px) 14; }