<header style="display: grid; grid-template-columns: min-content min-content auto; grid-template-rows: min-content min-content max-content;">
 <h1 style="font-size: 3em;">
     HYPER
 </h1>
 <h1 style="font-size: 3em;">
     LIGHT
 </h1>
 <h2 style="margin: 0; margin-left: 1em; grid-column-start: 3; align-self: center;">Technical Services</h2>
 <div style="width: 100%; border-top: 3px solid var(--hyper-blue); grid-column-end: span 3; margin: 0; margin-top: -0.7em;"></div>
 <img src="/lightning-helix.png" style="object-fit: cover; width: 100%; max-height: 100%; animation: blinker 1s linear; justify-self: center;"/>
 <h3 style="font-style: italic; grid-column-end: span 2; text-align: center;">Bespoke experiences — authentic, inclusive, and sustainable without compromise</h3>
</header>
<nav style="display: flex; justify-content: center; align-items: center; margin-bottom: 1em;">
 <a href="/">
    <span>Home</span>
 </a>
 <a href="/services">
    <span>Technical Support</span>
 </a>
 <a href="/hire">
    <span>Equipment</span>
    <div style="display: inline-flex; flex-direction: column; max-height: 1.2rem; overflow-y: hidden; align-items: stretch; justify-content: space-between; background-color: black;">
    <span class="scroll-item">Hire</span>
    <span class="scroll-item">Sale</span>
    <span class="scroll-item">Service</span>
    <span class="scroll-item">Install</span>
    </div>
 </a>
 <a href="/development">
    <div style="display: inline-flex; flex-direction: column; max-height: 1.2rem; overflow-y: hidden; align-items: stretch; justify-content: space-between; background-color: black;">
    <span class="scroll-item">Website</span>
    <span class="scroll-item">Software</span>
    <span class="scroll-item">Product</span>
    </div>
    <span>Development</span>
 </a>
 <a href="/about" style="border-right: none;">
    <span>About Us</span>
 </a>
</nav>
