{"id":9,"date":"2026-07-17T19:30:41","date_gmt":"2026-07-17T19:30:41","guid":{"rendered":"https:\/\/demowebdesign.live\/Aderemi\/?page_id=9"},"modified":"2026-07-31T01:20:56","modified_gmt":"2026-07-31T01:20:56","slug":"home","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/Aderemi\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9\" class=\"elementor elementor-9\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4c59878 e-flex e-con-boxed e-con e-parent\" data-id=\"4c59878\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0cc49b9 elementor-widget elementor-widget-html\" data-id=\"0cc49b9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        :root {\r\n            --navy: #15202F;\r\n            --navy-deep: #0D1520;\r\n            --gold: #D4AF37;\r\n            --bronze: #CD7F32;\r\n            --white: #ffffff;\r\n            --font-heading: 'Cormorant Garamond', serif;\r\n            --font-body: 'Inter', sans-serif;\r\n        }\r\n\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        \/* ========================================\r\n           HEADER\r\n        ======================================== *\/\r\n        .aderemi-header {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 111px;\r\n            z-index: 9999;\r\n            transition: all 0.4s ease;\r\n        }\r\n\r\n        \/* Glass effect on scroll *\/\r\n        .aderemi-header.scrolled {\r\n            background: rgba(13, 21, 32, 0.92);\r\n            backdrop-filter: blur(20px);\r\n            -webkit-backdrop-filter: blur(20px);\r\n            border-bottom: 1px solid rgba(212, 175, 55, 0.1);\r\n            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);\r\n        }\r\n\r\n        .aderemi-header-inner {\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n            height: 100%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            padding: 0 4%;\r\n        }\r\n\r\n        \/* --- Logo --- *\/\r\n       .aderemi-logo {\r\n    display: flex;\r\n    align-items: center;\r\n    text-decoration: none;\r\n    z-index: 100;\r\n}\r\n\r\n.aderemi-logo-img {\r\n    display: block;\r\n    width: 130px; \/* Adjust as needed *\/\r\n    max-width: 100%;\r\n    height: auto;\r\n    transition: transform 0.35s ease, opacity 0.35s ease;\r\n}\r\n\r\n.aderemi-logo:hover .aderemi-logo-img {\r\n    transform: scale(1.04);\r\n    opacity: 0.9;\r\n}\r\n\r\n        \/* --- Desktop Nav --- *\/\r\n        .aderemi-nav {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 0.5rem;\r\n        }\r\n\r\n        .aderemi-nav-link {\r\n            position: relative;\r\n            font-family: var(--font-body);\r\n            font-size: 0.75rem;\r\n            font-weight: 400;\r\n            text-transform: uppercase;\r\n            letter-spacing: 2.5px;\r\n            color: rgba(255, 255, 255, 0.7);\r\n            text-decoration: none;\r\n            padding: 0.6rem 1.3rem;\r\n            transition: color 0.4s ease;\r\n            opacity: 0;\r\n            animation: fadeSlideDown 0.6s ease forwards;\r\n        }\r\n\r\n        .aderemi-nav-link:nth-child(1) { animation-delay: 0.4s; }\r\n        .aderemi-nav-link:nth-child(3) { animation-delay: 0.5s; }\r\n        .aderemi-nav-link:nth-child(5) { animation-delay: 0.6s; }\r\n        .aderemi-nav-link:nth-child(7) { animation-delay: 0.7s; }\r\n\r\n        .aderemi-nav-link::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: 4px;\r\n            left: 50%;\r\n            transform: translateX(-50%) scaleX(0);\r\n            width: 20px;\r\n            height: 1px;\r\n            background: var(--gold);\r\n            transition: transform 0.4s ease;\r\n        }\r\n\r\n        .aderemi-nav-link:hover {\r\n            color: var(--white);\r\n        }\r\n\r\n        .aderemi-nav-link:hover::after {\r\n            transform: translateX(-50%) scaleX(1);\r\n        }\r\n\r\n        .aderemi-nav-link.active {\r\n            color: var(--gold);\r\n        }\r\n\r\n        .aderemi-nav-link.active::after {\r\n            transform: translateX(-50%) scaleX(1);\r\n        }\r\n\r\n        .aderemi-nav-dot {\r\n            width: 3px;\r\n            height: 3px;\r\n            border-radius: 50%;\r\n            background: rgba(212, 175, 55, 0.25);\r\n            opacity: 0;\r\n            animation: fadeIn 0.5s ease forwards;\r\n            animation-delay: 0.5s;\r\n        }\r\n\r\n        \/* --- CTA Button --- *\/\r\n        .aderemi-cta {\r\n            margin-left: 1.5rem;\r\n            padding: 0.7rem 1.8rem;\r\n            font-family: var(--font-body);\r\n            font-size: 0.7rem;\r\n            font-weight: 500;\r\n            text-transform: uppercase;\r\n            letter-spacing: 2px;\r\n            color: var(--white);\r\n            text-decoration: none;\r\n            border: 1px solid rgba(212, 175, 55, 0.4);\r\n            background: transparent;\r\n            position: relative;\r\n            overflow: hidden;\r\n            transition: all 0.5s ease;\r\n            opacity: 0;\r\n            animation: fadeSlideDown 0.6s ease forwards;\r\n            animation-delay: 0.9s;\r\n        }\r\n\r\n        .aderemi-cta::before {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 0;\r\n            background: var(--gold);\r\n            transition: height 0.5s ease;\r\n            z-index: 0;\r\n        }\r\n\r\n        .aderemi-cta span {\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        .aderemi-cta:hover::before {\r\n            height: 100%;\r\n        }\r\n\r\n        .aderemi-cta:hover {\r\n            color: var(--navy);\r\n            border-color: var(--gold);\r\n            box-shadow: 0 0 25px rgba(212, 175, 55, 0.25);\r\n        }\r\n\r\n        \/* --- Mobile Hamburger --- *\/\r\n        .aderemi-burger {\r\n            display: none;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            align-items: center;\r\n            width: 44px;\r\n            height: 44px;\r\n            background: none;\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n            cursor: pointer;\r\n            transition: border-color 0.3s;\r\n        }\r\n\r\n        .aderemi-burger:hover {\r\n            border-color: var(--gold);\r\n        }\r\n\r\n        .aderemi-burger-line {\r\n            display: block;\r\n            width: 20px;\r\n            height: 1.5px;\r\n            background: var(--white);\r\n            transition: all 0.4s ease;\r\n            transform-origin: center;\r\n        }\r\n\r\n        .aderemi-burger-line + .aderemi-burger-line {\r\n            margin-top: 5px;\r\n        }\r\n\r\n        .aderemi-burger.open .aderemi-burger-line:nth-child(1) {\r\n            transform: translateY(6.5px) rotate(45deg);\r\n        }\r\n\r\n        .aderemi-burger.open .aderemi-burger-line:nth-child(2) {\r\n            opacity: 0;\r\n            transform: scaleX(0);\r\n        }\r\n\r\n        .aderemi-burger.open .aderemi-burger-line:nth-child(3) {\r\n            transform: translateY(-6.5px) rotate(-45deg);\r\n        }\r\n\r\n        \/* --- Mobile Drawer --- *\/\r\n        .aderemi-drawer-overlay {\r\n            position: fixed;\r\n            inset: 0;\r\n            background: rgba(0, 0, 0, 0.6);\r\n            z-index: 9998;\r\n            opacity: 0;\r\n            pointer-events: none;\r\n            transition: opacity 0.5s ease;\r\n        }\r\n\r\n        .aderemi-drawer-overlay.open {\r\n            opacity: 1;\r\n            pointer-events: auto;\r\n        }\r\n\r\n        .aderemi-drawer {\r\n            position: fixed;\r\n            top: 0;\r\n            right: 0;\r\n            width: 100%;\r\n            max-width: 420px;\r\n            height: 100vh;\r\n            background: rgba(13, 21, 32, 0.97);\r\n            backdrop-filter: blur(30px);\r\n            -webkit-backdrop-filter: blur(30px);\r\n            z-index: 9998;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            align-items: center;\r\n            padding: 4rem 2rem;\r\n            transform: translateX(100%);\r\n            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n            border-left: 1px solid rgba(212, 175, 55, 0.08);\r\n        }\r\n\r\n        .aderemi-drawer.open {\r\n            transform: translateX(0);\r\n        }\r\n\r\n        .aderemi-drawer-link {\r\n            display: block;\r\n            font-family: var(--font-heading);\r\n            font-size: 2.5rem;\r\n            font-weight: 400;\r\n            color: rgba(255, 255, 255, 0.5);\r\n            text-decoration: none;\r\n            padding: 0.8rem 0;\r\n            text-align: center;\r\n            transition: all 0.4s ease;\r\n        }\r\n\r\n        .aderemi-drawer-link::after {\r\n            content: '';\r\n            display: block;\r\n            width: 0;\r\n            height: 1px;\r\n            background: var(--gold);\r\n            margin: 0.3rem auto 0;\r\n            transition: width 0.4s ease;\r\n        }\r\n\r\n        .aderemi-drawer-link:hover {\r\n            color: var(--gold);\r\n        }\r\n\r\n        .aderemi-drawer-link:hover::after {\r\n            width: 40px;\r\n        }\r\n\r\n        .aderemi-drawer-link.active {\r\n            color: var(--gold);\r\n        }\r\n\r\n        .aderemi-drawer-cta {\r\n            margin-top: 2.5rem;\r\n            padding: 1rem 3rem;\r\n            font-family: var(--font-body);\r\n            font-size: 0.75rem;\r\n            font-weight: 500;\r\n            text-transform: uppercase;\r\n            letter-spacing: 3px;\r\n            color: var(--navy);\r\n            background: var(--gold);\r\n            text-decoration: none;\r\n            display: inline-block;\r\n            transition: all 0.4s ease;\r\n        }\r\n\r\n        .aderemi-drawer-cta:hover {\r\n            box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        .aderemi-drawer-footer {\r\n            margin-top: 3rem;\r\n            text-align: center;\r\n            font-family: var(--font-heading);\r\n            font-size: 1.2rem;\r\n            color: rgba(212, 175, 55, 0.4);\r\n            transform: rotate(-3deg);\r\n        }\r\n\r\n        \/* ========================================\r\n           ANIMATIONS\r\n        ======================================== *\/\r\n        @keyframes fadeSlideLeft {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateX(-30px);\r\n            }\r\n            to {\r\n                opacity: 1;\r\n                transform: translateX(0);\r\n            }\r\n        }\r\n\r\n        @keyframes fadeSlideDown {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateY(-15px);\r\n            }\r\n            to {\r\n                opacity: 1;\r\n                transform: translateY(0);\r\n            }\r\n        }\r\n\r\n        @keyframes fadeIn {\r\n            from { opacity: 0; }\r\n            to { opacity: 1; }\r\n        }\r\n\r\n        \/* ========================================\r\n           RESPONSIVE\r\n        ======================================== *\/\r\n        @media (max-width: 900px) {\r\n            .aderemi-nav,\r\n            .aderemi-nav-dot,\r\n            .aderemi-cta {\r\n                display: none !important;\r\n            }\r\n\r\n            .aderemi-burger {\r\n                display: flex;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .aderemi-logo-name {\r\n                font-size: 1.1rem;\r\n            }\r\n\r\n            .aderemi-logo-tagline {\r\n                font-size: 0.5rem;\r\n                letter-spacing: 2px;\r\n            }\r\n\r\n            .aderemi-drawer-link {\r\n                font-size: 2rem;\r\n            }\r\n        }\r\n    <\/style>\r\n<base target=\"_blank\">\r\n<\/head>\r\n<body>\r\n\r\n    <!-- ==================== HEADER ==================== -->\r\n    <header class=\"aderemi-header\" id=\"aderemiHeader\">\r\n        <div class=\"aderemi-header-inner\">\r\n\r\n            <!-- Logo -->\r\n           <a href=\"#\" class=\"aderemi-logo\">\r\n    <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/Aderemi\/wp-content\/uploads\/2026\/07\/Aderemi-Logo-White.png\" alt=\"Aderemi Author Logo\" class=\"aderemi-logo-img\">\r\n<\/a>\r\n\r\n            <!-- Desktop Nav -->\r\n            <nav class=\"aderemi-nav\">\r\n                <a href=\"https:\/\/demowebdesign.live\/Aderemi\/\" class=\"aderemi-nav-link active\">Home<\/a>\r\n                <div class=\"aderemi-nav-dot\"><\/div>\r\n                <a href=\"https:\/\/demowebdesign.live\/Aderemi\/index.php\/about\/\" class=\"aderemi-nav-link\">About<\/a>\r\n                <div class=\"aderemi-nav-dot\"><\/div>\r\n                <a href=\"https:\/\/demowebdesign.live\/Aderemi\/index.php\/books\/\" class=\"aderemi-nav-link\">Books<\/a>\r\n                <div class=\"aderemi-nav-dot\"><\/div>\r\n                <a href=\"https:\/\/demowebdesign.live\/Aderemi\/index.php\/contact\/\" class=\"aderemi-nav-link\">Contact<\/a>\r\n                <!--<a href=\"#buy\" class=\"aderemi-cta\"><span>Buy the Book<\/span><\/a>-->\r\n            <\/nav>\r\n\r\n            <!-- Mobile Burger -->\r\n            <button class=\"aderemi-burger\" id=\"aderemiBurger\" aria-label=\"Open menu\">\r\n                <span class=\"aderemi-burger-line\"><\/span>\r\n                <span class=\"aderemi-burger-line\"><\/span>\r\n                <span class=\"aderemi-burger-line\"><\/span>\r\n            <\/button>\r\n        <\/div>\r\n    <\/header>\r\n\r\n    <!-- Mobile Drawer Overlay -->\r\n    <div class=\"aderemi-drawer-overlay\" id=\"aderemiOverlay\"><\/div>\r\n\r\n    <!-- Mobile Drawer -->\r\n    <nav class=\"aderemi-drawer\" id=\"aderemiDrawer\">\r\n        <a href=\"https:\/\/demowebdesign.live\/Aderemi\/\" class=\"aderemi-drawer-link active\">Home<\/a>\r\n        <a href=\"https:\/\/demowebdesign.live\/Aderemi\/index.php\/about\/\" class=\"aderemi-drawer-link\">About<\/a>\r\n        <a href=\"https:\/\/demowebdesign.live\/Aderemi\/index.php\/books\/\" class=\"aderemi-drawer-link\">Books<\/a>\r\n        <a href=\"https:\/\/demowebdesign.live\/Aderemi\/index.php\/contact\/\" class=\"aderemi-drawer-link\">Contact<\/a>\r\n        <!--<a href=\"#buy\" class=\"aderemi-drawer-cta\">Buy the Book<\/a>-->\r\n        <div class=\"aderemi-drawer-footer\">\r\n            every story matters\r\n        <\/div>\r\n    <\/nav>\r\n\r\n    <script>\r\n        \/* --- Scroll Effect --- *\/\r\n        (function() {\r\n            const header = document.getElementById('aderemiHeader');\r\n            let ticking = false;\r\n\r\n            function updateHeader() {\r\n                if (window.scrollY > 50) {\r\n                    header.classList.add('scrolled');\r\n                } else {\r\n                    header.classList.remove('scrolled');\r\n                }\r\n                ticking = false;\r\n            }\r\n\r\n            window.addEventListener('scroll', function() {\r\n                if (!ticking) {\r\n                    window.requestAnimationFrame(updateHeader);\r\n                    ticking = true;\r\n                }\r\n            });\r\n        })();\r\n\r\n        \/* --- Mobile Drawer --- *\/\r\n        (function() {\r\n            const burger = document.getElementById('aderemiBurger');\r\n            const drawer = document.getElementById('aderemiDrawer');\r\n            const overlay = document.getElementById('aderemiOverlay');\r\n\r\n            function toggleDrawer() {\r\n                burger.classList.toggle('open');\r\n                drawer.classList.toggle('open');\r\n                overlay.classList.toggle('open');\r\n                document.body.style.overflow = drawer.classList.contains('open') ? 'hidden' : '';\r\n            }\r\n\r\n            burger.addEventListener('click', toggleDrawer);\r\n            overlay.addEventListener('click', toggleDrawer);\r\n\r\n            document.querySelectorAll('.aderemi-drawer-link, .aderemi-drawer-cta').forEach(function(link) {\r\n                link.addEventListener('click', function() {\r\n                    if (drawer.classList.contains('open')) toggleDrawer();\r\n                });\r\n            });\r\n        })();\r\n    <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5b1846c e-con-full e-flex e-con e-parent\" data-id=\"5b1846c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3d7e7f5 elementor-widget elementor-widget-html\" data-id=\"3d7e7f5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t    <!-- Google Fonts -->\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@300;400;500;600&family=La+Belle+Aurore&display=swap\" rel=\"stylesheet\">\r\n    \r\n    <!-- GSAP Libraries -->\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n\r\n    <style>\r\n        \/* CSS Reset & Variables *\/\r\n        :root {\r\n            --color-navy: #15202F;\r\n            --color-ivory: #F8F6F2;\r\n            --color-gold: #D4AF37;\r\n            --color-bronze: #CD7F32;\r\n            --color-bronze-glow: rgba(205, 127, 50, 0.4);\r\n            --color-white: #ffffff;\r\n            --font-heading: 'Cormorant Garamond', serif;\r\n            --font-body: 'Inter', sans-serif;\r\n            --font-handwriting: 'La Belle Aurore', cursive;\r\n        }\r\n\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        body {\r\n            font-family: var(--font-body);\r\n            background-color: var(--color-navy);\r\n            color: var(--color-white);\r\n            overflow-x: hidden;\r\n            scroll-behavior: smooth;\r\n            cursor: none; \/* Custom cursor *\/\r\n        }\r\n\r\n        \/* Custom Cursor *\/\r\n        .cursor {\r\n            width: 15px;\r\n            height: 15px;\r\n            background: var(--color-gold);\r\n            border-radius: 50%;\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            pointer-events: none;\r\n            z-index: 99999;\r\n            transition: transform 0.2s ease, width 0.3s ease, height 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;\r\n            transform: translate(-50%, -50%);\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);\r\n        }\r\n        .cursor svg {\r\n            width: 20px;\r\n            height: 20px;\r\n            fill: var(--color-navy);\r\n            opacity: 0;\r\n            transition: opacity 0.3s ease;\r\n            transform: rotate(-15deg);\r\n        }\r\n        .cursor.hovering {\r\n            width: 50px;\r\n            height: 50px;\r\n            background: rgba(212, 175, 55, 0.95);\r\n            box-shadow: 0 0 20px rgba(212, 175, 55, 0.8);\r\n            border: none;\r\n        }\r\n        .cursor.hovering svg {\r\n            opacity: 1;\r\n        }\r\n\r\n        \/* Utility Classes *\/\r\n        .text-handwriting {\r\n            font-family: var(--font-handwriting);\r\n            font-size: 2rem;\r\n            color: var(--color-gold);\r\n            transform: rotate(-5deg);\r\n        }\r\n\r\n        \/* ================= SECTION 1: HERO ================= *\/\r\n        .hero {\r\n            position: relative;\r\n            width: 100vw;\r\n            height: 100vh;\r\n            display: flex;\r\n            align-items: center;\r\n            overflow: hidden;\r\n            background-color: var(--color-navy);\r\n        }\r\n\r\n        \/* Background Layers *\/\r\n        .hero-bg-media {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            z-index: 1;\r\n        }\r\n        .hero-bg-media video, \r\n        .hero-bg-media img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            transition: opacity 1.5s ease-in-out;\r\n        }\r\n        .hero-overlay {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(135deg, rgba(21, 32, 47, 0.95) 0%, rgba(21, 32, 47, 0.7) 50%, rgba(21, 32, 47, 0.85) 100%);\r\n            z-index: 2;\r\n        }\r\n\r\n        \/* Map Coordinates & Decorative *\/\r\n        .map-coordinates {\r\n            position: absolute;\r\n            top: 10%;\r\n            right: 5%;\r\n            font-family: monospace;\r\n            color: rgba(255, 255, 255, 0.15);\r\n            font-size: 0.8rem;\r\n            z-index: 3;\r\n            letter-spacing: 2px;\r\n            text-align: right;\r\n        }\r\n        \r\n        .particles-container {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            z-index: 3;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .particle {\r\n            position: absolute;\r\n            background: rgba(255,255,255,0.3);\r\n            border-radius: 50%;\r\n        }\r\n\r\n        \/* Content Layout *\/\r\n        .hero-content-wrapper {\r\n            position: relative;\r\n            width: 100%;\r\n            max-width: 1600px;\r\n            margin: 0 auto;\r\n            padding: 0 5%;\r\n            height: 100%;\r\n            z-index: 10;\r\n        }\r\n\r\n        \/* Typography *\/\r\n        .hero-text-area {\r\n            position: absolute;\r\n            bottom: 12%;\r\n            left: 5%;\r\n            max-width: 700px;\r\n        }\r\n\r\n        .hero-title {\r\n            font-family: var(--font-heading);\r\n            font-size: clamp(2.5rem, 4vw, 4.5rem);\r\n            line-height: 1.1;\r\n            font-weight: 500;\r\n            color: var(--color-white);\r\n            margin-bottom: 1.5rem;\r\n            text-shadow: 0 10px 30px rgba(0,0,0,0.5);\r\n            position: relative;\r\n        }\r\n\r\n        .hero-title span {\r\n            display: block;\r\n            color: var(--color-gold);\r\n            font-style: italic;\r\n        }\r\n\r\n        .hero-subtitle {\r\n            font-family: var(--font-body);\r\n            font-size: 1.1rem;\r\n            line-height: 1.6;\r\n            font-weight: 300;\r\n            color: rgba(255,255,255,0.8);\r\n            margin-bottom: 3rem;\r\n            max-width: 500px;\r\n        }\r\n\r\n        \/* Book Display *\/\r\n        .hero-book-area{\r\n    position:absolute;\r\n    top:50%;\r\n    right:15%;\r\n    transform:translateY(-50%);\r\n    width:350px;\r\n    z-index:10;\r\n}\r\n\r\n.hero-book-image{\r\n    width:100%;\r\n    height:auto;\r\n    display:block;\r\n    object-fit:contain;\r\n    filter:drop-shadow(0 25px 50px rgba(0,0,0,.45));\r\n    transition:transform .6s ease, filter .6s ease;\r\n    transform-origin:center;\r\n}\r\n\r\n.hero-book-area:hover .hero-book-image{\r\n    transform:translateY(-10px) scale(1.04) rotate(-2deg);\r\n    filter:drop-shadow(0 35px 70px rgba(0,0,0,.6));\r\n}\r\n\r\n        .hero-quote {\r\n            position: absolute;\r\n            top: 20%;\r\n            right: 5%;\r\n            width: 200px;\r\n            font-family: var(--font-heading);\r\n            font-style: italic;\r\n            font-size: 1.5rem;\r\n            color: rgba(255,255,255,0.6);\r\n            border-left: 2px solid var(--color-gold);\r\n            padding-left: 1rem;\r\n        }\r\n\r\n        .signature {\r\n            position: absolute;\r\n            bottom: -30px;\r\n            right: 40px;\r\n            opacity: 0.7;\r\n        }\r\n\r\n        \/* Buttons & Interactions *\/\r\n        .hero-buttons {\r\n            display: flex;\r\n            gap: 1.5rem;\r\n        }\r\n\r\n        .aderemi-btn {\r\n            padding: 1rem 2.5rem;\r\n            font-family: var(--font-body);\r\n            text-transform: uppercase;\r\n            letter-spacing: 2px;\r\n            font-size: 0.85rem;\r\n            font-weight: 500;\r\n            text-decoration: none;\r\n            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n            position: relative;\r\n            overflow: hidden;\r\n            display: inline-block;\r\n            cursor: pointer;\r\n            z-index: 1;\r\n            \/* Reset Elementor defaults *\/\r\n            border-radius: 0;\r\n            line-height: 1;\r\n        }\r\n\r\n        .aderemi-btn::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 0;\r\n            background: var(--color-gold);\r\n            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n            z-index: -1;\r\n        }\r\n\r\n        .aderemi-btn:hover::after {\r\n            height: 100%;\r\n        }\r\n\r\n        .btn-primary {\r\n            background: transparent;\r\n            color: var(--color-white);\r\n            border: 1px solid var(--color-gold);\r\n            box-shadow: 0 0 20px var(--color-bronze-glow);\r\n        }\r\n\r\n        .btn-primary:hover {\r\n            color: var(--color-navy);\r\n            box-shadow: 0 0 30px rgba(212, 175, 55, 0.6);\r\n        }\r\n\r\n        .btn-secondary {\r\n            background: transparent;\r\n            color: var(--color-white);\r\n            border: 1px solid rgba(255,255,255,0.2);\r\n        }\r\n        \r\n        .btn-secondary:hover {\r\n            border-color: var(--color-white);\r\n            color: var(--color-navy);\r\n        }\r\n\r\n        \/* Media Toggle *\/\r\n        .media-toggle {\r\n            position: absolute;\r\n            bottom: 5%;\r\n            right: 5%;\r\n            display: flex;\r\n            gap: 1rem;\r\n            z-index: 20;\r\n            align-items: center;\r\n        }\r\n        \r\n        .media-toggle span {\r\n            font-size: 0.75rem;\r\n            text-transform: uppercase;\r\n            letter-spacing: 2px;\r\n            color: rgba(255,255,255,0.5);\r\n            cursor: pointer;\r\n            transition: color 0.3s;\r\n        }\r\n        \r\n        .media-toggle span.active {\r\n            color: var(--color-gold);\r\n        }\r\n\r\n        \/* Scroll Indicator *\/\r\n        .scroll-indicator {\r\n            position: absolute;\r\n            bottom: 40px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            gap: 10px;\r\n            z-index: 10;\r\n        }\r\n        \r\n        .scroll-text {\r\n            font-size: 0.7rem;\r\n            text-transform: uppercase;\r\n            letter-spacing: 3px;\r\n            color: rgba(255,255,255,0.5);\r\n            writing-mode: vertical-rl;\r\n        }\r\n        \r\n        .scroll-line {\r\n            width: 1px;\r\n            height: 60px;\r\n            background: rgba(255,255,255,0.2);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .scroll-line::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: -100%;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: var(--color-gold);\r\n            animation: scrollLine 2s infinite cubic-bezier(0.645, 0.045, 0.355, 1);\r\n        }\r\n\r\n        @keyframes scrollLine {\r\n            0% { top: -100%; }\r\n            50% { top: 0%; }\r\n            100% { top: 100%; }\r\n        }\r\n\r\n        \/* Floating Travel Elements *\/\r\n        .floating-element {\r\n            position: absolute;\r\n            opacity: 0.08;\r\n            pointer-events: none;\r\n            z-index: 4;\r\n        }\r\n        .stamp-1 { top: 15%; left: 10%; width: 120px; transform: rotate(-15deg); }\r\n        .stamp-2 { bottom: 20%; right: 35%; width: 150px; transform: rotate(10deg); }\r\n        .route-line { top: 30%; right: 0; width: 40vw; }\r\n\r\n\r\n        \/* ================= SECTION 2: ABOUT THE BOOK ================= *\/\r\n        .about-section {\r\n            position: relative;\r\n            width: 100%;\r\n            min-height: 100vh;\r\n            background-color: var(--color-ivory);\r\n            color: var(--color-navy);\r\n            padding: 10rem 5%;\r\n            display: flex;\r\n            justify-content: center;\r\n            overflow: hidden;\r\n        }\r\n\r\n        \/* Subtle Background Texture *\/\r\n        .about-bg {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            opacity: 0.12;\r\n            background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'\/%3E%3C\/svg%3E\");\r\n            mix-blend-mode: multiply;\r\n            z-index: 1;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .about-container {\r\n            max-width: 1400px;\r\n            width: 100%;\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 8rem;\r\n            align-items: center;\r\n            z-index: 10;\r\n        }\r\n\r\n        \/* Layered Images Column *\/\r\n        .about-visuals {\r\n            position: relative;\r\n            height: 600px;\r\n            width: 100%;\r\n            perspective: 1200px;\r\n        }\r\n\r\n        .layered-card {\r\n            position: absolute;\r\n            background: #fff;\r\n            box-shadow: 0 15px 40px rgba(0,0,0,0.08);\r\n            padding: 2rem;\r\n            transition: transform 0.5s ease;\r\n        }\r\n\r\n        .journal-bg {\r\n            top: 5%;\r\n            left: 0;\r\n            width: 80%;\r\n            height: 80%;\r\n            background-color: #FDFBF7;\r\n            transform: rotate(-3deg);\r\n            z-index: 1;\r\n            \/* Torn edge effect simplified with border *\/\r\n            border: 1px solid #EAE5DB;\r\n        }\r\n        \r\n        .journal-lines {\r\n            width: 100%;\r\n            height: 100%;\r\n            background-image: repeating-linear-gradient(transparent, transparent 31px, #EAE5DB 31px, #EAE5DB 32px);\r\n            opacity: 0.5;\r\n        }\r\n\r\n        .journal-note {\r\n            position: absolute;\r\n            top: 15%;\r\n            right: 15%;\r\n            font-family: var(--font-handwriting);\r\n            font-size: 1.6rem;\r\n            font-weight: bold;\r\n            color: var(--color-navy);\r\n            transform: rotate(4deg);\r\n            z-index: 2;\r\n        }\r\n\r\n        .about-book-cover {\r\n            position: absolute;\r\n            top: 15%;\r\n            right: 5%;\r\n            width: 65%;\r\n            height: auto;\r\n            aspect-ratio: 2\/3;\r\n            background: url('Book-mockup-5.jpg') center\/cover;\r\n            box-shadow: 20px 20px 50px rgba(0,0,0,0.2);\r\n            z-index: 3;\r\n            transform: rotate(2deg) translateZ(50px);\r\n            transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        }\r\n        \r\n        .about-book-cover img {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: block;\r\n    object-fit: cover;\r\n    border-radius: 8px;\r\n    box-shadow: 20px 20px 50px rgba(0,0,0,0.2);\r\n}\r\n\r\n        \r\n        .about-visuals:hover .about-book-cover {\r\n            transform: rotate(0deg) translateZ(80px) scale(1.05);\r\n            box-shadow: 30px 30px 60px rgba(0,0,0,0.3);\r\n        }\r\n\r\n        .photo-card {\r\n            bottom: -5%;\r\n            left: 10%;\r\n            width: 40%;\r\n            aspect-ratio: 1;\r\n            background: #e0e0e0;\r\n            padding: 10px 10px 40px 10px;\r\n            transform: rotate(-8deg);\r\n            z-index: 4;\r\n            box-shadow: 5px 15px 30px rgba(0,0,0,0.15);\r\n        }\r\n        .photo-card-inner {\r\n            width: 100%;\r\n            height: 100%;\r\n            background: #ccc; \/* Placeholder for author photo *\/\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: #666;\r\n            font-size: 0.8rem;\r\n        }\r\n        \r\n        .photo-card-inner{\r\n    width:100%;\r\n    height:100%;\r\n    overflow:hidden;\r\n}\r\n\r\n.photo-card-inner img{\r\n    width:100%;\r\n    height:100%;\r\n    display:block;\r\n    object-fit:cover;\r\n    object-position:center top; \r\n}\r\n\r\n        \/* Content Column *\/\r\n        .about-content {\r\n            position: relative;\r\n            padding-right: 2rem;\r\n        }\r\n\r\n        .section-subtitle {\r\n            font-family: var(--font-body);\r\n            text-transform: uppercase;\r\n            letter-spacing: 4px;\r\n            font-size: 0.8rem;\r\n            color: var(--color-bronze);\r\n            margin-bottom: 1.5rem;\r\n            display: block;\r\n        }\r\n\r\n        .gold-divider {\r\n            width: 60px;\r\n            height: 2px;\r\n            background: var(--color-gold);\r\n            margin-bottom: 2rem;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .gold-divider::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, transparent, #fff, transparent);\r\n            animation: shimmer 3s infinite;\r\n        }\r\n        @keyframes shimmer {\r\n            100% { left: 100%; }\r\n        }\r\n\r\n        .about-title {\r\n            font-family: var(--font-heading);\r\n            font-size: 4rem;\r\n            line-height: 1.1;\r\n            color: var(--color-navy);\r\n            margin-bottom: 2.5rem;\r\n            font-weight: 500;\r\n        }\r\n\r\n        .about-text {\r\n            font-size: 1.4rem;\r\n            line-height: 1.8;\r\n            font-family: var(--font-heading);\r\n            color: var(--color-navy);\r\n            margin-bottom: 1.5rem;\r\n            font-weight: 400;\r\n        }\r\n\r\n        .about-text:first-of-type {\r\n            font-size: 1.4rem;\r\n            font-family: var(--font-heading);\r\n            color: var(--color-navy);\r\n            line-height: 1.5;\r\n        }\r\n\r\n        .floating-quote-mark {\r\n            position: absolute;\r\n            top: -50px;\r\n            left: -30px;\r\n            font-family: var(--font-heading);\r\n            font-size: 15rem;\r\n            color: rgba(212, 175, 55, 0.1);\r\n            line-height: 1;\r\n            z-index: -1;\r\n            pointer-events: none;\r\n        }\r\n\r\n        \/* Responsive *\/\r\n        \/* ==========================\r\n   Tablet\r\n========================== *\/\r\n@media (max-width: 1024px) {\r\n\r\n    .hero{\r\n        padding-top: 200px !important;\r\n        height:auto;\r\n        padding:120px 0 80px;\r\n    }\r\n\r\n    .hero-content-wrapper{\r\n        padding:0 40px ;\r\n    }\r\n\r\n    .hero-text-area{\r\n        position:relative;\r\n        left:0;\r\n        bottom:0;\r\n        max-width:100%;\r\n        padding-right:320px;\r\n    }\r\n\r\n    .hero-title{\r\n        font-size:3.8rem;\r\n    }\r\n\r\n    .hero-book-area{\r\n        width:260px;\r\n        height:390px;\r\n        right:40px;\r\n    }\r\n\r\n    .hero-quote{\r\n        display:none;\r\n    }\r\n\r\n    .map-coordinates{\r\n        display:none;\r\n    }\r\n\r\n    .about-container{\r\n        grid-template-columns:1fr;\r\n        gap:60px;\r\n    }\r\n\r\n    .about-content{\r\n        order:1;\r\n        padding-right:0;\r\n    }\r\n\r\n    .about-visuals{\r\n        order:2;\r\n        max-width:600px;\r\n        width:100%;\r\n        margin:auto;\r\n        height:520px;\r\n    }\r\n\r\n    .floating-quote-mark{\r\n        display:none;\r\n    }\r\n}\r\n\r\n\r\n\/* ==========================\r\n   Mobile\r\n========================== *\/\r\n@media (max-width:767px){\r\n\r\n    body{\r\n        cursor:auto;\r\n    }\r\n\r\n    .cursor{\r\n        display:none;\r\n    }\r\n\r\n    .hero{\r\n        min-height:auto;\r\n        height:auto;\r\n        padding:120px 20px 80px;\r\n    }\r\n\r\n    .hero-content-wrapper{\r\n        padding:0;\r\n        display:flex;\r\n        flex-direction:column;\r\n        align-items:center;\r\n        text-align:center;\r\n    }\r\n\r\n    .hero-text-area{\r\n        position:relative;\r\n        left:auto;\r\n        bottom:auto;\r\n        right:auto;\r\n        max-width:100%;\r\n        padding:0;\r\n    }\r\n\r\n    .hero-title{\r\n        font-size:2.6rem;\r\n        line-height:1.15;\r\n        margin-bottom:20px;\r\n    }\r\n\r\n    .hero-subtitle{\r\n        font-size:1rem;\r\n        max-width:100%;\r\n        margin-bottom:35px;\r\n    }\r\n\r\n    .hero-book-area{\r\n        position:relative;\r\n        top:auto;\r\n        right:auto;\r\n        transform:none;\r\n        width:220px;\r\n        height:330px;\r\n        margin:40px auto;\r\n    }\r\n\r\n    .hero-buttons{\r\n        flex-direction:column;\r\n        width:100%;\r\n        gap:15px;\r\n    }\r\n\r\n    .aderemi-btn{\r\n        width:100%;\r\n        text-align:center;\r\n    }\r\n\r\n    .hero-quote,\r\n    .map-coordinates,\r\n    .scroll-indicator,\r\n    .media-toggle,\r\n    .particles-container,\r\n    .floating-element{\r\n        display:none;\r\n    }\r\n\r\n    .about-section{\r\n        padding:80px 20px;\r\n    }\r\n\r\n    .about-container{\r\n        gap:40px;\r\n    }\r\n\r\n    .about-title{\r\n        font-size:2.3rem;\r\n        margin-bottom:20px;\r\n    }\r\n\r\n    .about-text,\r\n    .about-text:first-of-type{\r\n        font-size:1.05rem;\r\n        line-height:1.8;\r\n    }\r\n\r\n    .about-visuals{\r\n        height:380px;\r\n    }\r\n\r\n    .journal-bg{\r\n        width:90%;\r\n    }\r\n\r\n    .about-book-cover{\r\n        width:68%;\r\n    }\r\n\r\n    .photo-card{\r\n        width:42%;\r\n    }\r\n\r\n    .journal-note,\r\n    .floating-quote-mark{\r\n        display:none;\r\n    }\r\n}\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <!-- Custom Cursor -->\r\n    <div class=\"cursor\" id=\"customCursor\">\r\n        <!-- Book\/Quill SVG for hover state -->\r\n        <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n            <path d=\"M21 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h15v-2H6v-2h15V2zM6 18c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1s-1 .45-1 1v12c0 .55.45 1 1 1z\"\/>\r\n        <\/svg>\r\n    <\/div>\r\n\r\n    <!-- SECTION 1: HERO -->\r\n    <section class=\"hero\" id=\"hero\">\r\n        \r\n        <!-- Background Media -->\r\n        <div class=\"hero-bg-media\">\r\n            <!-- Placeholder for video, fallback to dark color -->\r\n            <video id=\"heroVideo\" autoplay loop muted playsinline style=\"background: #111;\">\r\n                <source src=\"https:\/\/demowebdesign.live\/Aderemi\/wp-content\/uploads\/2026\/07\/0_Mountain_Winter_1280x720.mp4\" type=\"video\/mp4\">\r\n            <\/video>\r\n            <img decoding=\"async\" id=\"heroImage\" src=\"https:\/\/images.unsplash.com\/photo-1449844908441-8829872d2607?q=80&w=2070&auto=format&fit=crop\" alt=\"Cityscape\" style=\"opacity: 0;\">\r\n        <\/div>\r\n        <div class=\"hero-overlay\"><\/div>\r\n\r\n        <!-- Decorative Elements -->\r\n        <div class=\"particles-container\" id=\"particles\"><\/div>\r\n        <!--<div class=\"map-coordinates\">LAT 40.7128\u00b0 N<br>LON 74.0060\u00b0 W<\/div>-->\r\n        \r\n        <!-- SVGs for stamps and routes as placeholders -->\r\n        <!--<svg class=\"floating-element stamp-1\" viewBox=\"0 0 100 100\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\">-->\r\n        <!--    <circle cx=\"50\" cy=\"50\" r=\"45\" stroke-dasharray=\"5 5\" \/>-->\r\n        <!--    <text x=\"50\" y=\"45\" text-anchor=\"middle\" fill=\"#fff\" font-family=\"sans-serif\" font-size=\"12\">ARRIVED<\/text>-->\r\n        <!--    <text x=\"50\" y=\"65\" text-anchor=\"middle\" fill=\"#fff\" font-family=\"sans-serif\" font-size=\"10\">JFK<\/text>-->\r\n        <!--<\/svg>-->\r\n        <svg class=\"floating-element stamp-2\" viewBox=\"0 0 100 100\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\">\r\n            <rect x=\"10\" y=\"10\" width=\"80\" height=\"80\" stroke-dasharray=\"10 5\" \/>\r\n            <path d=\"M20 50 Q 50 20 80 50 T 80 50\" \/>\r\n        <\/svg>\r\n\r\n        <div class=\"hero-content-wrapper\">\r\n            \r\n            <!-- Text Area -->\r\n            <div class=\"hero-text-area\">\r\n                <h1 class=\"hero-title\">\r\n                    Every Journey<br>\r\n                    Changes You.\r\n                    <span>Every Story Deserves<br>to Be Told.<\/span>\r\n                <\/h1>\r\n                <p class=\"hero-subtitle\">\r\n                    A deeply personal memoir of leaving home, navigating America, facing hardship, embracing change, and discovering that resilience is built one step at a time.\r\n                <\/p>\r\n                <div class=\"hero-buttons\">\r\n                    <a href=\"#buy\" class=\"aderemi-btn btn-primary magnetic\" data-cursor=\"hover\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">Buy the Book<\/a>\r\n                    <a href=\"#chapter\" class=\"aderemi-btn btn-secondary magnetic\" data-cursor=\"hover\" style=\"translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">LEARN MORE<\/a>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Floating Book -->\r\n            <div class=\"hero-book-area\">\r\n    <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/Aderemi\/wp-content\/uploads\/2026\/07\/aderemi-book-mockup.png\" alt=\"Book Cover\" class=\"hero-book-image\">\r\n<\/div>\r\n\r\n            <!-- Floating Quote -->\r\n            <!--<div class=\"hero-quote\">-->\r\n            <!--    \"Winter didn't break you. It shaped you.\"-->\r\n            <!--    <div class=\"text-handwriting signature\">Aderemi<\/div>-->\r\n            <!--<\/div>-->\r\n\r\n        <\/div>\r\n\r\n        <!-- Media Toggle -->\r\n        <div class=\"media-toggle\">\r\n            <span id=\"btnVideo\" class=\"active\" data-cursor=\"hover\">Video<\/span>\r\n            <span style=\"color:rgba(255,255,255,0.3)\">|<\/span>\r\n            <span id=\"btnImage\" data-cursor=\"hover\">Image<\/span>\r\n        <\/div>\r\n\r\n        <!-- Scroll Indicator -->\r\n        <div class=\"scroll-indicator\">\r\n            <div class=\"scroll-text\">Scroll<\/div>\r\n            <div class=\"scroll-line\"><\/div>\r\n        <\/div>\r\n\r\n    <\/section>\r\n\r\n    <!-- SECTION 2: ABOUT THE BOOK -->\r\n    <section class=\"about-section\" id=\"about\">\r\n        <div class=\"about-bg\"><\/div>\r\n        \r\n        <div class=\"about-container\">\r\n            \r\n            <!-- Visuals -->\r\n            <div class=\"about-visuals\">\r\n                \r\n                <div class=\"layered-card journal-bg\">\r\n                    <div class=\"journal-lines\"><\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"journal-note\">\r\n                    Begin again...\r\n                <\/div>\r\n                \r\n                <div class=\"layered-card photo-card\">\r\n                    <div class=\"photo-card-inner\">\r\n    <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/Aderemi\/wp-content\/uploads\/2026\/07\/author.png\" alt=\"Aderemi Ogunsuyi\">\r\n<\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"about-book-cover\" id=\"aboutBook\">\r\n    <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/Aderemi\/wp-content\/uploads\/2026\/07\/wmremove-transformed-1.png\" alt=\"Living in America Book Cover\">\r\n<\/div>\r\n            <\/div>\r\n\r\n            <!-- Content -->\r\n            <div class=\"about-content\">\r\n                <div class=\"floating-quote-mark\">\u201c<\/div>\r\n                \r\n                <span class=\"section-subtitle\">The Story Behind the Journey<\/span>\r\n                <div class=\"gold-divider\"><\/div>\r\n                \r\n                <h2 class=\"about-title\">Living in America is more than a memoir.<\/h2>\r\n                \r\n                <p class=\"about-text\">\r\n                    It is an honest reflection on immigration, resilience, identity, sacrifice, and hope.\r\n                <\/p>\r\n                \r\n                <p class=\"about-text\">\r\n                    Through humor, personal struggles, unexpected cultural lessons, and moments of transformation, Aderemi Ogunsuyi shares what it truly means to begin again in a new country.\r\n                <\/p>\r\n                \r\n                <p class=\"about-text\">\r\n                    This is not only his story it is the story of countless immigrants learning how to build a life while holding onto the people they once were.\r\n                <\/p>\r\n                \r\n               \r\n                \r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <script>\r\n        \/\/ Custom Cursor Logic\r\n        const cursor = document.getElementById('customCursor');\r\n        const hoverElements = document.querySelectorAll('[data-cursor=\"hover\"], .btn');\r\n\r\n        window.addEventListener('mousemove', (e) => {\r\n            gsap.to(cursor, {\r\n                x: e.clientX,\r\n                y: e.clientY,\r\n                duration: 0.1,\r\n                ease: \"power2.out\"\r\n            });\r\n        });\r\n\r\n        hoverElements.forEach(el => {\r\n            el.addEventListener('mouseenter', () => cursor.classList.add('hovering'));\r\n            el.addEventListener('mouseleave', () => cursor.classList.remove('hovering'));\r\n        });\r\n\r\n        \/\/ Magnetic Buttons\r\n        const magnetics = document.querySelectorAll('.magnetic');\r\n        magnetics.forEach(btn => {\r\n            btn.addEventListener('mousemove', function(e) {\r\n                const rect = this.getBoundingClientRect();\r\n                const x = e.clientX - rect.left - rect.width \/ 2;\r\n                const y = e.clientY - rect.top - rect.height \/ 2;\r\n                \r\n                gsap.to(this, {\r\n                    x: x * 0.3,\r\n                    y: y * 0.3,\r\n                    duration: 0.3,\r\n                    ease: \"power2.out\"\r\n                });\r\n            });\r\n            \r\n            btn.addEventListener('mouseleave', function() {\r\n                gsap.to(this, {\r\n                    x: 0,\r\n                    y: 0,\r\n                    duration: 0.5,\r\n                    ease: \"elastic.out(1, 0.3)\"\r\n                });\r\n            });\r\n        });\r\n\r\n        \/\/ Media Toggle Logic\r\n        const btnVideo = document.getElementById('btnVideo');\r\n        const btnImage = document.getElementById('btnImage');\r\n        const video = document.getElementById('heroVideo');\r\n        const image = document.getElementById('heroImage');\r\n\r\n        let intervalMode = 'video';\r\n        let crossfadeInterval;\r\n\r\n        function setMode(mode) {\r\n            if(mode === 'video') {\r\n                video.style.opacity = '0.4';\r\n                image.style.opacity = '0';\r\n                btnVideo.classList.add('active');\r\n                btnImage.classList.remove('active');\r\n            } else {\r\n                video.style.opacity = '0';\r\n                image.style.opacity = '0.4';\r\n                btnImage.classList.add('active');\r\n                btnVideo.classList.remove('active');\r\n            }\r\n        }\r\n\r\n        \/\/ Initial crossfade every 10 seconds\r\n        crossfadeInterval = setInterval(() => {\r\n            intervalMode = intervalMode === 'video' ? 'image' : 'video';\r\n            setMode(intervalMode);\r\n        }, 10000);\r\n\r\n        btnVideo.addEventListener('click', () => {\r\n            clearInterval(crossfadeInterval);\r\n            setMode('video');\r\n        });\r\n\r\n        btnImage.addEventListener('click', () => {\r\n            clearInterval(crossfadeInterval);\r\n            setMode('image');\r\n        });\r\n\r\n        \/\/ Background Particles\r\n        const particlesContainer = document.getElementById('particles');\r\n        for(let i=0; i<50; i++) {\r\n            const particle = document.createElement('div');\r\n            particle.classList.add('particle');\r\n            const size = Math.random() * 3 + 1;\r\n            particle.style.width = size + 'px';\r\n            particle.style.height = size + 'px';\r\n            particle.style.left = Math.random() * 100 + '%';\r\n            particle.style.top = Math.random() * 100 + '%';\r\n            particle.style.opacity = Math.random() * 0.5;\r\n            particlesContainer.appendChild(particle);\r\n\r\n            \/\/ Animate particles\r\n            gsap.to(particle, {\r\n                y: `-=${Math.random() * 100 + 50}`,\r\n                x: `+=${(Math.random() - 0.5) * 50}`,\r\n                opacity: 0,\r\n                duration: Math.random() * 10 + 10,\r\n                repeat: -1,\r\n                ease: \"none\",\r\n                delay: Math.random() * -10\r\n            });\r\n        }\r\n\r\n        \/\/ GSAP Animations\r\n        gsap.registerPlugin(ScrollTrigger);\r\n\r\n        \/\/ Hero Initial Animations\r\n        const tlHero = gsap.timeline();\r\n        \r\n        \/\/ Use a slight delay to ensure Elementor DOM is ready\r\n        setTimeout(() => {\r\n            tlHero.from('.hero-title', {\r\n                y: 50,\r\n                opacity: 0,\r\n                duration: 1.5,\r\n                ease: \"power4.out\",\r\n                delay: 0.2\r\n            })\r\n            .from('.hero-subtitle', {\r\n                y: 30,\r\n                opacity: 0,\r\n                duration: 1,\r\n                ease: \"power3.out\"\r\n            }, \"-=1\")\r\n            .from('.hero-buttons .aderemi-btn', {\r\n                y: 20,\r\n                opacity: 0,\r\n                duration: 0.8,\r\n                stagger: 0.2,\r\n                ease: \"power3.out\"\r\n            }, \"-=0.8\")\r\n            .from('.hero-book-area', {\r\n                x: 50,\r\n                opacity: 0,\r\n                rotationY: 15,\r\n                duration: 1.5,\r\n                ease: \"power3.out\"\r\n            }, \"-=1.2\")\r\n            .from('.hero-quote', {\r\n                x: 20,\r\n                opacity: 0,\r\n                duration: 1,\r\n                ease: \"power2.out\"\r\n            }, \"-=1\")\r\n            .from('.floating-element', {\r\n                scale: 0.8,\r\n                opacity: 0,\r\n                duration: 2,\r\n                stagger: 0.3,\r\n                ease: \"power2.out\"\r\n            }, \"-=1.5\");\r\n        }, 300);\r\n\r\n        \/\/ Floating animation for the book\r\n        gsap.to('#heroBook', {\r\n            y: -15,\r\n            rotationX: 2,\r\n            rotationY: -2,\r\n            duration: 3,\r\n            repeat: -1,\r\n            yoyo: true,\r\n            ease: \"sine.inOut\"\r\n        });\r\n\r\n        \/\/ Parallax effects on scroll for Hero\r\n        gsap.to('.hero-text-area', {\r\n            y: 100,\r\n            opacity: 0,\r\n            ease: \"none\",\r\n            scrollTrigger: {\r\n                trigger: '.hero',\r\n                start: \"top top\",\r\n                end: \"bottom top\",\r\n                scrub: true\r\n            }\r\n        });\r\n        \r\n        gsap.to('.hero-book-area', {\r\n            y: 150,\r\n            ease: \"none\",\r\n            scrollTrigger: {\r\n                trigger: '.hero',\r\n                start: \"top top\",\r\n                end: \"bottom top\",\r\n                scrub: true\r\n            }\r\n        });\r\n\r\n        \/\/ About Section Animations\r\n        const tlAbout = gsap.timeline({\r\n            scrollTrigger: {\r\n                trigger: '.about-section',\r\n                start: \"top 70%\",\r\n                end: \"bottom bottom\"\r\n            }\r\n        });\r\n\r\n        tlAbout.from('.about-visuals .layered-card', {\r\n            y: 50,\r\n            opacity: 0,\r\n            rotation: 0,\r\n            duration: 1,\r\n            stagger: 0.2,\r\n            ease: \"back.out(1.2)\"\r\n        })\r\n        .from('#aboutBook', {\r\n            y: 100,\r\n            opacity: 0,\r\n            rotation: -5,\r\n            duration: 1.2,\r\n            ease: \"power3.out\"\r\n        }, \"-=0.8\")\r\n        .from('.journal-note', {\r\n            scale: 0.5,\r\n            opacity: 0,\r\n            duration: 0.8,\r\n            ease: \"back.out(1.5)\"\r\n        }, \"-=0.6\")\r\n        .from('.section-subtitle', {\r\n            x: -30,\r\n            opacity: 0,\r\n            duration: 0.8\r\n        }, \"-=1\")\r\n        .from('.gold-divider', {\r\n            width: 0,\r\n            duration: 0.8,\r\n            ease: \"power3.inOut\"\r\n        }, \"-=0.6\")\r\n        .from('.about-title', {\r\n            y: 30,\r\n            opacity: 0,\r\n            duration: 0.8\r\n        }, \"-=0.6\")\r\n        .from('.about-text', {\r\n            y: 20,\r\n            opacity: 0,\r\n            duration: 0.8,\r\n            stagger: 0.15\r\n        }, \"-=0.4\");\r\n        \r\n        \/\/ Parallax for Book in About Section on scroll\r\n        gsap.to('#aboutBook', {\r\n            y: -30,\r\n            ease: \"none\",\r\n            scrollTrigger: {\r\n                trigger: '.about-section',\r\n                start: \"top bottom\",\r\n                end: \"bottom top\",\r\n                scrub: true\r\n            }\r\n        });\r\n    <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cb98b76 e-con-full e-flex e-con e-parent\" data-id=\"cb98b76\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-42bd633 elementor-widget elementor-widget-video\" data-id=\"42bd633\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/demowebdesign.live\/Aderemi\/wp-content\/uploads\/2026\/07\/Aderemi-VBT-7-15-26-2.mp4\" controls=\"\" preload=\"metadata\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-79b3b6f e-con-full e-flex e-con e-parent\" data-id=\"79b3b6f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-123100c elementor-widget elementor-widget-html\" data-id=\"123100c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Google Fonts -->\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@300;400;500;600&family=La+Belle+Aurore&display=swap\" rel=\"stylesheet\">\r\n\r\n    <!-- GSAP Libraries -->\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n\r\n    <style>\r\n        \/* CSS Reset & Variables *\/\r\n        :root {\r\n            --color-navy: #15202F;\r\n            --color-navy-light: #1D2C40;\r\n            --color-ivory: #F8F6F2;\r\n            --color-gold: #D4AF37;\r\n            --color-bronze: #CD7F32;\r\n            --color-white: #ffffff;\r\n            --font-heading: 'Cormorant Garamond', serif;\r\n            --font-body: 'Inter', sans-serif;\r\n            --font-handwriting: 'La Belle Aurore', cursive;\r\n        }\r\n\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        body {\r\n            font-family: var(--font-body);\r\n            background-color: var(--color-navy);\r\n            color: var(--color-white);\r\n            overflow-x: hidden;\r\n            scroll-behavior: smooth;\r\n        }\r\n\r\n        @media (prefers-reduced-motion: reduce) {\r\n            * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }\r\n        }\r\n\r\n        \/* Typography Utilities *\/\r\n        .section-header {\r\n            text-align: center;\r\n            margin-bottom: 4rem;\r\n            position: relative;\r\n            z-index: 10;\r\n        }\r\n\r\n        .section-subtitle {\r\n            font-family: var(--font-body);\r\n            text-transform: uppercase;\r\n            letter-spacing: 4px;\r\n            font-size: 0.8rem;\r\n            color: var(--color-gold);\r\n            margin-bottom: 1rem;\r\n            display: block;\r\n        }\r\n\r\n        .section-title {\r\n            font-family: var(--font-heading);\r\n            font-size: 4rem;\r\n            font-weight: 500;\r\n            line-height: 1.1;\r\n            color: white !important;\r\n        }\r\n        .section-title-S2 {\r\n            font-family: var(--font-heading);\r\n            font-size: 4rem;\r\n            font-weight: 500;\r\n            line-height: 1.1;\r\n            color: #000 !important;\r\n        }\r\n\r\n        .section-lede {\r\n            font-family: var(--font-body);\r\n            font-weight: 300;\r\n            font-size: 1.05rem;\r\n            max-width: 520px;\r\n            margin: 1.25rem auto 0;\r\n            line-height: 1.7;\r\n        }\r\n\r\n        .journey-section .section-lede { color: rgba(255,255,255,0.55); }\r\n        .book-section .section-lede { color: rgba(21, 32, 47, 0.6); }\r\n\r\n        \/* Ornate header brackets *\/\r\n        .header-flourish {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 1rem;\r\n            margin-bottom: 1.1rem;\r\n        }\r\n        .header-flourish::before,\r\n        .header-flourish::after {\r\n            content: '';\r\n            width: 40px;\r\n            height: 1px;\r\n            background: rgba(212, 175, 55, 0.5);\r\n        }\r\n\r\n        \/* ================= SECTION 3: THE JOURNEY ================= *\/\r\n        .journey-section {\r\n            position: relative;\r\n            width: 100%;\r\n            min-height: 100vh;\r\n            background-color: var(--color-navy);\r\n            padding: 8rem 5%;\r\n            overflow: hidden;\r\n        }\r\n\r\n        \/* Fine background grid for editorial density *\/\r\n        .journey-grid-bg {\r\n            position: absolute;\r\n            inset: 0;\r\n            background-image:\r\n                linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),\r\n                linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);\r\n            background-size: 48px 48px;\r\n            z-index: 0;\r\n            pointer-events: none;\r\n            -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);\r\n            mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);\r\n        }\r\n\r\n        \/* Decorative Map Coordinates *\/\r\n        .coord-overlay {\r\n            position: absolute;\r\n            font-family: monospace;\r\n            color: rgba(255,255,255,0.06);\r\n            font-size: 1.6rem;\r\n            letter-spacing: 5px;\r\n            z-index: 0;\r\n            pointer-events: none;\r\n        }\r\n        .coord-1 { top: 5%; left: 4%; }\r\n        .coord-2 { bottom: 5%; right: 4%; }\r\n        .coord-3 { top: 5%; right: 4%; text-align: right; }\r\n        .coord-4 { bottom: 5%; left: 4%; }\r\n\r\n        .journey-layout {\r\n            position: relative;\r\n            max-width: 1180px;\r\n            margin: 5rem auto 0;\r\n            z-index: 10;\r\n            display: grid;\r\n            grid-template-columns: 220px 1fr;\r\n            gap: 4rem;\r\n            align-items: start;\r\n        }\r\n\r\n        \/* Sticky Index Rail *\/\r\n        .journey-index {\r\n            position: sticky;\r\n            top: 12rem;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 0;\r\n            border-left: 1px solid rgba(255,255,255,0.08);\r\n            padding-left: 1.5rem;\r\n        }\r\n\r\n        .journey-index-item {\r\n            display: flex;\r\n            align-items: baseline;\r\n            gap: 0.9rem;\r\n            padding: 0.85rem 0;\r\n            cursor: pointer;\r\n            position: relative;\r\n            transition: all 0.35s ease;\r\n        }\r\n\r\n        .journey-index-item::before {\r\n            content: '';\r\n            position: absolute;\r\n            left: -1.6rem;\r\n            top: 50%;\r\n            width: 7px;\r\n            height: 7px;\r\n            border-radius: 50%;\r\n            background: var(--color-navy);\r\n            border: 1px solid rgba(212, 175, 55, 0.4);\r\n            transform: translateY(-50%);\r\n            transition: all 0.35s ease;\r\n        }\r\n\r\n        .journey-index-num {\r\n            font-family: var(--font-body);\r\n            font-size: 0.7rem;\r\n            letter-spacing: 1px;\r\n            color: rgba(255,255,255,0.3);\r\n            transition: color 0.35s ease;\r\n        }\r\n\r\n        .journey-index-label {\r\n            font-family: var(--font-heading);\r\n            font-size: 1.15rem;\r\n            color: rgba(255,255,255,0.4);\r\n            transition: all 0.35s ease;\r\n        }\r\n\r\n        .journey-index-item:hover .journey-index-label,\r\n        .journey-index-item.is-current .journey-index-label {\r\n            color: var(--color-gold);\r\n            transform: translateX(4px);\r\n        }\r\n        .journey-index-item:hover .journey-index-num,\r\n        .journey-index-item.is-current .journey-index-num {\r\n            color: var(--color-bronze);\r\n        }\r\n        .journey-index-item.is-current::before {\r\n            background: var(--color-gold);\r\n            box-shadow: 0 0 10px rgba(212,175,55,0.8);\r\n            transform: translateY(-50%) scale(1.3);\r\n        }\r\n\r\n        @media (max-width: 900px) {\r\n            .journey-index { display: none; }\r\n            .journey-layout { grid-template-columns: 1fr; }\r\n        }\r\n\r\n        \/* Vertical Premium Timeline *\/\r\n        .timeline-track {\r\n            position: relative;\r\n        }\r\n\r\n        .timeline-track::before {\r\n            content: '';\r\n            position: absolute;\r\n            left: 50%;\r\n            top: 0;\r\n            bottom: 0;\r\n            width: 1px;\r\n            background: rgba(212, 175, 55, 0.15);\r\n            transform: translateX(-50%);\r\n        }\r\n\r\n        .timeline-progress {\r\n            position: absolute;\r\n            left: 50%;\r\n            top: 0;\r\n            width: 1px;\r\n            height: 0%;\r\n            background: var(--color-gold);\r\n            box-shadow: 0 0 12px rgba(212, 175, 55, 0.7);\r\n            transform: translateX(-50%);\r\n            z-index: 2;\r\n        }\r\n\r\n        .milestone-row {\r\n            position: relative;\r\n            display: grid;\r\n            grid-template-columns: 1fr 70px 1fr;\r\n            align-items: center;\r\n            margin-bottom: 3.4rem;\r\n            outline: none;\r\n            cursor: pointer;\r\n        }\r\n\r\n        .milestone-row:last-child { margin-bottom: 0; }\r\n\r\n        .milestone-node-col {\r\n            grid-column: 2;\r\n            grid-row: 1;\r\n            display: flex;\r\n            justify-content: center;\r\n            position: relative;\r\n            z-index: 3;\r\n        }\r\n\r\n        .milestone-node {\r\n            width: 13px;\r\n            height: 13px;\r\n            border-radius: 50%;\r\n            background: var(--color-navy);\r\n            border: 2px solid var(--color-gold);\r\n            transition: all 0.4s ease;\r\n        }\r\n\r\n        .milestone-row:hover .milestone-node,\r\n        .milestone-row.is-active .milestone-node,\r\n        .milestone-row:focus-visible .milestone-node {\r\n            background: var(--color-gold);\r\n            transform: scale(1.5);\r\n            box-shadow: 0 0 18px rgba(212, 175, 55, 0.8);\r\n        }\r\n\r\n        .milestone-card {\r\n            position: relative;\r\n            grid-row: 1;\r\n            background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));\r\n            border: 1px solid rgba(212, 175, 55, 0.18);\r\n            border-radius: 4px;\r\n            padding: 1.9rem 2.1rem;\r\n            overflow: hidden;\r\n            transition: all 0.45s ease;\r\n        }\r\n\r\n        \/* Large ghost number for editorial density *\/\r\n        .milestone-ghost-num {\r\n            position: absolute;\r\n            top: -1.2rem;\r\n            font-family: var(--font-heading);\r\n            font-size: 6.5rem;\r\n            font-weight: 600;\r\n            color: rgba(212, 175, 55, 0.05);\r\n            line-height: 1;\r\n            z-index: 0;\r\n            pointer-events: none;\r\n            user-select: none;\r\n        }\r\n        .milestone-row:nth-child(odd) .milestone-ghost-num { right: 0.5rem; }\r\n        .milestone-row:nth-child(even) .milestone-ghost-num { left: 0.5rem; }\r\n\r\n        .milestone-card > * { position: relative; z-index: 1; }\r\n\r\n        .milestone-row:hover .milestone-card,\r\n        .milestone-row.is-active .milestone-card,\r\n        .milestone-row:focus-visible .milestone-card {\r\n            border-color: rgba(212, 175, 55, 0.5);\r\n            background: linear-gradient(160deg, rgba(212,175,55,0.08), rgba(255,255,255,0.02));\r\n            transform: translateY(-4px);\r\n        }\r\n\r\n        .milestone-row:nth-child(odd) .milestone-card {\r\n            grid-column: 1;\r\n            text-align: right;\r\n        }\r\n        .milestone-row:nth-child(even) .milestone-card {\r\n            grid-column: 3;\r\n            text-align: left;\r\n        }\r\n\r\n        \/* Meta row: step + tag + divider dot *\/\r\n        .milestone-meta {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 0.6rem;\r\n            margin-bottom: 0.75rem;\r\n            font-family: var(--font-body);\r\n            font-size: 0.68rem;\r\n            letter-spacing: 2.5px;\r\n            text-transform: uppercase;\r\n        }\r\n        .milestone-row:nth-child(odd) .milestone-meta { justify-content: flex-end; }\r\n        .milestone-row:nth-child(even) .milestone-meta { justify-content: flex-start; }\r\n\r\n        .milestone-step {\r\n            color: var(--color-gold);\r\n        }\r\n\r\n        .milestone-meta-dot {\r\n            width: 3px;\r\n            height: 3px;\r\n            border-radius: 50%;\r\n            background: rgba(255,255,255,0.3);\r\n        }\r\n\r\n        .milestone-tag {\r\n            color: rgba(255,255,255,0.35);\r\n            font-weight: 500;\r\n        }\r\n\r\n        .milestone-title {\r\n            font-family: var(--font-heading);\r\n            font-size: 1.85rem;\r\n            color: var(--color-white);\r\n            margin-bottom: 0.65rem;\r\n            transition: color 0.4s ease;\r\n        }\r\n\r\n        .milestone-row:hover .milestone-title,\r\n        .milestone-row.is-active .milestone-title,\r\n        .milestone-row:focus-visible .milestone-title {\r\n            color: var(--color-gold);\r\n        }\r\n\r\n        .milestone-desc {\r\n            font-family: var(--font-body);\r\n            font-size: 0.9rem;\r\n            line-height: 1.7;\r\n            color: rgba(255,255,255,0.55);\r\n            font-weight: 300;\r\n        }\r\n\r\n        .milestone-divider {\r\n            width: 32px;\r\n            height: 1px;\r\n            background: rgba(212, 175, 55, 0.3);\r\n            margin: 1rem 0;\r\n        }\r\n        .milestone-row:nth-child(odd) .milestone-divider { margin-left: auto; }\r\n        .milestone-row:nth-child(even) .milestone-divider { margin-right: auto; }\r\n\r\n        .milestone-thumb-wrap {\r\n            position: relative;\r\n            display: inline-block;\r\n            max-width: 220px;\r\n            width: 100%;\r\n        }\r\n\r\n        .milestone-thumb {\r\n            width: 100%;\r\n            height: 100px;\r\n            object-fit: cover;\r\n            border-radius: 3px;\r\n            filter: grayscale(100%);\r\n            opacity: 0.75;\r\n            transition: all 0.4s ease;\r\n            display: block;\r\n        }\r\n\r\n        .milestone-thumb-frame {\r\n            position: absolute;\r\n            inset: 8px;\r\n            border: 1px solid rgba(212, 175, 55, 0.5);\r\n            pointer-events: none;\r\n            opacity: 0;\r\n            transition: opacity 0.4s ease;\r\n        }\r\n\r\n        .milestone-row:nth-child(odd) .milestone-thumb-wrap { margin-left: auto; }\r\n        .milestone-row:nth-child(even) .milestone-thumb-wrap { margin-right: auto; }\r\n\r\n        .milestone-row:hover .milestone-thumb,\r\n        .milestone-row.is-active .milestone-thumb,\r\n        .milestone-row:focus-visible .milestone-thumb {\r\n            filter: grayscale(0%);\r\n            opacity: 1;\r\n        }\r\n        .milestone-row:hover .milestone-thumb-frame,\r\n        .milestone-row.is-active .milestone-thumb-frame,\r\n        .milestone-row:focus-visible .milestone-thumb-frame {\r\n            opacity: 1;\r\n        }\r\n\r\n        \/* ================= SECTION 4: INSIDE THE BOOK ================= *\/\r\n        .book-section {\r\n            position: relative;\r\n            width: 100%;\r\n            min-height: 100vh;\r\n            background-color: var(--color-ivory);\r\n            color: var(--color-navy);\r\n            padding: 8rem 5%;\r\n            overflow: hidden;\r\n        }\r\n\r\n        \/* Light textured background *\/\r\n        .book-bg {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            opacity: 0.12;\r\n            background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'\/%3E%3C\/svg%3E\");\r\n            mix-blend-mode: multiply;\r\n            z-index: 1;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .book-container {\r\n            max-width: 900px;\r\n            margin: 0 auto;\r\n            position: relative;\r\n            z-index: 10;\r\n        }\r\n\r\n        \/* Premium Accordion *\/\r\n        .chapter-accordion {\r\n            border-top: 1px solid rgba(21, 32, 47, 0.12);\r\n        }\r\n\r\n        .chapter-item {\r\n            border-bottom: 1px solid rgba(21, 32, 47, 0.12);\r\n        }\r\n\r\n        .chapter-header {\r\n            width: 100%;\r\n            display: grid;\r\n            grid-template-columns: 70px 1fr 24px;\r\n            align-items: center;\r\n            gap: 1.5rem;\r\n            padding: 1.75rem 0.5rem;\r\n            background: none;\r\n            border: none;\r\n            cursor: pointer;\r\n            text-align: left;\r\n            outline: none;\r\n        }\r\n\r\n        .chapter-header-num {\r\n            font-family: var(--font-body);\r\n            font-size: 0.85rem;\r\n            letter-spacing: 2px;\r\n            color: var(--color-bronze);\r\n            transition: color 0.35s ease;\r\n        }\r\n\r\n        .chapter-header-title {\r\n            font-family: var(--font-heading);\r\n            font-size: 2rem;\r\n            color: var(--color-navy);\r\n            transition: color 0.35s ease, transform 0.35s ease;\r\n        }\r\n\r\n        .chapter-item.active .chapter-header-num,\r\n        .chapter-header:hover .chapter-header-num,\r\n        .chapter-header:focus-visible .chapter-header-num {\r\n            color: var(--color-gold);\r\n        }\r\n\r\n        .chapter-item.active .chapter-header-title,\r\n        .chapter-header:hover .chapter-header-title,\r\n        .chapter-header:focus-visible .chapter-header-title {\r\n            color: var(--color-bronze);\r\n            transform: translateX(6px);\r\n        }\r\n\r\n        .chapter-header-icon {\r\n            position: relative;\r\n            width: 18px;\r\n            height: 18px;\r\n            justify-self: end;\r\n        }\r\n        .chapter-header-icon::before,\r\n        .chapter-header-icon::after {\r\n            content: '';\r\n            position: absolute;\r\n            background: var(--color-navy);\r\n            transition: transform 0.35s ease, opacity 0.35s ease;\r\n        }\r\n        .chapter-header-icon::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }\r\n        .chapter-header-icon::after { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }\r\n        .chapter-item.active .chapter-header-icon::after { opacity: 0; }\r\n\r\n        .chapter-body {\r\n            display: grid;\r\n            grid-template-rows: 0fr;\r\n            transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n        .chapter-item.active .chapter-body { grid-template-rows: 1fr; }\r\n\r\n        .chapter-body-inner { overflow: hidden; }\r\n\r\n        .chapter-body-content {\r\n            padding: 0 0.5rem 2.5rem calc(70px + 1.5rem);\r\n        }\r\n\r\n        .chapter-desc {\r\n            font-size: 1.05rem;\r\n            line-height: 1.8;\r\n            color: rgba(21, 32, 47, 0.75);\r\n            font-weight: 400;\r\n            max-width: 620px;\r\n        }\r\n\r\n        .chapter-quote {\r\n            margin-top: 1.75rem;\r\n            padding-left: 1.5rem;\r\n            border-left: 2px solid var(--color-gold);\r\n            font-family: var(--font-handwriting);\r\n            font-size: 1.6rem;\r\n            color: var(--color-navy);\r\n        }\r\n\r\n        .chapter-progress {\r\n            margin-top: 1.75rem;\r\n            font-family: var(--font-body);\r\n            font-size: 0.75rem;\r\n            letter-spacing: 1px;\r\n            color: rgba(21, 32, 47, 0.4);\r\n            text-transform: uppercase;\r\n        }\r\n\r\n        \/* Responsive *\/\r\n        @media (max-width: 768px) {\r\n            .timeline-track { padding-left: 1.75rem; }\r\n            .timeline-track::before,\r\n            .timeline-progress { left: 8px; }\r\n            .milestone-row {\r\n                grid-template-columns: 24px 1fr;\r\n                margin-bottom: 3rem;\r\n            }\r\n            .milestone-node-col { grid-column: 1; }\r\n            .milestone-row:nth-child(odd) .milestone-card,\r\n            .milestone-row:nth-child(even) .milestone-card {\r\n                grid-column: 2;\r\n                text-align: left !important;\r\n            }\r\n            .milestone-row:nth-child(odd) .milestone-meta,\r\n            .milestone-row:nth-child(even) .milestone-meta {\r\n                justify-content: flex-start !important;\r\n            }\r\n            .milestone-row:nth-child(odd) .milestone-divider,\r\n            .milestone-row:nth-child(even) .milestone-divider,\r\n            .milestone-row:nth-child(odd) .milestone-thumb-wrap,\r\n            .milestone-row:nth-child(even) .milestone-thumb-wrap {\r\n                margin-left: 0;\r\n                margin-right: 0;\r\n            }\r\n            .milestone-ghost-num { font-size: 4.5rem; }\r\n        }\r\n\r\n        @media (max-width: 600px) {\r\n            .section-title,\r\n            .section-title-S2 { font-size: 2.75rem; }\r\n            .milestone-card { padding: 1.5rem; }\r\n            .chapter-header { grid-template-columns: 40px 1fr 20px; gap: 0.85rem; padding: 1.35rem 0; }\r\n            .chapter-header-title { font-size: 1.5rem; }\r\n            .chapter-body-content { padding-left: calc(40px + 0.85rem); }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <!-- SECTION 3: THE JOURNEY -->\r\n    <section class=\"journey-section\" id=\"journey\">\r\n\r\n        <div class=\"journey-grid-bg\"><\/div>\r\n        <!--<div class=\"coord-overlay coord-1\">N 40.7128\u00b0<\/div>-->\r\n        <!--<div class=\"coord-overlay coord-3\">41.0082\u00b0 N<\/div>-->\r\n        <!--<div class=\"coord-overlay coord-2\">W 74.0060\u00b0<\/div>-->\r\n        <!--<div class=\"coord-overlay coord-4\">28.9784\u00b0 N<\/div>-->\r\n\r\n        <div class=\"section-header\">\r\n            <div class=\"header-flourish\"><\/div>\r\n            <span class=\"section-subtitle\">Timeline<\/span>\r\n            <h2 class=\"section-title\">The Journey<\/h2>\r\n            <p class=\"section-lede\">Eight steps across two worlds from the first departure to finally calling this place home.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"journey-layout\">\r\n\r\n            <!-- Sticky Index Rail -->\r\n            <nav class=\"journey-index\" aria-label=\"Journey steps\">\r\n                <div class=\"journey-index-item\" data-target=\"0\"><span class=\"journey-index-num\">01<\/span><span class=\"journey-index-label\">Departure<\/span><\/div>\r\n                <div class=\"journey-index-item\" data-target=\"1\"><span class=\"journey-index-num\">02<\/span><span class=\"journey-index-label\">Hope<\/span><\/div>\r\n                <div class=\"journey-index-item\" data-target=\"2\"><span class=\"journey-index-num\">03<\/span><span class=\"journey-index-label\">Culture Shock<\/span><\/div>\r\n                <div class=\"journey-index-item\" data-target=\"3\"><span class=\"journey-index-num\">04<\/span><span class=\"journey-index-label\">First Winter<\/span><\/div>\r\n                <div class=\"journey-index-item\" data-target=\"4\"><span class=\"journey-index-num\">05<\/span><span class=\"journey-index-label\">Hard Work<\/span><\/div>\r\n                <div class=\"journey-index-item\" data-target=\"5\"><span class=\"journey-index-num\">06<\/span><span class=\"journey-index-label\">Loneliness<\/span><\/div>\r\n                <div class=\"journey-index-item\" data-target=\"6\"><span class=\"journey-index-num\">07<\/span><span class=\"journey-index-label\">Growth<\/span><\/div>\r\n                <div class=\"journey-index-item\" data-target=\"7\"><span class=\"journey-index-num\">08<\/span><span class=\"journey-index-label\">Rebirth<\/span><\/div>\r\n            <\/nav>\r\n\r\n            <div class=\"timeline-track\">\r\n                <div class=\"timeline-progress\"><\/div>\r\n\r\n                <div class=\"milestone-row\" data-index=\"0\" tabindex=\"0\" role=\"button\" aria-label=\"Departure\">\r\n                    <div class=\"milestone-card\">\r\n                        <span class=\"milestone-ghost-num\">01<\/span>\r\n                        <div class=\"milestone-meta\"><span class=\"milestone-step\">Step 01<\/span><span class=\"milestone-meta-dot\"><\/span><span class=\"milestone-tag\">Point of Origin<\/span><\/div>\r\n                        <h3 class=\"milestone-title\">Departure<\/h3>\r\n                        <p class=\"milestone-desc\">Leaving the familiar behind. A heavy heart mixed with quiet resolve.<\/p>\r\n                        <div class=\"milestone-divider\"><\/div>\r\n                        <div class=\"milestone-thumb-wrap\">\r\n                            <img decoding=\"async\" class=\"milestone-thumb\" src=\"https:\/\/images.unsplash.com\/photo-1436491865332-7a61a109cc05?w=500&q=80\" alt=\"Departure\">\r\n                            <div class=\"milestone-thumb-frame\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"milestone-node-col\"><div class=\"milestone-node\"><\/div><\/div>\r\n                <\/div>\r\n\r\n                <div class=\"milestone-row\" data-index=\"1\" tabindex=\"0\" role=\"button\" aria-label=\"Hope\">\r\n                    <div class=\"milestone-card\">\r\n                        <span class=\"milestone-ghost-num\">02<\/span>\r\n                        <div class=\"milestone-meta\"><span class=\"milestone-step\">Step 02<\/span><span class=\"milestone-meta-dot\"><\/span><span class=\"milestone-tag\">In Transit<\/span><\/div>\r\n                        <h3 class=\"milestone-title\">Hope<\/h3>\r\n                        <p class=\"milestone-desc\">The glow of city lights from above, representing endless possibilities.<\/p>\r\n                        <div class=\"milestone-divider\"><\/div>\r\n                        <div class=\"milestone-thumb-wrap\">\r\n                            <img decoding=\"async\" class=\"milestone-thumb\" src=\"https:\/\/images.unsplash.com\/photo-1499092346589-b9b6be3e94b2?w=500&q=80\" alt=\"Hope\">\r\n                            <div class=\"milestone-thumb-frame\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"milestone-node-col\"><div class=\"milestone-node\"><\/div><\/div>\r\n                <\/div>\r\n\r\n                <div class=\"milestone-row\" data-index=\"2\" tabindex=\"0\" role=\"button\" aria-label=\"Culture Shock\">\r\n                    <div class=\"milestone-card\">\r\n                        <span class=\"milestone-ghost-num\">03<\/span>\r\n                        <div class=\"milestone-meta\"><span class=\"milestone-step\">Step 03<\/span><span class=\"milestone-meta-dot\"><\/span><span class=\"milestone-tag\">Week One<\/span><\/div>\r\n                        <h3 class=\"milestone-title\">Culture Shock<\/h3>\r\n                        <p class=\"milestone-desc\">A fast-paced world with unwritten rules. Learning to speak the unspoken language.<\/p>\r\n                        <div class=\"milestone-divider\"><\/div>\r\n                        <div class=\"milestone-thumb-wrap\">\r\n                            <img decoding=\"async\" class=\"milestone-thumb\" src=\"https:\/\/images.unsplash.com\/photo-1517400508447-f8dd518b86db?w=500&q=80\" alt=\"Culture Shock\">\r\n                            <div class=\"milestone-thumb-frame\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"milestone-node-col\"><div class=\"milestone-node\"><\/div><\/div>\r\n                <\/div>\r\n\r\n                <div class=\"milestone-row\" data-index=\"3\" tabindex=\"0\" role=\"button\" aria-label=\"First Winter\">\r\n                    <div class=\"milestone-card\">\r\n                        <span class=\"milestone-ghost-num\">04<\/span>\r\n                        <div class=\"milestone-meta\"><span class=\"milestone-step\">Step 04<\/span><span class=\"milestone-meta-dot\"><\/span><span class=\"milestone-tag\">Month Three<\/span><\/div>\r\n                        <h3 class=\"milestone-title\">First Winter<\/h3>\r\n                        <p class=\"milestone-desc\">The biting cold that tested not just the body, but the spirit.<\/p>\r\n                        <div class=\"milestone-divider\"><\/div>\r\n                        <div class=\"milestone-thumb-wrap\">\r\n                            <img decoding=\"async\" class=\"milestone-thumb\" src=\"https:\/\/images.unsplash.com\/photo-1457269449834-928af64c684d?w=500&q=80\" alt=\"First Winter\">\r\n                            <div class=\"milestone-thumb-frame\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"milestone-node-col\"><div class=\"milestone-node\"><\/div><\/div>\r\n                <\/div>\r\n\r\n                <div class=\"milestone-row\" data-index=\"4\" tabindex=\"0\" role=\"button\" aria-label=\"Hard Work\">\r\n                    <div class=\"milestone-card\">\r\n                        <span class=\"milestone-ghost-num\">05<\/span>\r\n                        <div class=\"milestone-meta\"><span class=\"milestone-step\">Step 05<\/span><span class=\"milestone-meta-dot\"><\/span><span class=\"milestone-tag\">Year One<\/span><\/div>\r\n                        <h3 class=\"milestone-title\">Hard Work<\/h3>\r\n                        <p class=\"milestone-desc\">Jobs that build you. Long hours, humble beginnings, and the grind.<\/p>\r\n                        <div class=\"milestone-divider\"><\/div>\r\n                        <div class=\"milestone-thumb-wrap\">\r\n                            <img decoding=\"async\" class=\"milestone-thumb\" src=\"https:\/\/images.unsplash.com\/photo-1504384308090-c894fdcc538d?w=500&q=80\" alt=\"Hard Work\">\r\n                            <div class=\"milestone-thumb-frame\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"milestone-node-col\"><div class=\"milestone-node\"><\/div><\/div>\r\n                <\/div>\r\n\r\n                <div class=\"milestone-row\" data-index=\"5\" tabindex=\"0\" role=\"button\" aria-label=\"Loneliness\">\r\n                    <div class=\"milestone-card\">\r\n                        <span class=\"milestone-ghost-num\">06<\/span>\r\n                        <div class=\"milestone-meta\"><span class=\"milestone-step\">Step 06<\/span><span class=\"milestone-meta-dot\"><\/span><span class=\"milestone-tag\">Year Two<\/span><\/div>\r\n                        <h3 class=\"milestone-title\">Loneliness<\/h3>\r\n                        <p class=\"milestone-desc\">Quiet nights wondering if the sacrifices were truly worth the cost.<\/p>\r\n                        <div class=\"milestone-divider\"><\/div>\r\n                        <div class=\"milestone-thumb-wrap\">\r\n                            <img decoding=\"async\" class=\"milestone-thumb\" src=\"https:\/\/images.unsplash.com\/photo-1518621736915-f3b1c41bfd00?w=500&q=80\" alt=\"Loneliness\">\r\n                            <div class=\"milestone-thumb-frame\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"milestone-node-col\"><div class=\"milestone-node\"><\/div><\/div>\r\n                <\/div>\r\n\r\n                <div class=\"milestone-row\" data-index=\"6\" tabindex=\"0\" role=\"button\" aria-label=\"Growth\">\r\n                    <div class=\"milestone-card\">\r\n                        <span class=\"milestone-ghost-num\">07<\/span>\r\n                        <div class=\"milestone-meta\"><span class=\"milestone-step\">Step 07<\/span><span class=\"milestone-meta-dot\"><\/span><span class=\"milestone-tag\">Year Three<\/span><\/div>\r\n                        <h3 class=\"milestone-title\">Growth<\/h3>\r\n                        <p class=\"milestone-desc\">Roots slowly taking hold in foreign soil. Small victories.<\/p>\r\n                        <div class=\"milestone-divider\"><\/div>\r\n                        <div class=\"milestone-thumb-wrap\">\r\n                            <img decoding=\"async\" class=\"milestone-thumb\" src=\"https:\/\/images.unsplash.com\/photo-1473625247510-8ceb1760943f?w=500&q=80\" alt=\"Growth\">\r\n                            <div class=\"milestone-thumb-frame\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"milestone-node-col\"><div class=\"milestone-node\"><\/div><\/div>\r\n                <\/div>\r\n\r\n                <div class=\"milestone-row\" data-index=\"7\" tabindex=\"0\" role=\"button\" aria-label=\"Rebirth\">\r\n                    <div class=\"milestone-card\">\r\n                        <span class=\"milestone-ghost-num\">08<\/span>\r\n                        <div class=\"milestone-meta\"><span class=\"milestone-step\">Step 08<\/span><span class=\"milestone-meta-dot\"><\/span><span class=\"milestone-tag\">Present Day<\/span><\/div>\r\n                        <h3 class=\"milestone-title\">Rebirth<\/h3>\r\n                        <p class=\"milestone-desc\">Embracing the dual identity. Flourishing in the land of dreams.<\/p>\r\n                        <div class=\"milestone-divider\"><\/div>\r\n                        <div class=\"milestone-thumb-wrap\">\r\n                            <img decoding=\"async\" class=\"milestone-thumb\" src=\"https:\/\/images.unsplash.com\/photo-1507525428034-b723cf961d3e?w=500&q=80\" alt=\"Rebirth\">\r\n                            <div class=\"milestone-thumb-frame\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"milestone-node-col\"><div class=\"milestone-node\"><\/div><\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/section>\r\n\r\n    <!-- SECTION 4: INSIDE THE BOOK -->\r\n    <section class=\"book-section\" id=\"inside\">\r\n        <div class=\"book-bg\"><\/div>\r\n\r\n        <div class=\"section-header\">\r\n            <span class=\"section-subtitle\">Excerpts<\/span>\r\n            <h2 class=\"section-title-S2\">Inside the Book<\/h2>\r\n            <p class=\"section-lede\">Seven chapters. Seven turning points. A closer look at the story behind the journey.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"book-container\">\r\n            <div class=\"chapter-accordion\">\r\n\r\n                <div class=\"chapter-item active\">\r\n                    <button class=\"chapter-header\" aria-expanded=\"true\">\r\n                        <span class=\"chapter-header-num\">01<\/span>\r\n                        <span class=\"chapter-header-title\">Arrival<\/span>\r\n                        <span class=\"chapter-header-icon\"><\/span>\r\n                    <\/button>\r\n                    <div class=\"chapter-body\">\r\n                        <div class=\"chapter-body-inner\">\r\n                            <div class=\"chapter-body-content\">\r\n                                <p class=\"chapter-desc\">Stepping off the plane, the air felt different. It wasn't just the temperature; it was the weight of expectations. Everything I knew was suddenly thousands of miles behind me.<\/p>\r\n                                <div class=\"chapter-quote\">\"The hardest step is the one that takes you off the plane.\"<\/div>\r\n                                <div class=\"chapter-progress\">Chapter 01 of 07<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"chapter-item\">\r\n                    <button class=\"chapter-header\" aria-expanded=\"false\">\r\n                        <span class=\"chapter-header-num\">02<\/span>\r\n                        <span class=\"chapter-header-title\">The First Cold<\/span>\r\n                        <span class=\"chapter-header-icon\"><\/span>\r\n                    <\/button>\r\n                    <div class=\"chapter-body\">\r\n                        <div class=\"chapter-body-inner\">\r\n                            <div class=\"chapter-body-content\">\r\n                                <p class=\"chapter-desc\">They warned me about winter, but no words can prepare you for the chill that seeps into your bones. It was a physical and emotional freeze.<\/p>\r\n                                <div class=\"chapter-quote\">\"Winter didn't break you. It shaped you.\"<\/div>\r\n                                <div class=\"chapter-progress\">Chapter 02 of 07<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"chapter-item\">\r\n                    <button class=\"chapter-header\" aria-expanded=\"false\">\r\n                        <span class=\"chapter-header-num\">03<\/span>\r\n                        <span class=\"chapter-header-title\">Jobs That Build You<\/span>\r\n                        <span class=\"chapter-header-icon\"><\/span>\r\n                    <\/button>\r\n                    <div class=\"chapter-body\">\r\n                        <div class=\"chapter-body-inner\">\r\n                            <div class=\"chapter-body-content\">\r\n                                <p class=\"chapter-desc\">Pride has no place when survival is on the line. The manual labor, the graveyard shifts they stripped away ego and built character.<\/p>\r\n                                <div class=\"chapter-progress\">Chapter 03 of 07<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"chapter-item\">\r\n                    <button class=\"chapter-header\" aria-expanded=\"false\">\r\n                        <span class=\"chapter-header-num\">04<\/span>\r\n                        <span class=\"chapter-header-title\">Loneliness<\/span>\r\n                        <span class=\"chapter-header-icon\"><\/span>\r\n                    <\/button>\r\n                    <div class=\"chapter-body\">\r\n                        <div class=\"chapter-body-inner\">\r\n                            <div class=\"chapter-body-content\">\r\n                                <p class=\"chapter-desc\">A crowded subway filled with millions of people, yet feeling completely unseen. Loneliness in America is loud and bustling.<\/p>\r\n                                <div class=\"chapter-progress\">Chapter 04 of 07<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"chapter-item\">\r\n                    <button class=\"chapter-header\" aria-expanded=\"false\">\r\n                        <span class=\"chapter-header-num\">05<\/span>\r\n                        <span class=\"chapter-header-title\">Culture Shock<\/span>\r\n                        <span class=\"chapter-header-icon\"><\/span>\r\n                    <\/button>\r\n                    <div class=\"chapter-body\">\r\n                        <div class=\"chapter-body-inner\">\r\n                            <div class=\"chapter-body-content\">\r\n                                <p class=\"chapter-desc\">Learning the subtle rules. The unspoken social cues, the different humor, the fast-paced relentless drive of the American dream.<\/p>\r\n                                <div class=\"chapter-progress\">Chapter 05 of 07<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"chapter-item\">\r\n                    <button class=\"chapter-header\" aria-expanded=\"false\">\r\n                        <span class=\"chapter-header-num\">06<\/span>\r\n                        <span class=\"chapter-header-title\">Money<\/span>\r\n                        <span class=\"chapter-header-icon\"><\/span>\r\n                    <\/button>\r\n                    <div class=\"chapter-body\">\r\n                        <div class=\"chapter-body-inner\">\r\n                            <div class=\"chapter-body-content\">\r\n                                <p class=\"chapter-desc\">Understanding the currency of survival. How quickly it vanishes, and how much sweat it takes to earn a single dollar here.<\/p>\r\n                                <div class=\"chapter-progress\">Chapter 06 of 07<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"chapter-item\">\r\n                    <button class=\"chapter-header\" aria-expanded=\"false\">\r\n                        <span class=\"chapter-header-num\">07<\/span>\r\n                        <span class=\"chapter-header-title\">Turning Point<\/span>\r\n                        <span class=\"chapter-header-icon\"><\/span>\r\n                    <\/button>\r\n                    <div class=\"chapter-body\">\r\n                        <div class=\"chapter-body-inner\">\r\n                            <div class=\"chapter-body-content\">\r\n                                <p class=\"chapter-desc\">The moment it all clicked. When this foreign land started feeling like something that could, eventually, be called home.<\/p>\r\n                                <div class=\"chapter-quote\">\"Home isn't where you arrive. It's what you build.\"<\/div>\r\n                                <div class=\"chapter-progress\">Chapter 07 of 07<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', () => {\r\n\r\n            if (window.gsap && window.ScrollTrigger) {\r\n                gsap.registerPlugin(ScrollTrigger);\r\n\r\n                gsap.to('.timeline-progress', {\r\n                    height: '100%',\r\n                    ease: 'none',\r\n                    scrollTrigger: {\r\n                        trigger: '.timeline-track',\r\n                        start: 'top center',\r\n                        end: 'bottom center',\r\n                        scrub: 1\r\n                    }\r\n                });\r\n\r\n                gsap.utils.toArray('.milestone-row').forEach((row, i) => {\r\n                    const fromX = i % 2 === 0 ? 40 : -40;\r\n                    gsap.from(row, {\r\n                        x: fromX,\r\n                        opacity: 0,\r\n                        duration: 0.9,\r\n                        ease: 'power3.out',\r\n                        scrollTrigger: {\r\n                            trigger: row,\r\n                            start: 'top 85%'\r\n                        }\r\n                    });\r\n                });\r\n\r\n                gsap.from('.chapter-item', {\r\n                    y: 20,\r\n                    opacity: 0,\r\n                    stagger: 0.08,\r\n                    duration: 0.7,\r\n                    ease: 'power2.out',\r\n                    scrollTrigger: {\r\n                        trigger: '.chapter-accordion',\r\n                        start: 'top 80%'\r\n                    }\r\n                });\r\n\r\n                ScrollTrigger.refresh();\r\n            }\r\n\r\n            \/\/ Milestone click \/ keyboard toggle\r\n            const milestoneRows = document.querySelectorAll('.milestone-row');\r\n            milestoneRows.forEach(row => {\r\n                row.addEventListener('click', () => {\r\n                    const wasActive = row.classList.contains('is-active');\r\n                    milestoneRows.forEach(r => r.classList.remove('is-active'));\r\n                    if (!wasActive) row.classList.add('is-active');\r\n                });\r\n                row.addEventListener('keydown', (e) => {\r\n                    if (e.key === 'Enter' || e.key === ' ') {\r\n                        e.preventDefault();\r\n                        row.click();\r\n                    }\r\n                });\r\n            });\r\n\r\n            \/\/ Sticky index rail: click-to-scroll\r\n            const indexItems = document.querySelectorAll('.journey-index-item');\r\n            indexItems.forEach(item => {\r\n                item.addEventListener('click', () => {\r\n                    const target = document.querySelector('.milestone-row[data-index=\"' + item.getAttribute('data-target') + '\"]');\r\n                    if (target) target.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n                });\r\n            });\r\n\r\n            \/\/ Scrollspy: highlight rail item matching visible milestone\r\n            if ('IntersectionObserver' in window && indexItems.length) {\r\n                const observer = new IntersectionObserver((entries) => {\r\n                    entries.forEach(entry => {\r\n                        if (entry.isIntersecting) {\r\n                            const idx = entry.target.getAttribute('data-index');\r\n                            indexItems.forEach(i => i.classList.remove('is-current'));\r\n                            const match = document.querySelector('.journey-index-item[data-target=\"' + idx + '\"]');\r\n                            if (match) match.classList.add('is-current');\r\n                        }\r\n                    });\r\n                }, { rootMargin: '-45% 0px -45% 0px', threshold: 0 });\r\n\r\n                milestoneRows.forEach(row => observer.observe(row));\r\n            }\r\n\r\n            \/\/ Accordion logic (CSS grid-driven, no JS height calculation)\r\n            const chapterItems = document.querySelectorAll('.chapter-item');\r\n            chapterItems.forEach((item, i) => {\r\n                const header = item.querySelector('.chapter-header');\r\n                header.addEventListener('click', () => {\r\n                    const isActive = item.classList.contains('active');\r\n                    chapterItems.forEach(ci => {\r\n                        ci.classList.remove('active');\r\n                        ci.querySelector('.chapter-header').setAttribute('aria-expanded', 'false');\r\n                    });\r\n                    if (!isActive) {\r\n                        item.classList.add('active');\r\n                        header.setAttribute('aria-expanded', 'true');\r\n                    }\r\n                });\r\n                header.addEventListener('keydown', (e) => {\r\n                    if (e.key === 'ArrowDown') {\r\n                        e.preventDefault();\r\n                        chapterItems[(i + 1) % chapterItems.length].querySelector('.chapter-header').focus();\r\n                    } else if (e.key === 'ArrowUp') {\r\n                        e.preventDefault();\r\n                        chapterItems[(i - 1 + chapterItems.length) % chapterItems.length].querySelector('.chapter-header').focus();\r\n                    }\r\n                });\r\n            });\r\n        });\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-492f21b e-con-full e-flex e-con e-parent\" data-id=\"492f21b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-de4aa65 elementor-widget elementor-widget-html\" data-id=\"de4aa65\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@300;400;500;600&family=La+Belle+Aurore&display=swap\" rel=\"stylesheet\">\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n    <style>\r\n        :root {\r\n            --color-navy: #15202F;\r\n            --color-ivory: #F8F6F2;\r\n            --color-gold: #D4AF37;\r\n            --color-bronze: #CD7F32;\r\n            --color-bronze-glow: rgba(205,127,50,0.4);\r\n            --color-white: #ffffff;\r\n            --font-heading: 'Cormorant Garamond', serif;\r\n            --font-body: 'Inter', sans-serif;\r\n            --font-handwriting: 'La Belle Aurore', cursive;\r\n        }\r\n        *{margin:0;padding:0;box-sizing:border-box;}\r\n        html{scroll-behavior:smooth;}\r\n        body{font-family:var(--font-body);overflow-x:hidden;background:var(--color-navy);}\r\n\r\n        \/* ===================== SECTION 5 \u2014 MEMORABLE LESSONS ===================== *\/\r\n        .lessons-section{\r\n            position:relative;width:100%;min-height:100vh;\r\n            background:var(--color-navy);overflow:hidden;\r\n            display:flex;flex-direction:column;align-items:center;justify-content:center;\r\n            padding:8rem 5%;\r\n        }\r\n        \/* Blurred city skyline bg *\/\r\n        .lessons-bg{\r\n            position:absolute;inset:0;z-index:0;\r\n            background:\r\n                url('https:\/\/images.unsplash.com\/photo-1514565131-fce0801e5785?w=1920&q=60') center\/cover no-repeat;\r\n            filter:blur(12px) brightness(0.25);\r\n            transform:scale(1.1);\r\n        }\r\n        \/* Migration route SVG overlay *\/\r\n        .lessons-routes{\r\n            position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0.06;\r\n        }\r\n        .lessons-routes svg{width:100%;height:100%;}\r\n        \/* Bronze accent lines *\/\r\n        .lessons-accent-top,.lessons-accent-bottom{\r\n            position:absolute;left:50%;transform:translateX(-50%);\r\n            height:1px;z-index:2;\r\n            background:linear-gradient(90deg,transparent,var(--color-bronze),transparent);\r\n        }\r\n        .lessons-accent-top{top:6rem;width:40%;}\r\n        .lessons-accent-bottom{bottom:6rem;width:40%;}\r\n\r\n        \/* Header *\/\r\n        .lessons-header{\r\n            position:relative;z-index:3;text-align:center;margin-bottom:5rem;\r\n        }\r\n        .lessons-label{\r\n            font-family:var(--font-body);text-transform:uppercase;\r\n            letter-spacing:6px;font-size:0.7rem;color:var(--color-bronze);\r\n            margin-bottom:1.5rem;display:block;\r\n        }\r\n        .lessons-heading{\r\n            font-family:var(--font-heading);font-size:clamp(3rem,5vw,5.5rem);\r\n            font-weight:300;color:var(--color-white);line-height:1.1;\r\n        }\r\n        .lessons-heading em{color:var(--color-gold);font-style:italic;font-weight:400;}\r\n\r\n        \/* Lesson Carousel *\/\r\n        .lessons-stage{\r\n            position:relative;z-index:3;width:100%;max-width:1100px;\r\n            height:420px;display:flex;align-items:center;justify-content:center;\r\n        }\r\n        .lesson-slide{\r\n            position:absolute;inset:0;display:flex;flex-direction:column;\r\n            align-items:center;justify-content:center;opacity:0;\r\n            pointer-events:none;transition:opacity 1.2s cubic-bezier(.4,0,.2,1);\r\n        }\r\n        .lesson-slide.active{opacity:1;pointer-events:auto;}\r\n\r\n        \/* Animated quotation marks *\/\r\n        .lesson-quote-mark{\r\n            font-family:var(--font-heading);font-size:clamp(8rem,14vw,16rem);\r\n            color:rgba(205,127,50,0.12);line-height:0.7;\r\n            position:absolute;pointer-events:none;user-select:none;\r\n        }\r\n        .lesson-quote-open{top:-2rem;left:5%;}\r\n        .lesson-quote-close{bottom:0;right:5%;transform:rotate(180deg);}\r\n\r\n        \/* Oversized word *\/\r\n        .lesson-word{\r\n            font-family:var(--font-heading);\r\n            font-size:clamp(5rem,12vw,11rem);\r\n            font-weight:300;color:var(--color-white);\r\n            letter-spacing:-0.03em;line-height:1;\r\n            text-transform:uppercase;text-align:center;\r\n            position:relative;\r\n        }\r\n        .lesson-word::after{\r\n            content:'';display:block;width:60px;height:2px;\r\n            background:var(--color-bronze);margin:1.8rem auto 0;\r\n        }\r\n        .lesson-number{\r\n            font-family:var(--font-body);font-size:0.75rem;\r\n            letter-spacing:4px;text-transform:uppercase;\r\n            color:rgba(255,255,255,0.3);margin-top:1.2rem;\r\n        }\r\n\r\n        \/* Navigation dots *\/\r\n        .lessons-nav{\r\n            position:relative;z-index:4;display:flex;gap:1.2rem;\r\n            margin-top:3rem;align-items:center;\r\n        }\r\n        .lessons-dot{\r\n            width:10px;height:10px;border-radius:50%;\r\n            border:1px solid rgba(255,255,255,0.3);background:transparent;\r\n            cursor:pointer;transition:all 0.4s ease;position:relative;\r\n        }\r\n        .lessons-dot::before{\r\n            content:'';position:absolute;inset:-4px;border-radius:50%;\r\n            border:1px solid transparent;transition:border-color 0.4s;\r\n        }\r\n        .lessons-dot.active{\r\n            background:var(--color-gold);border-color:var(--color-gold);\r\n            box-shadow:0 0 12px rgba(212,175,55,0.5);\r\n        }\r\n        .lessons-dot.active::before{border-color:rgba(212,175,55,0.3);}\r\n        .lessons-dot:hover{border-color:var(--color-gold);transform:scale(1.3);}\r\n\r\n        \/* ===================== SECTION 6 \u2014 AUTHOR ===================== *\/\r\n        .author-section{\r\n            position:relative;width:100%;min-height:100vh;\r\n            background:var(--color-ivory);overflow:hidden;\r\n            padding:10rem 5% 8rem;\r\n        }\r\n        \/* Paper texture bg *\/\r\n        .author-texture{\r\n            position:absolute;inset:0;z-index:0;\r\n            opacity:0.08;pointer-events:none;\r\n            background-image:url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n            mix-blend-mode:multiply;\r\n        }\r\n        \/* Floating manuscript pages *\/\r\n        .manuscript-page{\r\n            position:absolute;z-index:1;pointer-events:none;\r\n            border:1px solid rgba(21,32,47,0.08);\r\n            background:linear-gradient(135deg,rgba(255,255,255,0.9),rgba(248,246,242,0.7));\r\n            box-shadow:0 8px 32px rgba(0,0,0,0.04);\r\n        }\r\n        .manuscript-page::before{\r\n            content:'';position:absolute;inset:12px;\r\n            background-image:repeating-linear-gradient(transparent,transparent 23px,rgba(21,32,47,0.04) 23px,rgba(21,32,47,0.04) 24px);\r\n        }\r\n        .ms-1{width:180px;height:240px;top:8%;right:8%;transform:rotate(12deg);}\r\n        .ms-2{width:140px;height:190px;bottom:12%;left:5%;transform:rotate(-8deg);}\r\n        .ms-3{width:120px;height:160px;top:55%;right:3%;transform:rotate(5deg);}\r\n\r\n        \/* Layout *\/\r\n        .author-container{\r\n            position:relative;z-index:3;max-width:1300px;margin:0 auto;\r\n            display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center;\r\n        }\r\n        \/* Portrait column *\/\r\n        .author-portrait-col{position:relative;}\r\n        .portrait-frame-outer{\r\n            position:relative;max-width:480px;margin:0 auto;\r\n        }\r\n        \/* Decorative offset frame *\/\r\n        .portrait-decor-frame{\r\n            position:absolute;top:-20px;left:-20px;right:20px;bottom:20px;\r\n            border:1px solid var(--color-gold);z-index:0;\r\n            transition:all 0.6s cubic-bezier(.2,.8,.2,1);\r\n        }\r\n        .portrait-frame-outer:hover .portrait-decor-frame{\r\n            top:-28px;left:-28px;\r\n        }\r\n        .portrait-main{\r\n            position:relative;z-index:1;width:100%;aspect-ratio:3\/4;\r\n            overflow:hidden;background:#d4cfc6;\r\n            box-shadow:0 30px 60px rgba(0,0,0,0.12);\r\n        }\r\n        .portrait-main img{\r\n            width:100%;height:100%;object-fit:cover;\r\n            transition:transform 0.8s cubic-bezier(.2,.8,.2,1);\r\n        }\r\n        .portrait-frame-outer:hover .portrait-main img{\r\n            transform:scale(1.06);\r\n        }\r\n        \/* Signature overlay *\/\r\n        .portrait-signature{\r\n            position:absolute;bottom:-30px;right:-20px;z-index:2;\r\n            font-family:var(--font-handwriting);font-size:2.2rem;\r\n            color:var(--color-gold);transform:rotate(-6deg);\r\n            opacity:0.85;\r\n        }\r\n        \/* Handwritten note card *\/\r\n        .portrait-note{\r\n            position:absolute;bottom:40px;left:-50px;z-index:4;\r\n            background:#fff;padding:1.5rem 2rem;\r\n            box-shadow:0 10px 30px rgba(0,0,0,0.08);\r\n            transform:rotate(-4deg);max-width:220px;\r\n            border-left:3px solid var(--color-gold);\r\n            transition:transform 0.5s ease;\r\n        }\r\n        .portrait-frame-outer:hover .portrait-note{\r\n            transform:rotate(-2deg) translateY(-5px);\r\n        }\r\n        .portrait-note p{\r\n            font-family:var(--font-handwriting);font-size:1.1rem;\r\n            color:var(--color-navy);line-height:1.5;\r\n        }\r\n\r\n        \/* Content column *\/\r\n        .author-content{position:relative;}\r\n        .author-label{\r\n            font-family:var(--font-body);text-transform:uppercase;\r\n            letter-spacing:5px;font-size:0.7rem;color:var(--color-bronze);\r\n            margin-bottom:1.5rem;display:block;\r\n        }\r\n        .author-divider{\r\n            width:60px;height:2px;background:var(--color-gold);\r\n            margin-bottom:2.5rem;position:relative;overflow:hidden;\r\n        }\r\n        .author-divider::after{\r\n            content:'';position:absolute;top:0;left:-100%;\r\n            width:100%;height:100%;\r\n            background:linear-gradient(90deg,transparent,#fff,transparent);\r\n            animation:shimmer 3s infinite;\r\n        }\r\n        @keyframes shimmer{100%{left:100%;}}\r\n        .author-name{\r\n            font-family:var(--font-heading);\r\n            font-size:clamp(2.8rem,4vw,4.2rem);\r\n            font-weight:400;color:var(--color-navy);\r\n            line-height:1.15;margin-bottom:2.5rem;\r\n        }\r\n        .author-name em{color:var(--color-gold);font-style:italic;}\r\n        .author-text{\r\n            font-family:var(--font-body);font-size:1.1rem;\r\n            line-height:1.9;color:rgba(21,32,47,0.8);\r\n            margin-bottom:1.5rem;font-weight:400;\r\n        }\r\n        .author-text:first-of-type{\r\n            font-family:var(--font-heading);font-size:1.35rem;\r\n            color:var(--color-navy);line-height:1.6;font-weight:400;\r\n        }\r\n        \/* Decorative big quote *\/\r\n        .author-big-quote{\r\n            position:absolute;top:-60px;left:-30px;\r\n            font-family:var(--font-heading);font-size:14rem;\r\n            color:rgba(212,175,55,0.07);line-height:1;\r\n            pointer-events:none;user-select:none;z-index:-1;\r\n        }\r\n        \/* Stats row *\/\r\n        .author-stats{\r\n            display:flex;gap:3rem;margin-top:3rem;\r\n            padding-top:2.5rem;border-top:1px solid rgba(21,32,47,0.1);\r\n        }\r\n        .stat-item{text-align:left;}\r\n        .stat-number{\r\n            font-family:var(--font-heading);font-size:2.8rem;\r\n            color:var(--color-navy);font-weight:500;line-height:1;\r\n        }\r\n        .stat-label{\r\n            font-family:var(--font-body);font-size:0.7rem;\r\n            text-transform:uppercase;letter-spacing:3px;\r\n            color:var(--color-bronze);margin-top:0.5rem;\r\n        }\r\n\r\n        \/* ===================== RESPONSIVE ===================== *\/\r\n        @media(max-width:1024px){\r\n            .author-container{grid-template-columns:1fr;gap:4rem;}\r\n            .author-portrait-col{order:1;max-width:500px;margin:0 auto;}\r\n            .author-content{order:2;}\r\n            .lessons-stage{height:320px;}\r\n        }\r\n        @media(max-width:768px){\r\n            .lessons-section{padding:5rem 5%;}\r\n            .lesson-word{font-size:clamp(3.5rem,10vw,6rem);}\r\n            .lessons-stage{height:260px;}\r\n            .author-section{padding:6rem 5%;}\r\n            .portrait-note{left:-10px;bottom:20px;}\r\n            .portrait-decor-frame{top:-12px;left:-12px;right:12px;bottom:12px;}\r\n            .author-stats{gap:2rem;flex-wrap:wrap;}\r\n            .ms-1,.ms-3{display:none;}\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- ==================== SECTION 5 \u2014 MEMORABLE LESSONS ==================== -->\r\n<section class=\"lessons-section\" id=\"lessons\">\r\n    <div class=\"lessons-bg\"><\/div>\r\n\r\n    <!-- Migration route lines -->\r\n    <div class=\"lessons-routes\">\r\n        <svg viewBox=\"0 0 1200 600\" preserveAspectRatio=\"none\">\r\n            <path d=\"M0,300 Q300,100 600,280 T1200,250\" stroke=\"white\" stroke-width=\"1.5\" fill=\"none\" stroke-dasharray=\"8 6\"\/>\r\n            <path d=\"M0,400 Q400,200 800,350 T1200,300\" stroke=\"white\" stroke-width=\"1\" fill=\"none\" stroke-dasharray=\"4 8\"\/>\r\n            <circle cx=\"600\" cy=\"278\" r=\"4\" fill=\"white\"\/>\r\n            <circle cx=\"200\" cy=\"340\" r=\"3\" fill=\"white\"\/>\r\n            <circle cx=\"1000\" cy=\"285\" r=\"3\" fill=\"white\"\/>\r\n        <\/svg>\r\n    <\/div>\r\n\r\n    <div class=\"lessons-accent-top\"><\/div>\r\n    <div class=\"lessons-accent-bottom\"><\/div>\r\n\r\n    <!-- Header -->\r\n    <div class=\"lessons-header\">\r\n        <!--<span class=\"lessons-label\">Section Five<\/span>-->\r\n        <h2 class=\"lessons-heading\">Memorable <em>Lessons<\/em><\/h2>\r\n    <\/div>\r\n\r\n    <!-- Lesson Carousel -->\r\n    <div class=\"lessons-stage\" id=\"lessonsStage\">\r\n        <div class=\"lesson-slide active\" data-index=\"0\">\r\n            <span class=\"lesson-quote-mark lesson-quote-open\">&ldquo;<\/span>\r\n            <span class=\"lesson-quote-mark lesson-quote-close\">&ldquo;<\/span>\r\n            <div class=\"lesson-word\">Resilience<\/div>\r\n            <div class=\"lesson-number\">01 \/ 06<\/div>\r\n        <\/div>\r\n        <div class=\"lesson-slide\" data-index=\"1\">\r\n            <span class=\"lesson-quote-mark lesson-quote-open\">&ldquo;<\/span>\r\n            <span class=\"lesson-quote-mark lesson-quote-close\">&ldquo;<\/span>\r\n            <div class=\"lesson-word\">Adaptation<\/div>\r\n            <div class=\"lesson-number\">02 \/ 06<\/div>\r\n        <\/div>\r\n        <div class=\"lesson-slide\" data-index=\"2\">\r\n            <span class=\"lesson-quote-mark lesson-quote-open\">&ldquo;<\/span>\r\n            <span class=\"lesson-quote-mark lesson-quote-close\">&ldquo;<\/span>\r\n            <div class=\"lesson-word\">Identity<\/div>\r\n            <div class=\"lesson-number\">03 \/ 06<\/div>\r\n        <\/div>\r\n        <div class=\"lesson-slide\" data-index=\"3\">\r\n            <span class=\"lesson-quote-mark lesson-quote-open\">&ldquo;<\/span>\r\n            <span class=\"lesson-quote-mark lesson-quote-close\">&ldquo;<\/span>\r\n            <div class=\"lesson-word\">Faith<\/div>\r\n            <div class=\"lesson-number\">04 \/ 06<\/div>\r\n        <\/div>\r\n        <div class=\"lesson-slide\" data-index=\"4\">\r\n            <span class=\"lesson-quote-mark lesson-quote-open\">&ldquo;<\/span>\r\n            <span class=\"lesson-quote-mark lesson-quote-close\">&ldquo;<\/span>\r\n            <div class=\"lesson-word\">Family<\/div>\r\n            <div class=\"lesson-number\">05 \/ 06<\/div>\r\n        <\/div>\r\n        <div class=\"lesson-slide\" data-index=\"5\">\r\n            <span class=\"lesson-quote-mark lesson-quote-open\">&ldquo;<\/span>\r\n            <span class=\"lesson-quote-mark lesson-quote-close\">&ldquo;<\/span>\r\n            <div class=\"lesson-word\">Hope<\/div>\r\n            <div class=\"lesson-number\">06 \/ 06<\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Navigation -->\r\n    <div class=\"lessons-nav\" id=\"lessonsNav\">\r\n        <div class=\"lessons-dot active\" data-slide=\"0\"><\/div>\r\n        <div class=\"lessons-dot\" data-slide=\"1\"><\/div>\r\n        <div class=\"lessons-dot\" data-slide=\"2\"><\/div>\r\n        <div class=\"lessons-dot\" data-slide=\"3\"><\/div>\r\n        <div class=\"lessons-dot\" data-slide=\"4\"><\/div>\r\n        <div class=\"lessons-dot\" data-slide=\"5\"><\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- ==================== SECTION 6 \u2014 AUTHOR ==================== -->\r\n<section class=\"author-section\" id=\"author\">\r\n    <div class=\"author-texture\"><\/div>\r\n\r\n    <!-- Floating manuscript pages -->\r\n    <div class=\"manuscript-page ms-1\"><\/div>\r\n    <div class=\"manuscript-page ms-2\"><\/div>\r\n    <div class=\"manuscript-page ms-3\"><\/div>\r\n\r\n    <div class=\"author-container\">\r\n        <!-- Portrait -->\r\n        <div class=\"author-portrait-col\">\r\n            <div class=\"portrait-frame-outer\">\r\n                <div class=\"portrait-decor-frame\"><\/div>\r\n                <div class=\"portrait-main\">\r\n                    <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/Aderemi\/wp-content\/uploads\/2026\/07\/author.png\" alt=\"Aderemi Ogunsuyi portrait\">\r\n                <\/div>\r\n                <div class=\"portrait-signature\">Aderemi<\/div>\r\n                <div class=\"portrait-note\">\r\n                    <p>\"Every page carries a piece of home.\"<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <!-- Content -->\r\n        <div class=\"author-content\">\r\n            <div class=\"author-big-quote\">&ldquo;<\/div>\r\n            <span class=\"author-label\">About the Author<\/span>\r\n            <div class=\"author-divider\"><\/div>\r\n            <h2 class=\"author-name\">Meet <em>Aderemi<\/em> Ogunsuyi<\/h2>\r\n            <p class=\"author-text\">\r\n                Aderemi Ogunsuyi shares a deeply personal perspective on immigration, identity, resilience, and the pursuit of a better future.\r\n            <\/p>\r\n            <p class=\"author-text\">\r\n                Through authentic storytelling, humor, and heartfelt reflection, he captures the realities of beginning again in a foreign land while remaining connected to home.\r\n            <\/p>\r\n            <!--<div class=\"author-stats\">-->\r\n            <!--    <div class=\"stat-item\">-->\r\n            <!--        <div class=\"stat-number\">1<\/div>-->\r\n            <!--        <div class=\"stat-label\">Debut Book<\/div>-->\r\n            <!--    <\/div>-->\r\n            <!--    <div class=\"stat-item\">-->\r\n            <!--        <div class=\"stat-number\">20+<\/div>-->\r\n            <!--        <div class=\"stat-label\">Years Abroad<\/div>-->\r\n            <!--    <\/div>-->\r\n            <!--    <div class=\"stat-item\">-->\r\n            <!--        <div class=\"stat-number\">&infin;<\/div>-->\r\n            <!--        <div class=\"stat-label\">Stories to Tell<\/div>-->\r\n            <!--    <\/div>-->\r\n            <!--<\/div>-->\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\ngsap.registerPlugin(ScrollTrigger);\r\n\r\n\/* \u2014\u2014\u2014 LESSONS CAROUSEL \u2014\u2014\u2014 *\/\r\nconst slides = document.querySelectorAll('.lesson-slide');\r\nconst dots = document.querySelectorAll('.lessons-dot');\r\nlet currentSlide = 0;\r\nlet autoTimer;\r\n\r\nfunction goToSlide(idx) {\r\n    slides[currentSlide].classList.remove('active');\r\n    dots[currentSlide].classList.remove('active');\r\n    currentSlide = idx;\r\n    slides[currentSlide].classList.add('active');\r\n    dots[currentSlide].classList.add('active');\r\n\r\n    \/\/ Animate the quote marks for the active slide\r\n    const activeSlide = slides[currentSlide];\r\n    gsap.fromTo(activeSlide.querySelectorAll('.lesson-quote-mark'),\r\n        { scale: 0.7, opacity: 0 },\r\n        { scale: 1, opacity: 1, duration: 1.2, ease: 'elastic.out(1,0.5)', stagger: 0.15 }\r\n    );\r\n    gsap.fromTo(activeSlide.querySelector('.lesson-word'),\r\n        { y: 40, opacity: 0 },\r\n        { y: 0, opacity: 1, duration: 0.9, ease: 'power3.out', delay: 0.2 }\r\n    );\r\n    gsap.fromTo(activeSlide.querySelector('.lesson-number'),\r\n        { opacity: 0 },\r\n        { opacity: 1, duration: 0.6, delay: 0.5 }\r\n    );\r\n}\r\n\r\ndots.forEach(dot => {\r\n    dot.addEventListener('click', () => {\r\n        clearInterval(autoTimer);\r\n        goToSlide(parseInt(dot.dataset.slide));\r\n        startAuto();\r\n    });\r\n});\r\n\r\nfunction startAuto() {\r\n    autoTimer = setInterval(() => {\r\n        goToSlide((currentSlide + 1) % slides.length);\r\n    }, 3500);\r\n}\r\nstartAuto();\r\n\r\n\/* \u2014\u2014\u2014 LESSONS SCROLL ANIMATIONS \u2014\u2014\u2014 *\/\r\ngsap.from('.lessons-header', {\r\n    y: 60, opacity: 0, duration: 1.2,\r\n    scrollTrigger: { trigger: '.lessons-section', start: 'top 75%' }\r\n});\r\ngsap.from('.lessons-accent-top', {\r\n    width: 0, duration: 1.5, ease: 'power3.inOut',\r\n    scrollTrigger: { trigger: '.lessons-section', start: 'top 70%' }\r\n});\r\ngsap.from('.lessons-accent-bottom', {\r\n    width: 0, duration: 1.5, ease: 'power3.inOut', delay: 0.3,\r\n    scrollTrigger: { trigger: '.lessons-section', start: 'top 70%' }\r\n});\r\n\r\n\/\/ Floating quote marks continuous pulse\r\ngsap.to('.lesson-quote-mark', {\r\n    scale: 1.05, duration: 2.5, repeat: -1, yoyo: true, ease: 'sine.inOut'\r\n});\r\n\r\n\/* \u2014\u2014\u2014 MANUSCRIPT PAGE FLOATING \u2014\u2014\u2014 *\/\r\ndocument.querySelectorAll('.manuscript-page').forEach((pg, i) => {\r\n    gsap.to(pg, {\r\n        y: `${i % 2 === 0 ? '-' : '+'}=18`,\r\n        x: `${i % 2 === 0 ? '+' : '-'}=8`,\r\n        rotation: `+=${i % 2 === 0 ? 3 : -2}`,\r\n        duration: 5 + i, repeat: -1, yoyo: true, ease: 'sine.inOut',\r\n        delay: i * 0.8\r\n    });\r\n});\r\n\r\n\/* \u2014\u2014\u2014 AUTHOR SCROLL ANIMATIONS \u2014\u2014\u2014 *\/\r\nconst tlAuthor = gsap.timeline({\r\n    scrollTrigger: { trigger: '.author-section', start: 'top 65%' }\r\n});\r\n\r\ntlAuthor\r\n    .from('.portrait-decor-frame', { opacity: 0, x: -40, duration: 1, ease: 'power3.out' })\r\n    .from('.portrait-main', { opacity: 0, y: 60, duration: 1, ease: 'power3.out' }, '-=0.7')\r\n    .from('.portrait-signature', { opacity: 0, scale: 0.5, duration: 0.8, ease: 'back.out(1.5)' }, '-=0.5')\r\n    .from('.portrait-note', { opacity: 0, x: -30, rotation: -10, duration: 0.8, ease: 'power3.out' }, '-=0.4')\r\n    .from('.author-label', { x: -30, opacity: 0, duration: 0.8 }, '-=0.8')\r\n    .from('.author-divider', { width: 0, duration: 0.8, ease: 'power3.inOut' }, '-=0.5')\r\n    .from('.author-name', { y: 30, opacity: 0, duration: 0.8 }, '-=0.4')\r\n    .from('.author-text', { y: 20, opacity: 0, duration: 0.7, stagger: 0.15 }, '-=0.3')\r\n    .from('.stat-item', { y: 30, opacity: 0, duration: 0.6, stagger: 0.12 }, '-=0.3');\r\n\r\n\/\/ Parallax on manuscript pages\r\ngsap.to('.ms-1', { y: -50, ease: 'none', scrollTrigger: { trigger: '.author-section', start: 'top bottom', end: 'bottom top', scrub: true } });\r\ngsap.to('.ms-2', { y: 40, ease: 'none', scrollTrigger: { trigger: '.author-section', start: 'top bottom', end: 'bottom top', scrub: true } });\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-88b20ee e-con-full e-flex e-con e-parent\" data-id=\"88b20ee\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7c006c3 elementor-widget elementor-widget-html\" data-id=\"7c006c3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@300;400;500;600&family=La+Belle+Aurore&display=swap\" rel=\"stylesheet\">\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n    <style>\r\n        :root {\r\n            --color-navy: #15202F;\r\n            --color-navy-deep: #0D1520;\r\n            --color-ivory: #F8F6F2;\r\n            --color-gold: #D4AF37;\r\n            --color-bronze: #CD7F32;\r\n            --color-bronze-glow: rgba(205,127,50,0.4);\r\n            --color-white: #ffffff;\r\n            --font-heading: 'Cormorant Garamond', serif;\r\n            --font-body: 'Inter', sans-serif;\r\n            --font-handwriting: 'La Belle Aurore', cursive;\r\n        }\r\n\r\n        * { margin: 0; padding: 0; box-sizing: border-box; }\r\n        html { scroll-behavior: smooth; }\r\n        body {\r\n            font-family: var(--font-body);\r\n            overflow-x: hidden;\r\n            background: var(--color-navy-deep);\r\n        }\r\n\r\n        \/* ===================== SECTION 9 \u2014 BUY THE BOOK ===================== *\/\r\n        .cta-section {\r\n            position: relative;\r\n            width: 100%;\r\n            min-height: 100vh;\r\n            background: radial-gradient(ellipse at 50% 60%, rgba(21,32,47,1) 0%, var(--color-navy-deep) 70%);\r\n            overflow: hidden;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            padding: 8rem 5%;\r\n        }\r\n\r\n        \/* Subtle star-like dots in background *\/\r\n        .cta-stars {\r\n            position: absolute;\r\n            inset: 0;\r\n            z-index: 0;\r\n            pointer-events: none;\r\n        }\r\n        .cta-star {\r\n            position: absolute;\r\n            width: 2px;\r\n            height: 2px;\r\n            background: rgba(255,255,255,0.25);\r\n            border-radius: 50%;\r\n        }\r\n\r\n        \/* Particle canvas *\/\r\n        .cta-particles {\r\n            position: absolute;\r\n            inset: 0;\r\n            z-index: 1;\r\n            pointer-events: none;\r\n        }\r\n        .cta-particle {\r\n            position: absolute;\r\n            border-radius: 50%;\r\n            pointer-events: none;\r\n        }\r\n\r\n        \/* Bronze spotlight *\/\r\n        .cta-spotlight {\r\n            position: absolute;\r\n            bottom: -18%;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            width: 700px;\r\n            height: 700px;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(205,127,50,0.10) 0%, rgba(205,127,50,0.04) 40%, transparent 70%);\r\n            z-index: 1;\r\n            pointer-events: none;\r\n        }\r\n        \/* Secondary inner glow *\/\r\n        .cta-spotlight-inner {\r\n            position: absolute;\r\n            bottom: -8%;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            width: 400px;\r\n            height: 400px;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(212,175,55,0.08) 0%, transparent 60%);\r\n            z-index: 1;\r\n            pointer-events: none;\r\n        }\r\n\r\n        \/* Decorative bronze ring *\/\r\n        .cta-ring {\r\n            position: absolute;\r\n            bottom: 8%;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            width: 520px;\r\n            height: 520px;\r\n            border-radius: 50%;\r\n            border: 1px solid rgba(205,127,50,0.08);\r\n            z-index: 1;\r\n            pointer-events: none;\r\n        }\r\n        .cta-ring-2 {\r\n            position: absolute;\r\n            bottom: 5%;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            width: 620px;\r\n            height: 620px;\r\n            border-radius: 50%;\r\n            border: 1px solid rgba(205,127,50,0.04);\r\n            z-index: 1;\r\n            pointer-events: none;\r\n        }\r\n\r\n        \/* Main layout *\/\r\n        .cta-container {\r\n            position: relative;\r\n            z-index: 10;\r\n            max-width: 1200px;\r\n            width: 100%;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            text-align: center;\r\n        }\r\n\r\n        \/* Section label *\/\r\n        .cta-label {\r\n            font-family: var(--font-body);\r\n            text-transform: uppercase;\r\n            letter-spacing: 6px;\r\n            font-size: 0.7rem;\r\n            color: var(--color-bronze);\r\n            margin-bottom: 1rem;\r\n            display: block;\r\n        }\r\n\r\n        \/* Bronze divider *\/\r\n        .cta-divider {\r\n            width: 50px;\r\n            height: 1px;\r\n            background: linear-gradient(90deg, transparent, var(--color-gold), transparent);\r\n            margin: 0 auto 3.5rem;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        .cta-divider::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0; left: -100%;\r\n            width: 100%; height: 100%;\r\n            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);\r\n            animation: ctaShimmer 4s infinite;\r\n        }\r\n        @keyframes ctaShimmer { 100% { left: 100%; } }\r\n\r\n        \/* Book showcase area *\/\r\n        .cta-book-showcase {\r\n            position: relative;\r\n            margin-bottom: 4rem;\r\n            perspective: 1200px;\r\n        }\r\n\r\n        \/* Book shadow on \"ground\" *\/\r\n        .cta-book-shadow {\r\n            position: absolute;\r\n            bottom: -30px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            width: 220px;\r\n            height: 30px;\r\n            background: radial-gradient(ellipse, rgba(0,0,0,0.4) 0%, transparent 70%);\r\n            border-radius: 50%;\r\n            filter: blur(8px);\r\n            z-index: 0;\r\n        }\r\n\r\n        .cta-book-image-wrapper{\r\n    position: relative;\r\n    z-index: 2;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\n\r\n.cta-book-image{\r\n    width: 100%;\r\n    max-width: 380px !important; \/* Adjust as needed *\/\r\n    height: auto;\r\n    display: block;\r\n    object-fit: contain;\r\n    filter: drop-shadow(0 35px 60px rgba(0,0,0,.35));\r\n    transition: transform .5s ease, filter .5s ease;\r\n}\r\n\r\n.cta-book-image-wrapper:hover .cta-book-image{\r\n    transform: translateY(-10px) scale(1.03);\r\n    filter: drop-shadow(0 45px 80px rgba(0,0,0,.45));\r\n}\r\n\r\n.cta-book-shadow{\r\n    position: absolute;\r\n    left: 50%;\r\n    bottom: -10px;\r\n    transform: translateX(-50%);\r\n    width: 60%;\r\n    height: 35px;\r\n    background: rgba(0,0,0,.35);\r\n    border-radius: 50%;\r\n    filter: blur(18px);\r\n    z-index: 1;\r\n}\r\n\r\n        \/* Glow ring around book *\/\r\n        .cta-book-glow {\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n            width: 320px;\r\n            height: 320px;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(212,175,55,0.06) 0%, transparent 60%);\r\n            pointer-events: none;\r\n            z-index: 0;\r\n        }\r\n\r\n        \/* Headline *\/\r\n        .cta-headline {\r\n            font-family: var(--font-heading);\r\n            font-size: clamp(2.8rem, 4.5vw, 4.5rem);\r\n            font-weight: 400;\r\n            color: var(--color-white);\r\n            line-height: 1.15;\r\n            margin-bottom: 2rem;\r\n            letter-spacing: -0.02em;\r\n        }\r\n        .cta-headline em {\r\n            color: var(--color-gold);\r\n            font-style: italic;\r\n        }\r\n\r\n        \/* Description text *\/\r\n        .cta-text {\r\n            font-family: var(--font-body);\r\n            font-size: 1.1rem;\r\n            line-height: 1.85;\r\n            color: rgba(255,255,255,0.6);\r\n            max-width: 680px;\r\n            margin: 0 auto 4rem;\r\n            font-weight: 300;\r\n        }\r\n\r\n        \/* Retailer buttons *\/\r\n        .cta-buttons {\r\n            display: flex;\r\n            gap: 1.2rem;\r\n            flex-wrap: wrap;\r\n            justify-content: center;\r\n            margin-bottom: 3rem;\r\n        }\r\n\r\n        .cta-btn {\r\n            position: relative;\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 0.7rem;\r\n            padding: 1.1rem 2.4rem;\r\n            font-family: var(--font-body);\r\n            font-size: 0.8rem;\r\n            font-weight: 500;\r\n            text-transform: uppercase;\r\n            letter-spacing: 2.5px;\r\n            text-decoration: none;\r\n            color: var(--color-white);\r\n            border: 1px solid rgba(255,255,255,0.12);\r\n            background: rgba(255,255,255,0.03);\r\n            backdrop-filter: blur(10px);\r\n            overflow: hidden;\r\n            cursor: pointer;\r\n            transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n        }\r\n        .cta-btn::before {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: 0; left: 0;\r\n            width: 100%; height: 0;\r\n            background: linear-gradient(135deg, var(--color-gold), var(--color-bronze));\r\n            transition: height 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n            z-index: 0;\r\n        }\r\n        .cta-btn:hover::before {\r\n            height: 100%;\r\n        }\r\n        .cta-btn:hover {\r\n            border-color: var(--color-gold);\r\n            color: var(--color-navy-deep);\r\n            box-shadow: 0 0 30px rgba(212,175,55,0.2);\r\n            transform: translateY(-3px);\r\n        }\r\n        .cta-btn span,\r\n        .cta-btn svg {\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n        .cta-btn svg {\r\n            width: 18px;\r\n            height: 18px;\r\n            fill: currentColor;\r\n            transition: transform 0.4s ease;\r\n        }\r\n        .cta-btn:hover svg {\r\n            transform: scale(1.15);\r\n        }\r\n\r\n        \/* Accent bottom line *\/\r\n        .cta-accent-line {\r\n            width: 1px;\r\n            height: 80px;\r\n            background: linear-gradient(to bottom, var(--color-bronze), transparent);\r\n            margin: 0 auto;\r\n            opacity: 0.4;\r\n        }\r\n\r\n        \/* Handwritten note *\/\r\n        .cta-handwritten {\r\n            font-family: var(--font-handwriting);\r\n            font-size: 1.4rem;\r\n            color: var(--color-gold);\r\n            opacity: 0.6;\r\n            transform: rotate(-3deg);\r\n            margin-top: 2rem;\r\n        }\r\n\r\n        \/* ===================== RESPONSIVE ===================== *\/\r\n        @media (max-width: 768px) {\r\n            .cta-section { padding: 5rem 5%; }\r\n            .cta-book-3d { width: 200px; height: 290px; }\r\n            .cta-book-glow { width: 240px; height: 240px; }\r\n            .cta-spotlight { width: 400px; height: 400px; }\r\n            .cta-spotlight-inner { width: 250px; height: 250px; }\r\n            .cta-ring, .cta-ring-2 { display: none; }\r\n            .cta-buttons { flex-direction: column; align-items: center; }\r\n            .cta-btn { width: 100%; max-width: 300px; justify-content: center; }\r\n            .cta-book-shadow { width: 160px; }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .cta-headline { font-size: 2.2rem; }\r\n            .cta-text { font-size: 0.95rem; }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- ==================== SECTION 9 \u2014 BUY THE BOOK ==================== -->\r\n<section class=\"cta-section\" id=\"buyBook\">\r\n\r\n    <!-- Background stars -->\r\n    <div class=\"cta-stars\" id=\"ctaStars\"><\/div>\r\n\r\n    <!-- Particle layer -->\r\n    <div class=\"cta-particles\" id=\"ctaParticles\"><\/div>\r\n\r\n    <!-- Bronze spotlight -->\r\n    <div class=\"cta-spotlight\"><\/div>\r\n    <div class=\"cta-spotlight-inner\"><\/div>\r\n    <div class=\"cta-ring\"><\/div>\r\n    <div class=\"cta-ring-2\"><\/div>\r\n\r\n    <div class=\"cta-container\">\r\n\r\n        <!-- Label -->\r\n        <!--<span class=\"cta-label\">Section Nine<\/span>-->\r\n        <div class=\"cta-divider\"><\/div>\r\n\r\n        <!-- Book Showcase -->\r\n        <div class=\"cta-book-showcase\">\r\n    <div class=\"cta-book-glow\"><\/div>\r\n\r\n    <div class=\"cta-book-image-wrapper\">\r\n        <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/Aderemi\/wp-content\/uploads\/2026\/07\/aderemi-book-mockup.png\" alt=\"Book Cover\" class=\"cta-book-image\">\r\n    <\/div>\r\n\r\n    <div class=\"cta-book-shadow\"><\/div>\r\n<\/div>\r\n\r\n        <!-- Headline -->\r\n        <h2 class=\"cta-headline\">Begin the <em>Journey<\/em> Today<\/h2>\r\n\r\n        <!-- Description -->\r\n        <p class=\"cta-text\">\r\n            Whether you're an immigrant, a dreamer, or someone searching for hope through another person's story, <em style=\"color:rgba(255,255,255,0.85);font-style:normal;font-weight:500;\">Living in America<\/em> offers an honest and inspiring perspective on resilience, identity, and transformation.\r\n        <\/p>\r\n\r\n        <!-- Retailer Buttons -->\r\n        <div class=\"cta-buttons\">\r\n            <a href=\"https:\/\/a.co\/d\/03OUPQKz\" class=\"cta-btn\" id=\"btnAmazon\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M1.04 17.52q.1-.16.32-.02 .96.56 2.04.88t2.28.56 2.36.2q1.56 0 3.08-.36t2.72-1.04q.16-.08.24.04t-.04.24q-.4.4-1.08.8t-1.56.72-1.86.54-2.1.28-2.14-.12-2.12-.62-1.86-1.06q-.12-.08-.08-.16zm6.72-1.6q-.2-.24-.64-.12-.28.08-.56.2t-.52.28-.44.28l-.2.12q-.08.08-.04.16t.16.04l.48-.12q.84-.24 1.44-.12t.82.48q.08.12.04.2t-.24.12-.32.04q-.64.08-1.48-.08-.8-.12-1.12-.2-.08-.04-.08.08t.08.16q.04.04.24.12t.28.12q.6.24 1.44.32t1.44-.04.72-.4q.16-.12.2-.32t-.08-.36-.34-.3zM14.58 15.04q.12-.16.04-.24-.4-.56-1.12-.88-.72-.36-1.56-.36-.84 0-1.52.28t-1.08.72-.48.96q0 .56.36.96t.96.64q.6.2 1.2.24.6 0 1.2-.08.56-.08 1.08-.28.08-.04.08-.12t-.08-.12q-.64-.16-1.24-.16-.6 0-1.16-.08-.56-.08-.88-.32t-.32-.64q0-.28.2-.52t.52-.4.7-.2q.68-.08 1.12.12t.76.48q.12.16.22.12zM21.8 16.72q.04-.08-.04-.16-.36-.2-.88-.32t-1.04-.08q-.16 0-.44.04t-.4.04q-.08.04-.08.08t.04.08l.12.08q.16.08.32.16t.24.12q.52.2 1.04.28t1.04-.04q.08-.04.08-.12v-.08z\"\/><\/svg>\r\n                <span>Amazon<\/span>\r\n            <\/a>\r\n            <a href=\"https:\/\/www.barnesandnoble.com\/w\/living-in-america-aderemi-ogunsuyi\/1150819099?ean=2940185515709\" class=\"cta-btn\" id=\"btnBarnes\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M4 2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm4 4v12h2V6H8zm4 0v12h2V6h-2zm4 0v12h2V6h-2z\"\/><\/svg>\r\n                <span>Barnes & Noble<\/span>\r\n            <\/a>\r\n            <!--<a href=\"#\" class=\"cta-btn\" id=\"btnBookshop\">-->\r\n            <!--    <svg viewBox=\"0 0 24 24\"><path d=\"M21 4H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zM6 18V6h2v12H6zm4 0V6h8v12h-8z\"\/><\/svg>-->\r\n            <!--    <span>Bookshop<\/span>-->\r\n            <!--<\/a>-->\r\n            <!--<a href=\"#\" class=\"cta-btn\" id=\"btnGoogle\">-->\r\n            <!--    <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z\"\/><\/svg>-->\r\n            <!--    <span>Google Books<\/span>-->\r\n            <!--<\/a>-->\r\n        <\/div>\r\n\r\n        <!-- Decorative bottom -->\r\n        <div class=\"cta-accent-line\"><\/div>\r\n        <div class=\"cta-handwritten\">your story begins here<\/div>\r\n\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\ngsap.registerPlugin(ScrollTrigger);\r\n\r\n\/* \u2014\u2014\u2014 BACKGROUND STARS \u2014\u2014\u2014 *\/\r\nconst starsContainer = document.getElementById('ctaStars');\r\nfor (let i = 0; i < 80; i++) {\r\n    const star = document.createElement('div');\r\n    star.classList.add('cta-star');\r\n    star.style.left = Math.random() * 100 + '%';\r\n    star.style.top = Math.random() * 100 + '%';\r\n    star.style.opacity = Math.random() * 0.4 + 0.1;\r\n    const s = Math.random() * 2 + 1;\r\n    star.style.width = s + 'px';\r\n    star.style.height = s + 'px';\r\n    starsContainer.appendChild(star);\r\n    gsap.to(star, {\r\n        opacity: Math.random() * 0.15,\r\n        duration: Math.random() * 3 + 2,\r\n        repeat: -1,\r\n        yoyo: true,\r\n        ease: 'sine.inOut',\r\n        delay: Math.random() * 3\r\n    });\r\n}\r\n\r\n\/* \u2014\u2014\u2014 FLOATING PARTICLES \u2014\u2014\u2014 *\/\r\nconst particlesContainer = document.getElementById('ctaParticles');\r\nfor (let i = 0; i < 30; i++) {\r\n    const p = document.createElement('div');\r\n    p.classList.add('cta-particle');\r\n    const size = Math.random() * 3 + 1;\r\n    p.style.width = size + 'px';\r\n    p.style.height = size + 'px';\r\n    p.style.left = Math.random() * 100 + '%';\r\n    p.style.top = Math.random() * 100 + '%';\r\n    const isGold = Math.random() > 0.5;\r\n    p.style.background = isGold\r\n        ? 'rgba(212,175,55,' + (Math.random() * 0.3 + 0.1) + ')'\r\n        : 'rgba(255,255,255,' + (Math.random() * 0.15 + 0.05) + ')';\r\n    particlesContainer.appendChild(p);\r\n\r\n    gsap.to(p, {\r\n        y: `-=${Math.random() * 120 + 60}`,\r\n        x: `+=${(Math.random() - 0.5) * 60}`,\r\n        opacity: 0,\r\n        duration: Math.random() * 12 + 8,\r\n        repeat: -1,\r\n        ease: 'none',\r\n        delay: Math.random() * -8\r\n    });\r\n}\r\n\r\n\/* \u2014\u2014\u2014 BOOK FLOATING ANIMATION \u2014\u2014\u2014 *\/\r\ngsap.to('#ctaBook', {\r\n    y: -12,\r\n    rotateX: 2,\r\n    rotateY: -2,\r\n    duration: 3.5,\r\n    repeat: -1,\r\n    yoyo: true,\r\n    ease: 'sine.inOut'\r\n});\r\n\r\n\/* \u2014\u2014\u2014 GLOW PULSE \u2014\u2014\u2014 *\/\r\ngsap.to('.cta-book-glow', {\r\n    scale: 1.15,\r\n    opacity: 0.7,\r\n    duration: 3,\r\n    repeat: -1,\r\n    yoyo: true,\r\n    ease: 'sine.inOut'\r\n});\r\n\r\n\/* \u2014\u2014\u2014 SPOTLIGHT PULSE \u2014\u2014\u2014 *\/\r\ngsap.to('.cta-spotlight', {\r\n    scale: 1.05,\r\n    duration: 4,\r\n    repeat: -1,\r\n    yoyo: true,\r\n    ease: 'sine.inOut'\r\n});\r\n\r\n\/* \u2014\u2014\u2014 RING ROTATION \u2014\u2014\u2014 *\/\r\ngsap.to('.cta-ring', {\r\n    rotation: 360,\r\n    duration: 60,\r\n    repeat: -1,\r\n    ease: 'none'\r\n});\r\ngsap.to('.cta-ring-2', {\r\n    rotation: -360,\r\n    duration: 80,\r\n    repeat: -1,\r\n    ease: 'none'\r\n});\r\n\r\n\/* \u2014\u2014\u2014 SCROLL ENTRANCE ANIMATIONS \u2014\u2014\u2014 *\/\r\nconst tlCTA = gsap.timeline({\r\n    scrollTrigger: {\r\n        trigger: '.cta-section',\r\n        start: 'top 70%'\r\n    }\r\n});\r\n\r\ntlCTA\r\n    .from('.cta-label', { y: 20, opacity: 0, duration: 0.8 })\r\n    .from('.cta-divider', { width: 0, duration: 0.8, ease: 'power3.inOut' }, '-=0.5')\r\n    .from('#ctaBook', { y: 80, opacity: 0, rotateY: 20, duration: 1.2, ease: 'power3.out' }, '-=0.4')\r\n    .from('.cta-book-glow', { scale: 0.5, opacity: 0, duration: 1 }, '-=0.8')\r\n    .from('.cta-book-shadow', { opacity: 0, scaleX: 0.5, duration: 0.8 }, '-=0.6')\r\n    .from('.cta-headline', { y: 40, opacity: 0, duration: 1, ease: 'power3.out' }, '-=0.6')\r\n    .from('.cta-text', { y: 30, opacity: 0, duration: 0.8 }, '-=0.5')\r\n    .from('.cta-btn', { y: 25, opacity: 0, duration: 0.6, stagger: 0.1, ease: 'power3.out' }, '-=0.4')\r\n    .from('.cta-accent-line', { height: 0, duration: 0.8, ease: 'power3.out' }, '-=0.3')\r\n    .from('.cta-handwritten', { opacity: 0, y: 15, rotation: -8, duration: 0.8, ease: 'back.out(1.5)' }, '-=0.4');\r\n\r\n\/* \u2014\u2014\u2014 3D TILT ON MOUSE MOVE \u2014\u2014\u2014 *\/\r\nconst book3d = document.getElementById('ctaBook');\r\nconst showcase = document.querySelector('.cta-book-showcase');\r\n\r\nshowcase.addEventListener('mousemove', (e) => {\r\n    const rect = showcase.getBoundingClientRect();\r\n    const x = (e.clientX - rect.left) \/ rect.width - 0.5;\r\n    const y = (e.clientY - rect.top) \/ rect.height - 0.5;\r\n    gsap.to(book3d, {\r\n        rotateY: x * 20,\r\n        rotateX: -y * 12,\r\n        duration: 0.4,\r\n        ease: 'power2.out'\r\n    });\r\n});\r\n\r\nshowcase.addEventListener('mouseleave', () => {\r\n    gsap.to(book3d, {\r\n        rotateY: 0,\r\n        rotateX: 0,\r\n        duration: 0.8,\r\n        ease: 'elastic.out(1, 0.5)'\r\n    });\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dfbcfc4 e-con-full e-flex e-con e-parent\" data-id=\"dfbcfc4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6de3d95 elementor-widget elementor-widget-html\" data-id=\"6de3d95\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@300;400;500;600&family=La+Belle+Aurore&display=swap\" rel=\"stylesheet\">\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n    <style>\r\n        :root {\r\n            --color-navy: #15202F;\r\n            --color-navy-deep: #0D1520;\r\n            --color-navy-darker: #080E15;\r\n            --color-ivory: #F8F6F2;\r\n            --color-gold: #D4AF37;\r\n            --color-gold-bright: #E8C84A;\r\n            --color-bronze: #CD7F32;\r\n            --color-white: #ffffff;\r\n            --font-heading: 'Cormorant Garamond', serif;\r\n            --font-body: 'Inter', sans-serif;\r\n            --font-handwriting: 'La Belle Aurore', cursive;\r\n        }\r\n        * { margin: 0; padding: 0; box-sizing: border-box; }\r\n        html { scroll-behavior: smooth; }\r\n        body {\r\n            font-family: var(--font-body);\r\n            background: var(--color-navy);\r\n            color: var(--color-white);\r\n        }\r\n\r\n        \/* ===================== FOOTER ===================== *\/\r\n        .site-footer {\r\n            position: relative;\r\n            width: 100%;\r\n            background: var(--color-navy-deep);\r\n            overflow: hidden;\r\n        }\r\n\r\n        \/* Top gold line with glow *\/\r\n        .footer-gold-line {\r\n            width: 100%;\r\n            height: 1px;\r\n            background: linear-gradient(90deg, transparent, var(--color-gold), transparent);\r\n            opacity: 0.4;\r\n            position: relative;\r\n        }\r\n        .footer-gold-line::after {\r\n            content: '';\r\n            position: absolute;\r\n            left: 50%;\r\n            top: -2px;\r\n            transform: translateX(-50%);\r\n            width: 60px;\r\n            height: 5px;\r\n            background: var(--color-gold);\r\n            filter: blur(8px);\r\n            opacity: 0.6;\r\n        }\r\n\r\n        \/* Texture overlay *\/\r\n        .footer-texture {\r\n            position: absolute;\r\n            inset: 0;\r\n            opacity: 0.04;\r\n            pointer-events: none;\r\n            background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n        }\r\n\r\n        \/* Decorative corner ornaments *\/\r\n        .footer-corner {\r\n            position: absolute;\r\n            width: 40px;\r\n            height: 40px;\r\n            border: 1px solid rgba(212, 175, 55, 0.12);\r\n            z-index: 1;\r\n            pointer-events: none;\r\n        }\r\n        .footer-corner.tl { top: 30px; left: 30px; border-right: none; border-bottom: none; }\r\n        .footer-corner.tr { top: 30px; right: 30px; border-left: none; border-bottom: none; }\r\n        .footer-corner.bl { bottom: 80px; left: 30px; border-right: none; border-top: none; }\r\n        .footer-corner.br { bottom: 80px; right: 30px; border-left: none; border-top: none; }\r\n\r\n        \/* \u2500\u2500\u2500 CENTERED LAYOUT \u2500\u2500\u2500 *\/\r\n        .footer-main {\r\n            position: relative;\r\n            z-index: 2;\r\n            max-width: 900px;\r\n            margin: 0 auto;\r\n            padding: 6rem 5% 3rem;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            text-align: center;\r\n        }\r\n\r\n        \/* \u2500\u2500\u2500 LOGO CENTER \u2500\u2500\u2500 *\/\r\n        .footer-logo-wrap {\r\n            margin-bottom: 3rem;\r\n            position: relative;\r\n        }\r\n       .footer-logo {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    text-decoration: none;\r\n}\r\n\r\n.footer-logo-img {\r\n    width: 220px; \/* Adjust as needed *\/\r\n    max-width: 100%;\r\n    height: auto;\r\n    display: block;\r\n    transition: all 0.35s ease;\r\n}\r\n\r\n.footer-logo:hover .footer-logo-img {\r\n    transform: scale(1.05);\r\n    opacity: 0.9;\r\n}\r\n\r\n        \/* Gold decorative line under logo *\/\r\n        .logo-underline {\r\n            width: 60px;\r\n            height: 1px;\r\n            background: linear-gradient(90deg, transparent, var(--color-gold), transparent);\r\n            margin: 0 auto 3rem;\r\n            opacity: 0.5;\r\n        }\r\n\r\n        \/* \u2500\u2500\u2500 NAV MENU \u2500\u2500\u2500 *\/\r\n        .footer-nav {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 0;\r\n            margin-bottom: 3rem;\r\n            flex-wrap: wrap;\r\n        }\r\n        .footer-nav-link {\r\n            font-family: var(--font-body);\r\n            font-size: 0.75rem;\r\n            font-weight: 400;\r\n            text-transform: uppercase;\r\n            letter-spacing: 3px;\r\n            color: rgba(255, 255, 255, 0.5);\r\n            text-decoration: none;\r\n            padding: 0.5rem 1.5rem;\r\n            position: relative;\r\n            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n        .footer-nav-link::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: 0;\r\n            left: 50%;\r\n            transform: translateX(-50%) scaleX(0);\r\n            width: 20px;\r\n            height: 1px;\r\n            background: var(--color-gold);\r\n            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n        .footer-nav-link:hover {\r\n            color: var(--color-gold);\r\n        }\r\n        .footer-nav-link:hover::after {\r\n            transform: translateX(-50%) scaleX(1);\r\n        }\r\n\r\n        \/* Gold dot separators *\/\r\n        .footer-nav-dot {\r\n            width: 3px;\r\n            height: 3px;\r\n            border-radius: 50%;\r\n            background: rgba(212, 175, 55, 0.25);\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        \/* \u2500\u2500\u2500 SOCIAL ICONS \u2500\u2500\u2500 *\/\r\n        .footer-social {\r\n            display: flex;\r\n            gap: 1rem;\r\n            margin-bottom: 3.5rem;\r\n        }\r\n        .social-icon {\r\n            width: 44px;\r\n            height: 44px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n            color: rgba(255, 255, 255, 0.5);\r\n            text-decoration: none;\r\n            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n            position: relative;\r\n            overflow: hidden;\r\n            border-radius: 50%;\r\n        }\r\n        .social-icon::before {\r\n            content: '';\r\n            position: absolute;\r\n            inset: 0;\r\n            background: var(--color-gold);\r\n            transform: scale(0);\r\n            border-radius: 50%;\r\n            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n        .social-icon:hover::before {\r\n            transform: scale(1);\r\n        }\r\n        .social-icon:hover {\r\n            border-color: var(--color-gold);\r\n            color: var(--color-navy-deep);\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 8px 20px rgba(212, 175, 55, 0.2);\r\n        }\r\n        .social-icon svg {\r\n            width: 16px;\r\n            height: 16px;\r\n            fill: currentColor;\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        \/* \u2500\u2500\u2500 HANDWRITTEN QUOTE \u2500\u2500\u2500 *\/\r\n        .footer-quote {\r\n            font-family: var(--font-handwriting);\r\n            font-size: 1.4rem;\r\n            color: rgba(212, 175, 55, 0.35);\r\n            margin-bottom: 3rem;\r\n            transform: rotate(-2deg);\r\n            transition: color 0.4s ease;\r\n        }\r\n        .footer-main:hover .footer-quote {\r\n            color: rgba(212, 175, 55, 0.55);\r\n        }\r\n\r\n        \/* \u2500\u2500\u2500 COPYRIGHT \u2500\u2500\u2500 *\/\r\n        .footer-copyright {\r\n            font-size: 0.7rem;\r\n            color: rgba(255, 255, 255, 0.25);\r\n            letter-spacing: 2px;\r\n            text-transform: uppercase;\r\n            text-align: center;\r\n        }\r\n\r\n        \/* \u2500\u2500\u2500 BOTTOM BAR \u2500\u2500\u2500 *\/\r\n        .footer-bottom {\r\n            position: relative;\r\n            z-index: 2;\r\n            max-width: 900px;\r\n            margin: 0 auto;\r\n            padding: 1.5rem 5%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 2rem;\r\n            border-top: 1px solid rgba(255, 255, 255, 0.06);\r\n        }\r\n        .footer-bottom-link {\r\n            font-size: 0.65rem;\r\n            color: rgba(255, 255, 255, 0.25);\r\n            text-decoration: none;\r\n            letter-spacing: 1px;\r\n            text-transform: uppercase;\r\n            transition: color 0.3s ease;\r\n            position: relative;\r\n        }\r\n        .footer-bottom-link::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -2px;\r\n            left: 0;\r\n            width: 0;\r\n            height: 1px;\r\n            background: var(--color-gold);\r\n            transition: width 0.3s ease;\r\n        }\r\n        .footer-bottom-link:hover {\r\n            color: var(--color-gold);\r\n        }\r\n        .footer-bottom-link:hover::after {\r\n            width: 100%;\r\n        }\r\n\r\n        \/* Scroll to top *\/\r\n        .scroll-top {\r\n            position: absolute;\r\n            top: -22px;\r\n            right: 5%;\r\n            width: 44px;\r\n            height: 44px;\r\n            background: var(--color-navy-deep);\r\n            border: 1px solid rgba(212, 175, 55, 0.2);\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            cursor: pointer;\r\n            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n            z-index: 5;\r\n        }\r\n        .scroll-top:hover {\r\n            background: var(--color-gold);\r\n            border-color: var(--color-gold);\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);\r\n        }\r\n        .scroll-top svg {\r\n            width: 16px;\r\n            height: 16px;\r\n            fill: var(--color-gold);\r\n            transition: fill 0.3s ease, transform 0.3s ease;\r\n        }\r\n        .scroll-top:hover svg {\r\n            fill: var(--color-navy-deep);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        \/* \u2500\u2500\u2500 Responsive \u2500\u2500\u2500 *\/\r\n        @media (max-width: 600px) {\r\n            .footer-main { padding: 4rem 5% 2rem; }\r\n            .footer-logo-name { font-size: 1.6rem; }\r\n            .footer-nav { gap: 0.3rem; }\r\n            .footer-nav-link {\r\n                font-size: 0.65rem;\r\n                letter-spacing: 2px;\r\n                padding: 0.4rem 0.8rem;\r\n            }\r\n            .footer-nav-dot { display: none; }\r\n            .footer-social { gap: 0.7rem; }\r\n            .social-icon { width: 40px; height: 40px; }\r\n            .footer-quote { font-size: 1.1rem; }\r\n            .footer-bottom { flex-direction: column; gap: 0.8rem; }\r\n            .scroll-top {\r\n                right: 5%;\r\n                top: -18px;\r\n                width: 38px;\r\n                height: 38px;\r\n            }\r\n            .footer-corner { display: none; }\r\n        }\r\n\r\n        \/* Demo spacer *\/\r\n        .demo-spacer {\r\n            height: 60vh;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-family: var(--font-heading);\r\n            font-size: 2rem;\r\n            color: rgba(255,255,255,0.1);\r\n        }\r\n    <\/style>\r\n<base target=\"_blank\">\r\n<\/head>\r\n<body>\r\n\r\n\r\n\r\n    <!-- ==================== FOOTER ==================== -->\r\n    <footer class=\"site-footer\" id=\"siteFooter\">\r\n        <div class=\"footer-gold-line\"><\/div>\r\n        <div class=\"footer-texture\"><\/div>\r\n\r\n        <!-- Decorative corners -->\r\n        <div class=\"footer-corner tl\"><\/div>\r\n        <div class=\"footer-corner tr\"><\/div>\r\n        <div class=\"footer-corner bl\"><\/div>\r\n        <div class=\"footer-corner br\"><\/div>\r\n\r\n        <div class=\"footer-main\">\r\n\r\n            <!-- Logo Center -->\r\n            <div class=\"footer-logo-wrap\">\r\n    <a href=\"#\" class=\"footer-logo\">\r\n        <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/Aderemi\/wp-content\/uploads\/2026\/07\/Aderemi-Logo-White.png\" alt=\"Aderemi Author Logo\" class=\"footer-logo-img\">\r\n    <\/a>\r\n<\/div>\r\n\r\n            <!-- Gold underline -->\r\n            <div class=\"logo-underline\"><\/div>\r\n\r\n            <!-- Nav Menu -->\r\n            <nav class=\"footer-nav\">\r\n                <a href=\"https:\/\/demowebdesign.live\/Aderemi\/\" class=\"footer-nav-link\">Home<\/a>\r\n                <div class=\"footer-nav-dot\"><\/div>\r\n                <a href=\"https:\/\/demowebdesign.live\/Aderemi\/index.php\/about\/\" class=\"footer-nav-link\">About<\/a>\r\n                <div class=\"footer-nav-dot\"><\/div>\r\n                <a href=\"https:\/\/demowebdesign.live\/Aderemi\/index.php\/books\/\" class=\"footer-nav-link\">Books<\/a>\r\n                <div class=\"footer-nav-dot\"><\/div>\r\n                <a href=\"https:\/\/demowebdesign.live\/Aderemi\/index.php\/contact\/\" class=\"footer-nav-link\">Contact<\/a>\r\n                \r\n            <\/nav>\r\n\r\n            <!-- Social Icons -->\r\n            <div class=\"footer-social\">\r\n                <a href=\"#\" class=\"social-icon\" aria-label=\"Instagram\">\r\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2zm-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6zm9.65 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z\"\/><\/svg>\r\n                <\/a>\r\n                <a href=\"#\" class=\"social-icon\" aria-label=\"Facebook\">\r\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\"\/><\/svg>\r\n                <\/a>\r\n            <\/div>\r\n\r\n            <!-- Handwritten Quote -->\r\n            <div class=\"footer-quote\">every journey begins with a single step<\/div>\r\n\r\n            <!-- Copyright -->\r\n            <div class=\"footer-copyright\">\r\n                &copy; 2026 Aderemi Ogunsuyi. All rights reserved.\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Bottom Bar -->\r\n        \r\n    <\/footer>\r\n\r\n<script>\r\n\/* \u2014\u2014\u2014 GSAP REGISTER \u2014\u2014\u2014 *\/\r\ngsap.registerPlugin(ScrollTrigger);\r\n\r\n\/* \u2014\u2014\u2014 SCROLL TO TOP \u2014\u2014\u2014 *\/\r\ndocument.getElementById('scrollTop').addEventListener('click', () => {\r\n    window.scrollTo({ top: 0, behavior: 'smooth' });\r\n});\r\n\r\n\/* \u2014\u2014\u2014 FOOTER ENTRANCE ANIMATIONS \u2014\u2014\u2014 *\/\r\nconst tlFooter = gsap.timeline({\r\n    scrollTrigger: {\r\n        trigger: '.site-footer',\r\n        start: 'top 85%'\r\n    }\r\n});\r\n\r\ntlFooter\r\n    .from('.footer-gold-line', { scaleX: 0, duration: 1, ease: 'power3.inOut' })\r\n    .from('.footer-corner', { opacity: 0, duration: 0.8, stagger: 0.1 }, '-=0.6')\r\n    .from('.footer-logo-wrap', { y: 30, opacity: 0, duration: 0.9, ease: 'power3.out' }, '-=0.4')\r\n    .from('.logo-underline', { scaleX: 0, duration: 0.6, ease: 'power2.out' }, '-=0.5')\r\n    .from('.footer-nav-link', { y: 15, opacity: 0, duration: 0.5, stagger: 0.06 }, '-=0.3')\r\n    .from('.footer-nav-dot', { opacity: 0, duration: 0.3, stagger: 0.04 }, '-=0.4')\r\n    .from('.social-icon', { y: 15, opacity: 0, duration: 0.5, stagger: 0.08 }, '-=0.3')\r\n    .from('.footer-quote', { opacity: 0, y: 10, duration: 0.7, ease: 'power2.out' }, '-=0.2')\r\n    .from('.footer-copyright', { opacity: 0, duration: 0.5 }, '-=0.3')\r\n    .from('.footer-bottom', { opacity: 0, duration: 0.5 }, '-=0.2');\r\n\r\n\/* \u2014\u2014\u2014 SOCIAL ICON HOVER \u2014\u2014\u2014 *\/\r\ndocument.querySelectorAll('.social-icon').forEach(icon => {\r\n    icon.addEventListener('mouseenter', () => {\r\n        gsap.to(icon, { scale: 1.1, duration: 0.2, ease: 'power2.out' });\r\n    });\r\n    icon.addEventListener('mouseleave', () => {\r\n        gsap.to(icon, { scale: 1, duration: 0.2, ease: 'power2.out' });\r\n    });\r\n});\r\n\r\n\/* \u2014\u2014\u2014 SCROLL TOP BUTTON VISIBILITY \u2014\u2014\u2014 *\/\r\nconst scrollTopBtn = document.getElementById('scrollTop');\r\nlet scrollTopVisible = false;\r\n\r\ngsap.set(scrollTopBtn, { opacity: 0, scale: 0.8 });\r\n\r\nwindow.addEventListener('scroll', () => {\r\n    const shouldShow = window.scrollY > 400;\r\n    if (shouldShow !== scrollTopVisible) {\r\n        scrollTopVisible = shouldShow;\r\n        gsap.to(scrollTopBtn, {\r\n            opacity: scrollTopVisible ? 1 : 0,\r\n            scale: scrollTopVisible ? 1 : 0.8,\r\n            duration: 0.4,\r\n            ease: 'power2.out'\r\n        });\r\n    }\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Home About Books Contact Home About Books Contact every story matters Every Journey Changes You. Every Story Deservesto Be Told. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"plain-container","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/Aderemi\/index.php\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demowebdesign.live\/Aderemi\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demowebdesign.live\/Aderemi\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/Aderemi\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/Aderemi\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":163,"href":"https:\/\/demowebdesign.live\/Aderemi\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":445,"href":"https:\/\/demowebdesign.live\/Aderemi\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/445"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/Aderemi\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}