:root {
            --teal: #2F5755;
            --yellow: #FFE797;
            --peach: #F9CB99;
            --white: #ffffff;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--white);
            color: var(--teal);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        h1, h2, h3, h4, .bebas {
            font-family: 'Bebas Neue', cursive;
            letter-spacing: 0.05em;
        }

        /* --- Animations --- */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

.journey-content {
    width: 100%;
    max-width: 1600px; /* wider = more premium */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6vw;
    align-items: center;
}
/* Reverse layout helper */
.journey-content.reverse {
    direction: rtl;
}
.journey-content.reverse > * {
    direction: ltr;
}

/* Text block */
.journey-text {
    max-width: 520px;
}

/* Paragraph refinement */
.journey-text p {
    font-size: clamp(1.1rem, 1.4vw, 1.4rem);
    line-height: 1.7;
    opacity: 0.75;
}

/* Image styling */
.journey-image {
    width: 100%;
    height: 70vh;              /* taller = immersive */
    object-fit: cover;
    border-radius: 40px;       /* slightly reduced */
}
.journey-image.full {
    height: 100vh;
    border-radius: 0;
}
.journey-text h2 {
    font-size: clamp(4rem, 8vw, 9rem);
    line-height: 0.85;
}

.journey-text p {
    font-size: clamp(1.2rem, 1.4vw, 1.6rem);
    line-height: 1.8;
    opacity: 0.75;
    max-width: 600px;
}

.journey-panel:last-child {
    text-align: center;
}

.journey-panel:last-child h2 {
    font-size: clamp(5rem, 10vw, 12rem);
}
/* Mobile fix */
@media (max-width: 768px) {
    .journey-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .journey-text {
        margin: 0 auto;
    }

    .journey-image {
        height: 300px;
    }
}
        .mask-wipe {
            clip-path: inset(0 100% 0 0);
            transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1);
        }
        .mask-wipe.active {
            clip-path: inset(0 0 0 0);
        }

        /* --- Header Styling --- */
        .nav-scrolled {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 1rem 5% !important;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

        /* --- Horizontal Journey Logic --- */
        #journey-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 400vw;
            height: 100vh;
            display: flex;
            transition: transform 1.2s cubic-bezier(0.85, 0, 0.15, 1);
            z-index: 10;
            pointer-events: none;
            opacity: 0;
        }
        #journey-wrapper.active {
            pointer-events: all;
            opacity: 1;
        }
.journey-panel {
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 8vw; /* use viewport padding instead of % */
}
        /* --- Custom UI --- */
        .btn-pulse {
            animation: pulse-glow 2s infinite;
        }
        @keyframes pulse-glow {
            0% { box-shadow: 0 0 0 0 rgba(255, 231, 151, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(255, 231, 151, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 231, 151, 0); }
        }

        .search-overlay {
            position: fixed;
            inset: 0;
            background: var(--teal);
            z-index: 2000;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .mobile-menu {
            position: fixed;
            inset: 0;
            background: var(--teal);
            z-index: 1500;
            transform: translateX(100%);
            transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        }
        .mobile-menu.open { transform: translateX(0); }

        .view { display: none; }
        .view.active-view { display: block; }
        
        /* Floating Blobs for Hero */
        .blob {
            position: absolute;
            background: linear-gradient(45deg, var(--peach), var(--yellow));
            filter: blur(80px);
            border-radius: 50%;
            opacity: 0.3;
            animation: float 20s infinite alternate;
        }
        @keyframes float {
            0% { transform: translate(0,0) scale(1); }
            100% { transform: translate(100px, 50px) scale(1.2); }
        }