/* BHS: a dark chart. The pack runs flat; at the start line one green line leaves it and climbs off the frame. */
.ns-sig--headstart { --sig-bg: #0a0f1f; --sig-fg: #fff; min-height: clamp(34rem, 84svh, 47rem); align-items: end; padding-block-end: clamp(1.6rem, 4vh, 3rem); }
.ns-sig--headstart .ns-sig__inner { box-sizing: border-box; gap: .3rem; max-width: none; padding-inline-start: clamp(0rem, 3vw, 3.4rem); }
.ns-sig--headstart .ns-sig__title { font-size: clamp(5rem, 16vw, 13.5rem); font-weight: 900; line-height: .86; letter-spacing: -.02em; }
.ns-sig--headstart .ns-sig__ch { animation: hs-go .7s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(var(--i) * 90ms + .2s); }
.ns-sig--headstart .ns-sig__ch:nth-child(3) { color: #4ade80; }
@keyframes hs-go { from { transform: translateX(-.5em) skewX(-16deg); } }
.ns-sig--headstart .ns-sig__tagline { max-width: none; font-size: clamp(1.15rem, 2.4vw, 1.7rem); font-weight: 500; }

/* the chart sheet, tilted so the line grows as it comes at you */
.hs { position: absolute; inset: 0; perspective: 980px; perspective-origin: 26% 12%; }
.hs svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateY(-17%) rotateX(36deg) rotateZ(-3deg) scale(1.18); transform-origin: 50% 60%; }
.hs-st { stroke: #6b7fb5; stroke-width: 2; stroke-dasharray: 3 9; }
.hs-p use { fill: none; stroke: #3b4e86; stroke-width: 2.4; stroke-dasharray: 2400; animation: hs-draw 3.9s cubic-bezier(.3, 0, .6, 1) both; }
.hs-p use:nth-child(3n) { stroke: #2563eb; animation-duration: 4.3s; }
.hs-p use:nth-child(3n + 2) { stroke: #5468a3; animation-duration: 4.7s; }
.hs-a { animation: hs-fade 1.6s ease-out 2.2s both; }
@keyframes hs-fade { from { opacity: 0; } }
.hs-g, .hs-l { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1900; }
.hs-g { stroke: #22c55e; stroke-opacity: .12; stroke-width: 34; animation: hs-draw 3s cubic-bezier(.45, 0, .2, 1) both; }
.hs-g.o { stroke-opacity: .24; stroke-width: 17; }
.hs-l { stroke: #4ade80; stroke-width: 6; animation: hs-draw 3s cubic-bezier(.45, 0, .2, 1) both; }
@keyframes hs-draw { from { stroke-dashoffset: 2400; } to { stroke-dashoffset: 0; } }
.hs-u { fill: none; stroke: #eafff2; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 70 2400; stroke-dashoffset: -2000; animation: hs-run 7s cubic-bezier(.5, 0, .9, .6) 3.2s infinite both; }
@keyframes hs-run { from { stroke-dashoffset: 70; } to { stroke-dashoffset: -1900; } }
.hs-t { fill: #aab9e6; font-size: 26px; font-weight: 700; }
.ns-sig--headstart .ns-sig__pause { inset-block: .75rem auto; }

@media (max-width: 767px) {
	.ns-sig--headstart { min-height: clamp(30rem, 74svh, 40rem); }
	.ns-sig--headstart .ns-sig__title { font-size: clamp(5rem, 30vw, 8rem); }
	.hs svg { transform: translateY(-24%) rotateX(24deg) scale(1.2); transform-origin: 80% 60%; }
}

/* touches: a rising green tick before section titles, card corner that climbs */
body.ns-sig-headstart .ns-cat-block__head .ns-section-title::before { content: ""; display: inline-block; width: .8em; height: .7em; margin-inline-end: .45em; background: linear-gradient(to top left, transparent 44%, #22c55e 44% 56%, transparent 56%); }
body.ns-sig-headstart .ns-fc:hover { transform: translateY(-4px); box-shadow: 0 10px 0 -6px #22c55e; }