/* Draw Path on Scroll: starts at the top (hero) and winds down to the BEKIFFT button. It lies on top of everything (below the fixed navbar, z-index 50). */
.draw-wrap { position: relative; }
.draw-path { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 20; color: var(--bk-accent); filter: drop-shadow(1px 1px 0 color-mix(in srgb, var(--bk-black) 50%, transparent)); }
/* One colour everywhere: orange, no outline. A hard 1px shadow (no blur) lifts it off every background. */
.draw-path__line { stroke: var(--bk-accent); stroke-width: 14; transition: stroke .3s ease-in-out; }
.draw-wrap.is-target-hover .draw-path__line { stroke: var(--bk-green); }   /* while the BEKIFFT button is hovered or focused (assets/js/draw-path-target.js) */
@media screen and (max-width: 767px) { .draw-path__line { stroke-width: 8; } }
/* The line is on top of all content, except the BEKIFFT button it ends at: that one is lifted above the line (still below the navbar, z-index 50). */
.draw-wrap .btn-wrap { position: relative; z-index: 30; }

/* Band behind the BEKIFFT button: full width, same background as the section above (Fotos). It has no z-index, so the line still runs over it. */
.button-band { box-sizing: border-box; position: relative; width: 100vw; margin-left: calc(50% - 50vw); padding: var(--bk-space-9) var(--bk-gutter); background: var(--bk-bg-alt); }