:root{--sticky-height:72px}
.header-space{height:100px}
.header{position:fixed;inset:0 0 auto;margin:0;padding:0 5%;height:100px;z-index:60;background:var(--paper);border-bottom:1px solid var(--line);transition:height .25s,box-shadow .25s}
.header.is-scrolled{height:var(--sticky-height);box-shadow:0 5px 20px #22345e0d}
.header .brand{width:95px;transition:width .25s}
.header.is-scrolled .brand{width:76px}
.header .nav-cta{min-height:44px;padding-top:11px;padding-bottom:11px}
.header-bricks{position:absolute;pointer-events:none;bottom:-7px;left:17%;display:flex;gap:5px;align-items:end}
.header-bricks i{position:relative;display:block;width:31px;height:12px;background:var(--blue);box-shadow:inset 0 -3px #22345e25;transform:rotate(-6deg);transition:transform .35s}
.header-bricks i:before{content:'';position:absolute;left:5px;top:-4px;width:7px;height:4px;background:inherit;box-shadow:13px 0 0 var(--blue)}
.header-bricks i:nth-child(2){background:var(--character-yellow);height:15px;transform:rotate(7deg)}
.header-bricks i:nth-child(2):before{box-shadow:13px 0 0 var(--character-yellow)}
.header-bricks i:nth-child(3){background:var(--character-pink);transform:rotate(-4deg)}
.header-bricks i:nth-child(3):before{box-shadow:13px 0 0 var(--character-pink)}
.header.is-scrolled .header-bricks i{transform:rotate(0deg)}
.hero{top:var(--sticky-height);height:calc(100svh - var(--sticky-height))}
html{scroll-padding-top:calc(var(--sticky-height) + 24px)}
.journey-visual{top:calc(var(--sticky-height) + 18px)}
@media(max-width:760px){
 :root{--sticky-height:64px}
 .header-space{height:82px}
 .header,body.menu-open .header{height:82px;margin:0;padding:0 6%;z-index:60}
 .header.is-scrolled,body.menu-open .header.is-scrolled{height:var(--sticky-height)}
 .header .brand{width:78px}.header.is-scrolled .brand{width:66px}
 .header-bricks{left:45%;gap:4px;bottom:-5px}
 .header-bricks i{width:24px;height:10px}.header-bricks i:nth-child(2){height:12px}
 .header-bricks i:before{left:4px;width:5px;height:3px;top:-3px;box-shadow:11px 0 0 var(--blue)}
 .header-bricks i:nth-child(2):before{box-shadow:11px 0 0 var(--character-yellow)}
 .header-bricks i:nth-child(3):before{box-shadow:11px 0 0 var(--character-pink)}
 .hero{min-height:620px}.hero-lab{top:44%}
 .journey-visual{top:var(--sticky-height)}
 .mobile-nav:not([hidden]){top:82px;z-index:59}
 body.header-compact .mobile-nav:not([hidden]){top:var(--sticky-height)}
}