html.lenis, html.lenis body {
            height: auto;
        }
        .lenis-smooth {
            scroll-behavior: auto !important;
        }

        body {
            min-height: 100vh;
            background: #fff;
            color: #000;
            font-family: Helvetica, Arial, sans-serif;
            overflow-x: hidden;
            cursor: none;
            margin: 0;
            padding: 0;
        }

        a, button, input, textarea {
            cursor: none;
        }

        .custom-cursor {
            position: fixed;
            width: 60px;
            height: 60px;
            background: #fff;
            border-radius: 50%;
            pointer-events: none;
            transform: translate(-50%, -50%);
            z-index: 9999;
            mix-blend-mode: exclusion;
            transition: transform 0.18s ease;
        } 

        .site-header {
            position: fixed;
            top: 0;
            left: 0;
            width: calc(100vw - 80px);
            padding: 30px 40px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            z-index: 1001;
            pointer-events: none;
        }

        .title-indicator, .menu-btn { pointer-events: auto; }
        .title-indicator { 
            text-decoration: none; 
            color: inherit; 
            opacity: 0; 
            font-size: 0.85rem;
            font-weight: bold;
            letter-spacing: 1px;
        	text-transform: uppercase;
        	pointer-events: none;
        }
   
        .menu-btn {
            width: 92px;
            height: 92px;
            border: none;
            background: #0800fe;
            color: white;
            font-size: 22px;
            font-weight: 700;
            margin-top: 10px;
            margin-right: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
            transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease, clip-path 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
            will-change: transform, clip-path;
        }

        .menu-btn:hover { transform: scale(1.08); opacity: 0.95; }
        .menu-btn.active { transform: scale(1.12) rotate(45deg); }
    

        .left-menu {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-left: 10vw;
            background-color: #2f00ff;
            background-image: linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
            background-size: 48px 48px;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.4s ease, visibility 0.4s ease;
            z-index: 999;
        }

        .left-menu.open { opacity: 1; visibility: visible; pointer-events: auto; }
        .left-menu ul { list-style: none; text-align: left; }
        .left-menu li { margin-bottom: 12px; overflow: hidden; }
        .left-menu a {
            color: #fff;
            text-decoration: none;
            font-size: clamp(60px, 9vw, 140px);
            line-height: 0.9;
            font-weight: 700;
            display: block;
            opacity: 0;
            transform: translateX(-80px);
            transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
        }

        .left-menu.open a { opacity: 1; transform: translateX(0); }
        .left-menu.open li:nth-child(1) a { transition-delay: 0.08s; }
        .left-menu.open li:nth-child(2) a { transition-delay: 0.16s; }
        .left-menu.open li:nth-child(3) a { transition-delay: 0.24s; }
        .left-menu a:hover, .left-menu a.active { opacity: 0.8; transform: translateX(12px); }

        /* =========================
           PIN & OVERLAP LAYOUT
        ========================= */
        .scroll-wrapper {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        .pinned-section {
            height: 100vh;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            box-sizing: border-box;
        }

     .content-wrapper {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            max-width: 1400px;
            margin: 0 auto;
            width: 100%;
            padding: 0 20px;
            position: relative;
        }

        .hero-shape-wrap {
            mix-blend-mode: multiply;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 99;
        }

        .shape-text-row {
            display: block;
            white-space: nowrap;
            width: max-content;
            min-width: 160vw;
            font-size: clamp(72px, 12vw, 190px);
            font-weight: 800;
            letter-spacing: -0.055em;
            line-height: 1;
            will-change: transform;
        }
        
        .shape-text-row2 {
            display: block;
            white-space: nowrap;
            width: max-content;
            min-width: 160vw;
            font-size: clamp(42px, 10vw, 190px);
            font-weight: 800;
            color: #c7c7c7;
            letter-spacing: 0.075em;
            line-height: 1;
            will-change: transform;
        }

        .hero-alt {
            font-family: "Times New Roman", serif;
            font-style: italic;
        }

        .reveal-text {
            font-weight: 400;
            color: rgba(17, 17, 17, 0.25);
            font-size: clamp(18px, 2vw, 26px);
            text-align: right;
            max-width: 700px;
            line-height: 1.45;
            margin: 5px 0px;
        }

        .reveal-text span {
            color: rgba(17, 17, 17, 0.25); 
            display: inline-block;
            will-change: color;
        }

        .anim-up {
            transform: translateY(48px);
            opacity: 0;
            transition: opacity 1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .delay-2 { transition-delay: 0.18s; }


        /* Slide 2 (#works) */
        .next-section {
            height: 100vh;
            width: 100%;
            background-color: #F6F6F6;
            color: #111;
            position: absolute; 
            top: 100vh; 
            left: 0;
            z-index: 99; 
        }

        .works-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            height: 100vh;
            width: 100%;
        }

        .works-list {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-left: 60px;
            gap: 30px;
        }

        .work-link {
            font-size: 50px;
            text-decoration: none;
            color: #111;
            font-weight: 600;
            transition: opacity .25s ease;
        }

        .work-link:hover { opacity: .5; }

        .works-preview {
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            min-width: 50vw;
        }

        .works-preview img {
            max-width: 80%;
            max-height: 70vh;
            object-fit: contain;
            transition: opacity .35s ease, transform .5s ease;
        	border-radius: 10px;
        }

           
        /* Slide 3 (CONTACT) */
        .z-section-reveal {
            position: absolute;
            inset: 0;
          /* 
        	background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1280 844.4'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: url(%23linear-gradient); %7D %3C/style%3E%3ClinearGradient id='linear-gradient' x1='28.85' y1='422.14' x2='1309.12' y2='422.14' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230900fd'/%3E%3Cstop offset='.16' stop-color='%230700fd' stop-opacity='.86'/%3E%3Cstop offset='.51' stop-color='%230400fd' stop-opacity='.52'/%3E%3Cstop offset='1' stop-color='blue' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect class='cls-1' x='-.24' y='-.46' width='1280.27' height='845.2'/%3E%3C/svg%3E");
        	background-color:#fff; 
        	background-size:cover;
        
        	background-position-x:center;*/
        	background: #0900FD;
background: linear-gradient(90deg,rgba(9, 0, 253, 1) 0%, rgba(255, 255, 255, 1) 100%);


            color: #0d0d0d;
            display: flex;
            flex-direction: column;
        	justify-content: flex-end;
        	align-items: flex-start;
        	padding: 80px 40px;;	
            z-index: 100; 
            /* Αρχικό σημείο εκκίνησης ρόμβου */
        	clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
        }

        .z-reveal-content {
            max-width: 1000px;
        }
    .z-reveal-content a {font-size:55px;color:#fff;font-weight:bold;text-decoration: none;letter-spacing:-0.015em;}
    .email-link {
    display: inline-flex;
    
    gap: 10px;
    color: #dadada;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}
    .arrow-icon {
    width: 63px;  
    height: 63px;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
    .email-link:hover .arrow-icon {
    
    transform: translate(3px, -3px);
}
   
/* responsive*/
    /*    @media (max-width:1800px) {
             .work-link {font-size:45px;}
        }
        @media (max-width:1600px) {
             .work-link {font-size:40px;}
        }
		@media (max-width:1400px) {

        	 .work-link {font-size:30px;}
		}	
		@media (max-width:1240px) {

        	 .work-link {font-size:25px;}
		}	*/
		@media (max-width:1024px) {
			.reveal-text {
            margin:15px 0px;
        	font-size:25px;
        	}
        	 .work-link {font-size:40px;}
		}	
        @media (max-width:768px) {
    	html, body {
        -webkit-overflow-scrolling: touch; 
        overscroll-behavior-y: none; 
        }
        .custom-cursor {
            width: 20px;
            height: 20px;
        } 
        
         .title-indicator { 
            padding-top:18px;
         	
        }
    
    
    	.site-header {
    		width: calc(100vw - 20px);
    		padding: 30px 10px;
    	}
    
    	.menu-btn {
            width: 72px;
            height: 72px;
    		margin-top: -10px;
            margin-right: 10px;
    	}
        .content-wrapper {
        padding:0px;
        }
          .shape-text-row {
            white-space: nowrap;
            font-size: 73px;
           padding-left:5px;
        }
        
        .shape-text-row2 {

            font-size: 63px;
        	padding-left:20px;

        }
        .reveal-text	{
        margin:15px 0px;
        padding:10px;
        font-size:22px;
        padding-left:20px;
        }

        .works-layout {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 50px;
        height: auto;padding: 150px 10px;}
        .works-list {padding-left:0px;padding-right:20px;gap:30px;/*height:45vh;*/}
        .work-link {font-size:40px;}
        /*.works-preview {width:auto;max-height:50vh;}
        #workPreviewImage {opacity:0;}*/
        .works-preview {
        display: none !important;
        }
        
        
        .z-section-reveal {padding:120px 10px;}
           .z-reveal-content a {font-size:30px;}
        
     .arrow-icon {
    width: 33px;  
    height: 33px;}
          
        
}
	
@media (max-width:550px) {
        .shape-text-row {
            white-space: nowrap;
            font-size: 60px;
        padding-left:10px;
        }
        
        .shape-text-row2 {

            font-size: 40px;

        }
        .reveal-text	{
        margin:15px 0px;
        padding:10px;
        font-size:22px;
        }
.hero-shape-wrap {    }
}