Centered Big-Type Hero

<!-- Centered Big-Type Hero · NedDev · eigen werk. -->
<div class="jouw-container">
<section class="cbh">
  <span class="cbh__corner cbh__corner--tl">N° 2026</span>
  <span class="cbh__corner cbh__corner--tr">52.0907° N · 4.3044° O</span>
  <div class="cbh__inner">
    <span class="cbh__kicker">Digitaal bureau · Nederland</span>
    <h2 class="cbh__h1">
      <span class="cbh__line"><span>Maak het</span></span>
      <span class="cbh__line"><span>onvergetelijk.</span></span>
    </h2>
    <p class="cbh__sub">Wij ontwerpen en bouwen websites die mensen onthouden en die converteren.</p>
    <a href="#" class="cbh__btn">Plan een gesprek</a>
  </div>
  <span class="cbh__corner cbh__corner--bl">scroll ↓</span>
  <span class="cbh__corner cbh__corner--br">© NedDev</span>
</section>
</div>

/* Centered Big-Type Hero · NedDev · eigen werk. */
.cbh{position:relative;width:100%;box-sizing:border-box;background:#0a0a0a;color:#fff;min-height:480px;display:flex;align-items:center;justify-content:center}
.cbh__inner{max-width:900px;margin:0 auto;padding:60px 28px;text-align:center;box-sizing:border-box}
.cbh__kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;color:#F5480F;text-transform:uppercase}
.cbh__h1{font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(46px,9vw,104px);line-height:1.02;letter-spacing:-.03em;margin:22px 0 0;padding-bottom:.06em}
.cbh__line{display:block;overflow:hidden}
.cbh__line>span{display:inline-block;transform:translateY(105%);transition:transform .85s cubic-bezier(.16,1,.3,1)}
.cbh__line:nth-child(2)>span{transition-delay:.1s}
.cbh.is-in .cbh__line>span{transform:translateY(0)}
.cbh__sub{font-family:'Switzer',sans-serif;font-size:16px;color:rgba(255,255,255,.6);max-width:38ch;margin:26px auto 0;line-height:1.5}
.cbh__btn{display:inline-block;margin-top:30px;font-family:'Switzer',sans-serif;font-weight:600;font-size:14px;color:#0a0a0a;background:#F5480F;padding:14px 30px;border-radius:2px;text-decoration:none;transition:transform .25s ease}
.cbh__btn:hover{transform:translateY(-3px)}
.cbh__corner{position:absolute;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:rgba(255,255,255,.4)}
.cbh__corner--tl{top:18px;left:20px}.cbh__corner--tr{top:18px;right:20px}
.cbh__corner--bl{bottom:18px;left:20px;color:#F5480F}.cbh__corner--br{bottom:18px;right:20px}
@media(prefers-reduced-motion:reduce){.cbh__line>span{transform:none}}

// Centered Big-Type Hero · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.cbh')||root;
if(matchMedia('(prefers-reduced-motion: reduce)').matches){root.classList.add('is-in');}
else{var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){root.classList.add('is-in');io.disconnect();}});},{threshold:.3});io.observe(root);
setTimeout(function(){root.classList.add('is-in');},120);}
}
init(document.querySelector('.jouw-container'));