:root{
    --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
} 

/* ===== intro-area ===== */
.intro-area {position: relative; width: 100vw; height: 100vh; display: flex; overflow: hidden;}

/* ===== PANELS ===== */
.panel{position: relative; width: 50%; height: 100%; overflow: hidden; flex-shrink: 0; transition: width 0.7s var(--ease); cursor: pointer;}
.panel:has(.panel-btn.ready){cursor: inherit;}

/* hover states toggled by JS */
.intro-area.hover-media .panel-media, .intro-area.hover-it .panel-it{width: 60%;}
.intro-area.hover-it .panel-media, .intro-area.hover-media .panel-it{width: 40%;}

@media (max-width:1200px) {
    .intro-area{flex-direction:column;}
    .panel{width: 100%; height: 50%;}
    .intro-area.hover-media .panel-media, .intro-area.hover-it .panel-it, .intro-area.hover-it .panel-media, .intro-area.hover-media .panel-it{width: 100%; height: 50%;}
}

/* ===== BG layers ===== */
.panel-bg{position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.9s var(--ease); overflow: hidden; width: 100%; background: #666;}
.panel-bg img{width: 100%; height: 100%; object-fit:cover; opacity: 1; transition: opacity 0.9s var(--ease), transform 3s var(--ease); mix-blend-mode: multiply;}
.panel:hover .panel-bg img{transform: scale(1.1);}

/* ===== PANEL CONTENT ===== */
.panel-cont {position: absolute; bottom: 90px; left: 64px; z-index: 10; display: flex; flex-direction: column; align-items: flex-start;}
.panel-logo{width: 140px; height: auto; margin-bottom:1em;}
.panel-logo img{width: 100%; height: 100%; object-fit:contain;}
.panel-tit{font-family: 'Montserrat'; font-size: clamp(42px, 6.5vw, 80px); line-height: 0.92; letter-spacing: 1px; margin-bottom: 15px; transition: letter-spacing 0.5s var(--ease); color: #fff; font-weight:900;}
.panel-sub{color:#fff; border:1px solid rgba(255,255,255,.4); display: inline-flex; flex-shrink:0; border-radius:5em; padding: .1em 1em; letter-spacing: 1px; margin-bottom:15px; font-size: .95em;}
.panel-desc{font-size: .85em; margin-bottom: 30px; max-width: 500px; color: rgba(255,255,255,.7);}
.panel-btn{display: inline-block; padding: .5em 2.2em; letter-spacing: 1px; font-size: .8em; text-transform: uppercase; text-decoration: none; font-weight: 400; cursor: pointer; transition: all 0.25s; color: #fff; border-radius:5px; font-weight: 600;}
.panel-media .panel-btn{background: #4b75ff;}
.panel-media .panel-btn.ready{background: #888;}
.panel-media .panel-btn:hover{background: #3363ff;}
.panel-it .panel-btn{background: #58B531;}
.panel-it .panel-btn:hover{background: #459921;}
@media (max-width:1200px) {
    .panel-cont{left: 1em; top:50%; bottom:inherit; transform:translateY(-50%);}
    .panel-logo{width: 125px;}    
    .panel-sub{font-size: .9em; margin-bottom: 20px;}
    .panel-desc{display: none;}
}
 @media (max-width:600px) {
    .panel-logo{width: 100px;}
}