:root{--color-primary:#1d1d1b;--color-secondary:#818181;--color-bg-light:#e6e6e6;--color-accent:#fff;--color-overlay:#1d1d1bb3}.hero-container{background-color:var(--color-bg-light);width:100%;height:100vh;display:flex;overflow:hidden}.left-panel{background-color:var(--color-bg-light);z-index:1;flex-direction:column;flex:0 0 45%;justify-content:space-between;padding:40px;display:flex;position:relative}.hero-header{justify-content:flex-start;display:flex}.hero-logo{height:50px}.main-intro{flex-direction:column;flex-grow:1;justify-content:center;margin-top:-100px;display:flex}.intro-text{color:var(--color-primary);opacity:0;margin-bottom:5px;font-size:24px;font-weight:500}.name-text{color:var(--color-primary);opacity:0;margin:0;font-size:64px;font-weight:700}.title-text{color:var(--color-secondary);margin-top:5px;font-size:18px;font-weight:400}.hero-footer{opacity:0;justify-content:flex-start;gap:20px;display:flex}.social-icon{filter:grayscale();opacity:.6;width:24px;height:24px;transition:opacity .3s}.social-icon:hover{opacity:1;filter:grayscale(0%)}.right-panel{clip-path:polygon(15% 0%,100% 0%,100% 100%,0% 100%);opacity:0;flex:1;position:relative;overflow:hidden}.johan-photo{object-fit:cover;z-index:-2;width:100%;height:100%;position:absolute;top:0;left:0}.photo-overlay{background-color:var(--color-overlay);z-index:-1;width:100%;height:100%;position:absolute;top:0;left:0}.contact-button{background-color:var(--color-accent);color:var(--color-primary);cursor:pointer;z-index:10;border:none;border-radius:20px;padding:10px 20px;font-weight:600;position:absolute;top:40px;right:40px;box-shadow:0 2px 10px #0003}.hero-nav{z-index:10;opacity:0;gap:35px;display:flex;position:absolute;top:48px;left:30%}.hero-nav a{color:var(--color-accent);font-size:18px;font-weight:500;text-decoration:none;transition:color .3s}.hero-nav a:hover{color:var(--color-secondary)}.hamburger{cursor:pointer;z-index:100;display:none}.hamburger .bar{background-color:var(--color-accent);border-radius:3px;width:30px;height:3px;margin:6px auto;transition:all .3s ease-in-out;display:block}.hamburger.active .bar:first-child{transform:translateY(9px)rotate(45deg)}.hamburger.active .bar:nth-child(2){opacity:0}.hamburger.active .bar:nth-child(3){transform:translateY(-9px)rotate(-45deg)}.preloader-container{z-index:9999;background-color:#000;justify-content:center;align-items:center;width:100%;height:100vh;display:flex;position:fixed;top:0;left:0;overflow:hidden}.preloader-logo{opacity:0;will-change:transform, opacity;height:120px}@media (width<=768px){.hero-container{flex-direction:column;height:auto;min-height:100vh}.left-panel{text-align:center;flex:none;align-items:center;width:100%;padding:40px 20px}.hero-header{justify-content:center;width:100%;margin-bottom:30px}.main-intro{margin-top:0}.name-text{margin-bottom:10px;font-size:32px;line-height:1.2}.right-panel{clip-path:polygon(0 8%,100% 0%,100% 100%,0% 100%);flex:none;width:100%;min-height:60vh;padding:0}.hamburger{display:block;position:absolute;top:40px;right:30px}.hero-nav{z-index:90;pointer-events:none;background-color:#1d1d1bf2;flex-direction:column;justify-content:center;align-items:center;gap:30px;width:100%;height:100%;transition:opacity .4s;position:absolute;top:0;left:0;opacity:0!important}.hero-nav.menu-open{pointer-events:all;opacity:1!important}.hero-nav a{font-size:24px}.title-text{margin-bottom:30px;font-size:16px}.hero-footer{justify-content:center;margin-top:20px;padding-bottom:20px}}*{margin:0;font-family:Figtree,sans-serif}