*{margin:0;padding:0;box-sizing:border-box}body{font-family:Schibsted Grotesk,system-ui,sans-serif}img{width:100%;height:100%;object-fit:cover}h1{font-size:clamp(3rem,5vw,7rem);font-weight:400;letter-spacing:-2%;line-height:1}h3{font-size:clamp(2rem,4vw,6rem);font-weight:400;letter-spacing:-2%;line-height:1}nav{position:fixed;top:0;left:0;width:100%;padding:1.5rem;display:flex;justify-content:space-between;align-items:center;mix-blend-mode:difference;z-index:10}.nav-logo,.nav-toggler{padding:1rem;cursor:pointer;transform:translate(0);will-change:transform}.nav-logo{width:8rem}.nav-toggler{background:none;border:none;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px}.nav-toggler span{width:40px;height:2px;background-color:#fff;transition:all .4s ease}.nav-toggler.open span:first-child{transform:translateY(3.5px) rotate(45deg) scaleX(.75)}.nav-toggler.open span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg) scaleX(.75)}.menu{position:fixed;top:0;left:0;width:100%;height:100svh;background-color:#0e1f19;overflow:hidden}.menu-container{position:absolute;top:0;left:0;width:100%;height:50svh;padding:6rem 2.5rem 2.5rem;display:flex;gap:2.5rem}.menu-col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:center;border-top:1px solid #2a3b34}.menu-col a{display:block;text-decoration:none;color:#e6ece6;font-size:2.5rem;font-weight:500;letter-spacing:-1%;line-height:1.25}.menu-col a .word{position:relative;transform:translateY(100%);will-change:transform}.page{background-color:#f3f1ea;position:fixed;top:0;left:0;width:100%;height:100svh;overflow:hidden;overflow-y:auto;transform:translateY(0) scale(1);border-radius:0;will-change:transform,border-radius;z-index:2}section{position:relative;width:100%;height:100svh;display:flex;justify-content:center;align-items:center;overflow:hidden}.hero{color:#e6ece6;background:url(/c/offcanvas-page-push-menu/hero.jpg) no-repeat 50% 50%;background-size:cover}.about{background-color:#f3f1ea;color:#10201a}.outro{background-color:#0e1f19;color:#e6ece6}.hero h1,.about h3,.outro h3{text-align:center;width:50%}@media(max-width:1000px){.menu-container{height:65svh;flex-direction:column;gap:0rem}.menu-col a{font-size:1.75rem}.hero h1,.about h3,.outro h3{width:calc(100% - 5rem)}}.menu-col a:hover{color:#8fa39a}