src/components/heading/HeadingFloat.astro
---
// HeadingFloat, recovered from blurr-components.pages.dev
---
<div class="hd-float"> <span class="hd-float__label">Stap voor stap</span> <h2 class="hd-float__title">Jouw bedrijf naar de top</h2> <p class="hd-float__sub">Wij begeleiden je van strategie tot executie.</p> </div>
<style>
.hd-float{padding:2.5rem 0;position:relative}
.hd-float__label{position:absolute;top:1.5rem;right:0;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent);writing-mode:vertical-rl;text-orientation:mixed;opacity:.7}
.hd-float__title{margin:0 0 .75rem;font-size:clamp(2rem,5vw,3.5rem);font-weight:800;color:var(--color-primary);line-height:1.1;letter-spacing:-.025em;max-width:640px}
.hd-float__sub{margin:0;font-size:1.05rem;color:#555;line-height:1.65;max-width:520px}
</style>