:root { --bg: #F2F0EB; --text: #2C2C2C; --white: #ffffff; --black: #0a0a0a; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Manrope', sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; }

/* NAV - Ensure this class exists! */
.navbar { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    padding: 25px 5%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    z-index: 9999; /* Increased z-index to stay above everything */
    mix-blend-mode: difference; 
    color: var(--white); 
    transition: transform 0.4s ease; 
}

/* This is the class that hides it */
.nav-hidden { 
    transform: translateY(-100%); 
}

.logo { font-weight: 700; letter-spacing: 1px; font-size: 1.1rem; }
.menu a { text-decoration: none; color: inherit; margin-left: 20px; font-weight: 600; font-size: 0.85rem; letter-spacing: 1px; }

/* HERO */
section { position: relative; z-index: 10; background: var(--bg); }
.hero { height: 100vh; background: var(--black); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; }
.hero h1 { font-family: 'Playfair Display', serif; font-size: 4.5rem; line-height: 1.1; margin-bottom: 20px; font-weight: 600; }
.hero p { font-size: 1.1rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 300; opacity: 0.9; }

/* ABOUT */
.about-section { padding: 120px 10%; text-align: center; }
.about-section h2 { font-family: 'Playfair Display', serif; font-size: 3.5rem; margin-bottom: 30px; font-weight: 600; }
.about-section p { font-size: 1.3rem; line-height: 1.6; max-width: 800px; margin: 0 auto; color: #444; }
.experience { font-size: 1.1rem; color: #666; margin-top: 10px; }

/* MARQUEE */
.marquee-section { padding: 60px 0; background: #fff; overflow: hidden; }
.marquee-wrapper { display: flex; overflow: hidden; width: 100%; margin-bottom: 20px; white-space: nowrap; }
.marquee-track { display: flex; gap: 20px; width: max-content; }
.marquee-group { display: flex; gap: 20px; flex-shrink: 0; }
.marquee-group img { width: 350px; height: 240px; object-fit: cover; border-radius: 4px; cursor: pointer; transition: transform 0.2s ease; }
.marquee-group img:hover { transform: scale(1.02); }
.track-right { animation: scrollRight 50s linear infinite; }
.track-left { animation: scrollLeft 50s linear infinite; }
@keyframes scrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes scrollRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }

/* COMPARISON SLIDER */
.comparison-section { padding: 100px 5%; text-align: center; }
.section-title { text-align: center; font-size: 3rem; margin-bottom: 40px; font-family: 'Playfair Display', serif; font-weight: 600; }
.compare-container {
    position: relative; width: 100%; max-width: 900px;
    aspect-ratio: 16 / 9; 
    margin: 0 auto; border-radius: 12px; overflow: hidden;
    background: transparent; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.compare-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.compare-img img { width: 100%; height: 100%; object-fit: cover; } 

.old-img { z-index: 1; }
.new-img { z-index: 2; clip-path: inset(0 50% 0 0); }
.badge { position: absolute; top: 20px; padding: 6px 14px; background: rgba(255,255,255,0.9); color: #000; font-weight: 700; font-size: 0.75rem; letter-spacing: 1px; z-index: 20; border-radius: 20px; }
.badge-left { left: 20px; }
.badge-right { right: 20px; }

.slider-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: none; background: transparent; z-index: 100; cursor: col-resize; }
.slider-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; z-index: 50; pointer-events: none; transform: translateX(-50%); }
.slider-button {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 48px; height: 48px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.slider-button img { width: 24px; height: 24px; object-fit: contain; }

/* LIGHTBOX */
.lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 9999; justify-content: center; align-items: center; }
.lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; }
.close-btn { position: absolute; top: 30px; right: 30px; color: #fff; font-size: 40px; cursor: pointer; }

footer { background: var(--black); color: #fff; padding: 80px 5%; text-align: center; }
footer h3 { font-family: 'Playfair Display', serif; font-size: 2rem; margin-bottom: 10px; }
footer .insta-id { font-family: 'Manrope', sans-serif; opacity: 0.8; margin-bottom: 20px; display: inline-block; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 2px; }

/* Responsive General */
@media (max-width: 768px) {
    .hero h1 { font-size: 3rem; }
    .about-section h2 { font-size: 2.5rem; }
}

/* REMOVE DEFAULT RANGE SLIDER THUMB */
.slider-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 0; height: 0; background: transparent; border: none; }
.slider-input::-moz-range-thumb { width: 0; height: 0; background: transparent; border: none; }
.slider-input::-webkit-slider-runnable-track { background: transparent; }
.slider-input::-moz-range-track { background: transparent; }


.insta-id a {
    text-decoration: none;   /* removes underline */
    color: cyan;             /* cyan text */
}

.insta-id a:hover {
    text-decoration: none;   /* still no underline on hover */
    color: #00ffff;          /* slightly bright cyan on hover */
}