{"id":10,"date":"2026-07-21T15:17:12","date_gmt":"2026-07-21T15:17:12","guid":{"rendered":"https:\/\/demowebdesign.live\/sylvia\/?page_id=10"},"modified":"2026-07-21T21:07:44","modified_gmt":"2026-07-21T21:07:44","slug":"home","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/sylvia\/","title":{"rendered":"HOME"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10\" class=\"elementor elementor-10\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d5d0179 e-con-full e-flex e-con e-parent\" data-id=\"d5d0179\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c35278a elementor-widget elementor-widget-html\" data-id=\"c35278a\" 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=Playfair+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        .livo-artist-hero,\r\n        .livo-artist-hero *,\r\n        .livo-artist-hero *::before,\r\n        .livo-artist-hero *::after {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .livo-artist-hero {\r\n            --livo-gold: #C9A96E;\r\n            --livo-gold-light: #E2C48F;\r\n            --livo-gold-muted: rgba(201, 169, 110, 0.6);\r\n            --livo-cream: #F5F0E8;\r\n            --livo-ivory: #FAF8F3;\r\n            --livo-charcoal: #1A1A1A;\r\n            --livo-deep-black: #0D0D0D;\r\n            --livo-glass-border: rgba(201, 169, 110, 0.14);\r\n            --livo-t-slow: 0.8s cubic-bezier(0.22, 1, 0.36, 1);\r\n            --livo-t-medium: 0.5s cubic-bezier(0.22, 1, 0.36, 1);\r\n            --livo-t-fast: 0.3s cubic-bezier(0.22, 1, 0.36, 1);\r\n\r\n            position: relative;\r\n            font-family: 'Inter', sans-serif;\r\n            background-color: var(--livo-deep-black);\r\n            color: var(--livo-ivory);\r\n            overflow-x: clip;\r\n            -webkit-font-smoothing: antialiased;\r\n            -moz-osx-font-smoothing: grayscale;\r\n            scroll-behavior: smooth;\r\n        }\r\n\r\n        .livo-hero {\r\n            position: relative;\r\n            width: 100%;\r\n            padding: 220px;\r\n            min-height: 720px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .livo-hero-bg {\r\n            position: absolute;\r\n            inset: 0;\r\n            z-index: 1;\r\n        }\r\n\r\n        .livo-hero-bg img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            object-position: center;\r\n            animation: livoSlowZoom 30s ease-in-out infinite alternate;\r\n            filter: blur(1px) brightness(1.05);\r\n            transform: scale(1.05);\r\n            display: block;\r\n        }\r\n\r\n        @keyframes livoSlowZoom {\r\n            0% { transform: scale(1.05); }\r\n            100% { transform: scale(1.15); }\r\n        }\r\n\r\n        .livo-hero-overlay {\r\n            position: absolute;\r\n            inset: 0;\r\n            z-index: 2;\r\n            background: linear-gradient(180deg,\r\n                rgba(13, 13, 13, 0.60) 0%,\r\n                rgba(13, 13, 13, 0.6) 40%,\r\n                rgba(13, 13, 13, 0.7) 75%,\r\n                rgba(13, 13, 13, 0.70) 100%);\r\n        }\r\n\r\n        .livo-hero-vignette {\r\n            position: absolute;\r\n            inset: 0;\r\n            z-index: 3;\r\n            box-shadow: inset 0 0 180px 70px rgba(0, 0, 0, 0.4);\r\n            pointer-events: none;\r\n        }\r\n\r\n        .livo-hero-particles {\r\n            position: absolute;\r\n            inset: 0;\r\n            z-index: 4;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .livo-nav {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            z-index: 1000;\r\n            transition: all var(--livo-t-slow);\r\n        }\r\n\r\n        .livo-nav--transparent {\r\n            background: transparent;\r\n            backdrop-filter: none;\r\n        }\r\n\r\n        .livo-nav--glass {\r\n            background: rgba(13, 13, 13, 0.9);\r\n            backdrop-filter: blur(24px) saturate(1.2);\r\n            -webkit-backdrop-filter: blur(24px) saturate(1.2);\r\n            border-bottom: 1px solid var(--livo-glass-border);\r\n        }\r\n\r\n        .livo-nav-utility {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            padding: 10px 48px;\r\n            border-bottom: 1px solid rgba(201, 169, 110, 0.1);\r\n            font-family: 'Inter', sans-serif;\r\n            font-size: 0.6rem;\r\n            letter-spacing: 3px;\r\n            text-transform: uppercase !important;\r\n            color: rgba(245, 240, 232, 0.45);\r\n        }\r\n\r\n        .livo-nav-utility-text {\r\n            font-family: 'Cormorant Garamond', serif;\r\n            font-style: italic;\r\n            font-size: 0.75rem;\r\n            letter-spacing: 2px;\r\n            color: var(--livo-gold-muted);\r\n            text-transform: none !important;\r\n        }\r\n\r\n        .livo-nav-utility-links {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 14px;\r\n        }\r\n\r\n        .livo-nav-utility-links a {\r\n            color: rgba(245, 240, 232, 0.45);\r\n            text-decoration: none !important;\r\n            transition: color var(--livo-t-fast);\r\n        }\r\n\r\n        .livo-nav-utility-links a:hover {\r\n            color: var(--livo-gold);\r\n        }\r\n\r\n        .livo-nav-utility-divider {\r\n            color: rgba(201, 169, 110, 0.3);\r\n        }\r\n\r\n        .livo-nav-row-1 {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            padding: 18px 48px 0;\r\n            position: relative;\r\n        }\r\n\r\n        .livo-nav-links {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 40px;\r\n            list-style: none !important;\r\n        }\r\n\r\n        .livo-nav-links a {\r\n            font-family: 'Inter', sans-serif;\r\n            font-size: 0.65rem;\r\n            font-weight: 400;\r\n            letter-spacing: 4px;\r\n            text-transform: uppercase !important;\r\n            color: rgba(245, 240, 232, 0.65);\r\n            text-decoration: none !important;\r\n            position: relative;\r\n            padding-bottom: 6px;\r\n            transition: color var(--livo-t-fast);\r\n        }\r\n\r\n        .livo-nav-links a::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: 0;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 1px;\r\n            background: var(--livo-gold);\r\n            transition: all var(--livo-t-medium);\r\n            transform: translateX(-50%);\r\n        }\r\n\r\n        .livo-nav-links a:hover {\r\n            color: var(--livo-cream);\r\n        }\r\n\r\n        .livo-nav-links a:hover::after {\r\n            width: 100%;\r\n        }\r\n\r\n        .livo-nav-links-divider {\r\n            color: rgba(201, 169, 110, 0.3);\r\n            font-size: 0.6rem;\r\n        }\r\n\r\n        .livo-nav-row-2 {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            padding: 10px 48px 22px;\r\n        }\r\n        \r\n        .livo-nav-logo{\r\n    display:block;\r\n    width:110px !important;      \/* Adjust as needed *\/\r\n    max-width:100%;\r\n    height:auto;\r\n    object-fit:contain;\r\n    transition:transform .4s ease, opacity .4s ease;\r\n}\r\n\r\n.livo-nav-brand-wrap:hover .livo-nav-logo{\r\n    transform:scale(1.05);\r\n    opacity:.9;\r\n}\r\n\r\n        .livo-nav-brand-wrap {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            gap: 7px;\r\n            text-decoration: none !important;\r\n            position: relative;\r\n        }\r\n\r\n        .livo-nav-monogram {\r\n            font-family: 'Cormorant Garamond', serif;\r\n            font-size: 0.7rem;\r\n            font-style: italic;\r\n            letter-spacing: 5px;\r\n            color: var(--livo-gold-muted);\r\n            text-transform: uppercase !important;\r\n            text-decoration: none !important;\r\n        }\r\n\r\n        .livo-nav-brand {\r\n            font-family: 'Playfair Display', serif;\r\n            font-size: 1.7rem;\r\n            font-weight: 400;\r\n            letter-spacing: 11px;\r\n            text-transform: uppercase !important;\r\n            text-decoration: none !important;\r\n            color: var(--livo-cream);\r\n            transition: color var(--livo-t-fast);\r\n            position: relative;\r\n            padding: 0 22px;\r\n        }\r\n\r\n        .livo-nav-brand::before,\r\n        .livo-nav-brand::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            width: 40px;\r\n            height: 1px;\r\n            background: var(--livo-gold-muted);\r\n            transition: width var(--livo-t-medium);\r\n        }\r\n\r\n        .livo-nav-brand::before {\r\n            right: calc(100% + 20px);\r\n        }\r\n\r\n        .livo-nav-brand::after {\r\n            left: calc(100% + 20px);\r\n        }\r\n\r\n        .livo-nav-brand-wrap:hover .livo-nav-brand {\r\n            color: var(--livo-gold);\r\n        }\r\n\r\n        .livo-nav-brand-wrap:hover .livo-nav-brand::before,\r\n        .livo-nav-brand-wrap:hover .livo-nav-brand::after {\r\n            width: 60px;\r\n            background: var(--livo-gold);\r\n        }\r\n\r\n        .livo-nav-tagline {\r\n            font-family: 'Cormorant Garamond', serif;\r\n            font-weight: 300;\r\n            font-style: italic;\r\n            font-size: 0.7rem;\r\n            letter-spacing: 4px;\r\n            color: rgba(245, 240, 232, 0.4);\r\n            text-transform: uppercase !important;\r\n            text-decoration: none !important;\r\n        }\r\n\r\n        .livo-nav-toggle {\r\n            display: none;\r\n            flex-direction: column;\r\n            gap: 5px;\r\n            cursor: pointer;\r\n            background: none;\r\n            border: none;\r\n            padding: 8px;\r\n            position: absolute;\r\n            right: 24px;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n        }\r\n\r\n        .livo-nav-toggle span {\r\n            display: block;\r\n            width: 22px;\r\n            height: 1px;\r\n            background: var(--livo-cream);\r\n            transition: all var(--livo-t-fast);\r\n        }\r\n\r\n        .livo-hero-content {\r\n            position: relative;\r\n            z-index: 5;\r\n            text-align: center;\r\n            max-width: 920px;\r\n            padding: 120px 64px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .livo-hero-frame-corner {\r\n            position: absolute;\r\n            width: 28px;\r\n            height: 28px;\r\n            border: 1px solid rgba(201, 169, 110, 0.55);\r\n            z-index: 1;\r\n        }\r\n\r\n        .livo-hero-frame-corner--tl { top: 0; left: 0; border-right: none; border-bottom: none; }\r\n        .livo-hero-frame-corner--tr { top: 0; right: 0; border-left: none; border-bottom: none; }\r\n        .livo-hero-frame-corner--bl { bottom: 0; left: 0; border-right: none; border-top: none; }\r\n        .livo-hero-frame-corner--br { bottom: 0; right: 0; border-left: none; border-top: none; }\r\n\r\n        .livo-fade-item {\r\n            opacity: 1;\r\n            transform: none;\r\n            transition: opacity 1s var(--livo-t-slow), transform 1s var(--livo-t-slow);\r\n        }\r\n\r\n        .livo-fade-item.livo-fade-hidden {\r\n            opacity: 0;\r\n            transform: translateY(40px);\r\n        }\r\n\r\n        .livo-hero-eyebrow {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 14px;\r\n            margin-bottom: 28px;\r\n        }\r\n\r\n        .livo-hero-eyebrow-line {\r\n            width: 32px;\r\n            height: 1px;\r\n            background: var(--livo-gold-muted);\r\n        }\r\n\r\n        .livo-hero-eyebrow-text {\r\n            font-family: 'Inter', sans-serif;\r\n            font-size: 0.62rem;\r\n            font-weight: 400;\r\n            letter-spacing: 5px;\r\n            text-transform: uppercase !important;\r\n            color: var(--livo-gold-light);\r\n        }\r\n\r\n        .livo-hero-line {\r\n            width: 60px;\r\n            height: 1px;\r\n            background: var(--livo-gold);\r\n            margin: 0 auto 32px;\r\n        }\r\n\r\n        .livo-hero-title-wrap {\r\n            position: relative;\r\n        }\r\n\r\n        .livo-hero-quote-mark {\r\n            position: absolute;\r\n            top: -60px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            font-family: 'Playfair Display', serif;\r\n            font-size: 8rem;\r\n            font-weight: 400;\r\n            color: rgba(201, 169, 110, 0.1);\r\n            line-height: 1;\r\n            pointer-events: none;\r\n            user-select: none;\r\n            z-index: -1;\r\n        }\r\n\r\n        .livo-hero-title {\r\n            font-family: 'Playfair Display', serif;\r\n            font-size: clamp(3rem, 8vw, 6.5rem);\r\n            font-weight: 300;\r\n            letter-spacing: 12px;\r\n            text-transform: uppercase !important;\r\n            text-decoration: none !important;\r\n            color: var(--livo-ivory);\r\n            line-height: 1.1;\r\n            margin-bottom: 20px;\r\n            text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);\r\n        }\r\n\r\n        .livo-hero-subtitle {\r\n            font-family: 'Cormorant Garamond', serif;\r\n            font-size: clamp(0.9rem, 2vw, 1.15rem);\r\n            font-weight: 300;\r\n            font-style: italic;\r\n            letter-spacing: 6px;\r\n            text-transform: none !important;\r\n            text-decoration: none !important;\r\n            color: var(--livo-gold-light);\r\n            margin-bottom: 32px;\r\n        }\r\n\r\n        .livo-hero-description {\r\n            font-family: 'Cormorant Garamond', serif;\r\n            font-size: clamp(1rem, 1.8vw, 1.3rem);\r\n            font-weight: 300;\r\n            line-height: 1.8;\r\n            color: rgba(245, 240, 232, 0.75);\r\n            max-width: 500px;\r\n            margin: 0 auto 48px;\r\n        }\r\n\r\n        .livo-hero-buttons {\r\n            display: flex;\r\n            gap: 26px;\r\n            justify-content: center;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        \/* \u2500\u2500\u2500 BUTTONS: ANGLED-CUT CORNERS (echoes the hero's corner-bracket motif) \u2500\u2500\u2500 *\/\r\n        .livo-btn {\r\n            --livo-cut: 14px;\r\n            display: inline-flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 12px;\r\n            padding: 18px 42px;\r\n            font-family: 'Inter', sans-serif;\r\n            font-size: 0.68rem;\r\n            font-weight: 500;\r\n            letter-spacing: 3px;\r\n            text-transform: uppercase !important;\r\n            text-decoration: none !important;\r\n            cursor: pointer;\r\n            position: relative;\r\n            clip-path: polygon(\r\n                var(--livo-cut) 0%,\r\n                100% 0%,\r\n                100% calc(100% - var(--livo-cut)),\r\n                calc(100% - var(--livo-cut)) 100%,\r\n                0% 100%,\r\n                0% var(--livo-cut)\r\n            );\r\n            transition: transform var(--livo-t-medium), box-shadow var(--livo-t-medium), background var(--livo-t-medium), color var(--livo-t-medium);\r\n        }\r\n\r\n        .livo-btn-icon {\r\n            display: inline-flex;\r\n            transition: transform var(--livo-t-medium);\r\n        }\r\n\r\n        .livo-btn-icon svg {\r\n            width: 14px;\r\n            height: 14px;\r\n            display: block;\r\n        }\r\n\r\n        \/* Primary \u2014 solid gold-gradient fill with corner-cut shape and a thin outer echo frame *\/\r\n        .livo-btn--primary {\r\n            background: linear-gradient(135deg, var(--livo-gold-light) 0%, var(--livo-gold) 55%, #b9955c 100%);\r\n            color: var(--livo-deep-black);\r\n            box-shadow: 0 6px 22px rgba(201, 169, 110, 0.3);\r\n        }\r\n\r\n        .livo-btn--primary::before {\r\n            content: '';\r\n            position: absolute;\r\n            inset: 0;\r\n            clip-path: polygon(\r\n                var(--livo-cut) 0%,\r\n                100% 0%,\r\n                100% calc(100% - var(--livo-cut)),\r\n                calc(100% - var(--livo-cut)) 100%,\r\n                0% 100%,\r\n                0% var(--livo-cut)\r\n            );\r\n            background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);\r\n            background-size: 260% 100%;\r\n            background-position: 120% 0%;\r\n            transition: background-position 0.7s ease;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .livo-btn--primary:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 12px 32px rgba(201, 169, 110, 0.5);\r\n        }\r\n\r\n        .livo-btn--primary:hover::before {\r\n            background-position: -20% 0%;\r\n        }\r\n\r\n        .livo-btn--primary:hover .livo-btn-icon {\r\n            transform: translateX(5px);\r\n        }\r\n\r\n        \/* Secondary \u2014 glass fill, corner-cut outline, gold hairline border via padding-box trick *\/\r\n        .livo-btn--secondary {\r\n            background: rgba(245, 240, 232, 0.04);\r\n            color: rgba(245, 240, 232, 0.8);\r\n            backdrop-filter: blur(8px);\r\n            -webkit-backdrop-filter: blur(8px);\r\n            box-shadow: inset 0 0 0 1px rgba(201, 169, 110, 0.4);\r\n        }\r\n\r\n        .livo-btn--secondary:hover {\r\n            background: rgba(201, 169, 110, 0.09);\r\n            color: var(--livo-gold-light);\r\n            transform: translateY(-3px);\r\n            box-shadow: inset 0 0 0 1px var(--livo-gold), 0 10px 26px rgba(201, 169, 110, 0.18);\r\n        }\r\n\r\n        .livo-btn--secondary:hover .livo-btn-icon {\r\n            transform: translateX(5px);\r\n        }\r\n\r\n        .livo-scroll-indicator {\r\n            position: absolute;\r\n            bottom: 40px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            z-index: 5;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            gap: 8px;\r\n        }\r\n\r\n        .livo-scroll-indicator span {\r\n            font-family: 'Inter', sans-serif;\r\n            font-size: 0.6rem;\r\n            letter-spacing: 4px;\r\n            text-transform: uppercase !important;\r\n            text-decoration: none !important;\r\n            color: rgba(245, 240, 232, 0.4);\r\n        }\r\n\r\n        .livo-scroll-line {\r\n            width: 1px;\r\n            height: 40px;\r\n            background: rgba(245, 240, 232, 0.2);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .livo-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(--livo-gold);\r\n            animation: livoScrollPulse 2s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes livoScrollPulse {\r\n            0% { top: -100%; }\r\n            50% { top: 0; }\r\n            100% { top: 100%; }\r\n        }\r\n\r\n       \/* ==========================================================\r\n   RESPONSIVE\r\n========================================================== *\/\r\n\r\n\/* ---------- Large Desktop ---------- *\/\r\n@media (max-width:1400px){\r\n\r\n    .livo-hero{\r\n        padding:180px 80px 140px;\r\n    }\r\n\r\n    .livo-hero-content{\r\n        max-width:900px;\r\n    }\r\n\r\n}\r\n\r\n\/* ---------- Laptop ---------- *\/\r\n@media (max-width:1200px){\r\n\r\n    .livo-hero{\r\n        padding:170px 60px 120px;\r\n        min-height:700px;\r\n    }\r\n\r\n    .livo-nav-utility{\r\n        padding:10px 30px;\r\n    }\r\n\r\n    .livo-nav-row-1,\r\n    .livo-nav-row-2{\r\n        padding-left:30px;\r\n        padding-right:30px;\r\n    }\r\n\r\n    .livo-nav-links{\r\n        gap:28px;\r\n    }\r\n\r\n    .livo-nav-brand{\r\n        font-size:1.45rem;\r\n        letter-spacing:8px;\r\n    }\r\n\r\n    .livo-nav-brand::before,\r\n    .livo-nav-brand::after{\r\n        width:24px;\r\n    }\r\n\r\n    .livo-hero-content{\r\n        max-width:760px;\r\n        padding:60px 40px;\r\n    }\r\n\r\n}\r\n\r\n\/* ---------- Tablet Landscape ---------- *\/\r\n@media (max-width:992px){\r\n\r\n    .livo-hero{\r\n\r\n        padding:160px 40px 110px;\r\n        min-height:650px;\r\n\r\n    }\r\n\r\n    .livo-nav-utility{\r\n\r\n        flex-wrap:wrap;\r\n        justify-content:center;\r\n        gap:8px;\r\n        text-align:center;\r\n        padding:10px 20px;\r\n\r\n    }\r\n\r\n    .livo-nav-row-1{\r\n\r\n        padding:18px 20px 0;\r\n\r\n    }\r\n\r\n    .livo-nav-row-2{\r\n\r\n        padding:10px 20px 20px;\r\n\r\n    }\r\n\r\n    .livo-nav-links{\r\n\r\n        flex-wrap:wrap;\r\n        justify-content:center;\r\n        gap:18px;\r\n\r\n    }\r\n\r\n    .livo-nav-links a{\r\n\r\n        font-size:.6rem;\r\n        letter-spacing:2px;\r\n\r\n    }\r\n\r\n    .livo-nav-brand{\r\n\r\n        font-size:1.2rem;\r\n        letter-spacing:5px;\r\n\r\n    }\r\n\r\n    .livo-nav-brand::before,\r\n    .livo-nav-brand::after{\r\n\r\n        display:none;\r\n\r\n    }\r\n\r\n    .livo-nav-tagline{\r\n\r\n        letter-spacing:2px;\r\n\r\n    }\r\n\r\n    .livo-hero-content{\r\n\r\n        padding:50px 30px;\r\n\r\n    }\r\n\r\n    .livo-hero-title{\r\n\r\n        letter-spacing:6px;\r\n\r\n    }\r\n\r\n    .livo-hero-description{\r\n\r\n        max-width:100%;\r\n\r\n    }\r\n\r\n}\r\n\r\n\/* ---------- Tablet ---------- *\/\r\n@media (max-width:768px){\r\n\r\n    .livo-hero{\r\n\r\n        padding:150px 25px 90px;\r\n        min-height:auto;\r\n\r\n    }\r\n\r\n    .livo-nav-utility{\r\n\r\n        display:none;\r\n\r\n    }\r\n\r\n    .livo-nav-row-1{\r\n\r\n        padding:18px 20px;\r\n\r\n    }\r\n\r\n    .livo-nav-row-2{\r\n\r\n        padding:0 20px 20px;\r\n\r\n    }\r\n\r\n    .livo-nav-links{\r\n\r\n        gap:14px;\r\n        flex-wrap:wrap;\r\n        justify-content:center;\r\n\r\n    }\r\n\r\n    .livo-nav-links a{\r\n\r\n        font-size:.58rem;\r\n        letter-spacing:1.5px;\r\n\r\n    }\r\n\r\n    .livo-nav-brand{\r\n\r\n        font-size:1rem;\r\n        letter-spacing:4px;\r\n\r\n    }\r\n\r\n    .livo-nav-tagline{\r\n\r\n        font-size:.62rem;\r\n        letter-spacing:2px;\r\n\r\n    }\r\n\r\n    .livo-hero-content{\r\n\r\n        width:100%;\r\n        padding:40px 20px;\r\n\r\n    }\r\n\r\n    .livo-hero-frame-corner{\r\n\r\n        display:none;\r\n\r\n    }\r\n\r\n    .livo-hero-quote-mark{\r\n\r\n        font-size:5rem;\r\n        top:-35px;\r\n\r\n    }\r\n\r\n    .livo-hero-title{\r\n\r\n        font-size:clamp(2.3rem,8vw,3.8rem);\r\n        letter-spacing:4px;\r\n        line-height:1.15;\r\n\r\n    }\r\n\r\n    .livo-hero-subtitle{\r\n\r\n        font-size:1rem;\r\n        letter-spacing:2px;\r\n\r\n    }\r\n\r\n    .livo-hero-description{\r\n\r\n        font-size:20px !important;\r\n        line-height:1.8;\r\n        margin-bottom:35px;\r\n\r\n    }\r\n\r\n    .livo-hero-buttons{\r\n\r\n        flex-direction:column;\r\n        width:100%;\r\n        gap:15px;\r\n\r\n    }\r\n\r\n    .livo-btn{\r\n\r\n        width:100%;\r\n        max-width:340px;\r\n        padding:16px 26px;\r\n        --livo-cut:10px;\r\n\r\n    }\r\n\r\n    .livo-scroll-indicator{\r\n\r\n        bottom:20px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\/* ---------- Mobile ---------- *\/\r\n@media (max-width:576px){\r\n\r\n    .livo-hero{\r\n\r\n        padding:135px 18px 80px;\r\n\r\n    }\r\n\r\n    .livo-nav-row-1{\r\n\r\n        padding:15px;\r\n\r\n    }\r\n\r\n    .livo-nav-row-2{\r\n\r\n        padding:0 15px 18px;\r\n\r\n    }\r\n\r\n    .livo-nav-links{\r\n\r\n        gap:10px;\r\n\r\n    }\r\n\r\n    .livo-nav-links a{\r\n\r\n        font-size:.55rem;\r\n        letter-spacing:1px;\r\n\r\n    }\r\n\r\n    .livo-nav-brand{\r\n\r\n        font-size:.9rem;\r\n        letter-spacing:3px;\r\n\r\n    }\r\n\r\n    .livo-nav-tagline{\r\n\r\n        font-size:.55rem;\r\n        letter-spacing:1px;\r\n\r\n    }\r\n\r\n    .livo-hero-content{\r\n\r\n        padding:25px 10px;\r\n\r\n    }\r\n\r\n    .livo-hero-quote-mark{\r\n\r\n        display:none;\r\n\r\n    }\r\n\r\n    .livo-hero-title{\r\n\r\n        font-size:2rem;\r\n        letter-spacing:2px;\r\n        margin-bottom:15px;\r\n\r\n    }\r\n\r\n    .livo-hero-subtitle{\r\n\r\n        font-size:.95rem;\r\n        letter-spacing:1px;\r\n        margin-bottom:20px;\r\n\r\n    }\r\n\r\n    .livo-hero-description{\r\n\r\n        font-size:.95rem;\r\n        line-height:1.7;\r\n        margin-bottom:28px;\r\n\r\n    }\r\n\r\n    .livo-btn{\r\n\r\n        max-width:100%;\r\n        font-size:.65rem;\r\n        padding:15px 20px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\/* ---------- Small Phones ---------- *\/\r\n@media (max-width:400px){\r\n\r\n    .livo-hero{\r\n\r\n        padding:120px 15px 70px;\r\n\r\n    }\r\n\r\n    .livo-nav-links{\r\n\r\n        gap:8px;\r\n\r\n    }\r\n\r\n    .livo-nav-links a{\r\n\r\n        font-size:.5rem;\r\n        letter-spacing:.5px;\r\n\r\n    }\r\n\r\n    .livo-nav-brand{\r\n\r\n        font-size:.8rem;\r\n        letter-spacing:2px;\r\n\r\n    }\r\n\r\n    .livo-hero-title{\r\n\r\n        font-size:1.75rem;\r\n        letter-spacing:1px;\r\n\r\n    }\r\n\r\n    .livo-hero-subtitle{\r\n\r\n        font-size:.85rem;\r\n\r\n    }\r\n\r\n    .livo-hero-description{\r\n\r\n        font-size:.9rem;\r\n\r\n    }\r\n\r\n    .livo-btn{\r\n\r\n        padding:14px 18px;\r\n        font-size:.6rem;\r\n\r\n    }\r\n\r\n}\r\n    <\/style>\r\n<base target=\"_blank\">\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"livo-artist-hero\">\r\n\r\n    <nav class=\"livo-nav livo-nav--transparent\" id=\"livoMainNav\">\r\n\r\n        <div class=\"livo-nav-utility\">\r\n            <!--<span class=\"livo-nav-utility-text\">Est. MMXXIV<\/span>-->\r\n            <div class=\"livo-nav-utility-links\">\r\n                <a href=\"#\" aria-label=\"Instagram\">Instagram<\/a>\r\n                <span class=\"livo-nav-utility-divider\">\/<\/span>\r\n                <a href=\"#\">Facebook<\/a>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"livo-nav-row-1\">\r\n            <ul class=\"livo-nav-links\">\r\n                <li><a href=\"#about\">About<\/a><\/li>\r\n                <li><a href=\"#gallery\">Gallery<\/a><\/li>\r\n                <li><a href=\"#book\">The Book<\/a><\/li>\r\n                <li><a href=\"#book\">blogs<\/a><\/li>\r\n                <li><a href=\"#book\">events<\/a><\/li>\r\n                <li><a href=\"#contact\">Contact<\/a><\/li>\r\n            <\/ul>\r\n            <!--<button class=\"livo-nav-toggle\" aria-label=\"Menu\">-->\r\n            <!--    <span><\/span>-->\r\n            <!--    <span><\/span>-->\r\n            <!--    <span><\/span>-->\r\n            <!--<\/button>-->\r\n        <\/div>\r\n\r\n       <div class=\"livo-nav-row-2\">\r\n    <a href=\"#\" class=\"livo-nav-brand-wrap\">\r\n        <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/sylvia\/wp-content\/uploads\/2026\/07\/Lily-Ivor.png\" alt=\"Lily Ivor\" class=\"livo-nav-logo\">\r\n    <\/a>\r\n<\/div>\r\n    <\/nav>\r\n\r\n    <section class=\"livo-hero\" id=\"hero\">\r\n        <div class=\"livo-hero-bg\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1579783902614-a3fb3927b6a5?w=1920&q=80\"\r\n                 alt=\"Lily Ivor \u2014 Acrylic Painting\"\r\n                 loading=\"eager\">\r\n        <\/div>\r\n\r\n        <div class=\"livo-hero-overlay\"><\/div>\r\n        <div class=\"livo-hero-vignette\"><\/div>\r\n        <canvas class=\"livo-hero-particles\" id=\"livoParticlesCanvas\"><\/canvas>\r\n\r\n        <div class=\"livo-hero-content\">\r\n            <span class=\"livo-hero-frame-corner livo-hero-frame-corner--tl\"><\/span>\r\n            <span class=\"livo-hero-frame-corner livo-hero-frame-corner--tr\"><\/span>\r\n            <span class=\"livo-hero-frame-corner livo-hero-frame-corner--bl\"><\/span>\r\n            <span class=\"livo-hero-frame-corner livo-hero-frame-corner--br\"><\/span>\r\n\r\n            <div class=\"livo-hero-eyebrow livo-fade-item\" data-livo-delay=\"0\">\r\n                <span class=\"livo-hero-eyebrow-line\"><\/span>\r\n                <span class=\"livo-hero-eyebrow-text\">Original Works &amp; Literature<\/span>\r\n                <span class=\"livo-hero-eyebrow-line\"><\/span>\r\n            <\/div>\r\n\r\n            <div class=\"livo-hero-title-wrap\">\r\n                <span class=\"livo-hero-quote-mark\" aria-hidden=\"true\">&ldquo;<\/span>\r\n                <h1 class=\"livo-hero-title livo-fade-item\" data-livo-delay=\"120\">Lily Ivor<\/h1>\r\n            <\/div>\r\n\r\n            <p class=\"livo-hero-subtitle livo-fade-item\" data-livo-delay=\"240\">Artist &bull; Author &bull; Storyteller<\/p>\r\n            <p class=\"livo-hero-description livo-fade-item\" data-livo-delay=\"360\">\r\n                Creating worlds through literature,<br>\r\n                painting,\r\n                and timeless imagination.\r\n            <\/p>\r\n            <div class=\"livo-hero-buttons livo-fade-item\" data-livo-delay=\"480\">\r\n                <a href=\"#book\" class=\"livo-btn livo-btn--primary\">\r\n                    <span>Discover the Book<\/span>\r\n                    <span class=\"livo-btn-icon\">\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\r\n                    <\/span>\r\n                <\/a>\r\n                <a href=\"#gallery\" class=\"livo-btn livo-btn--secondary\">\r\n                    <span>Explore Gallery<\/span>\r\n                    <span class=\"livo-btn-icon\">\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\r\n                    <\/span>\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"livo-scroll-indicator livo-fade-item\" data-livo-delay=\"600\">\r\n            <span>Scroll<\/span>\r\n            <div class=\"livo-scroll-line\"><\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <script>\r\n        (function() {\r\n            var root = document.querySelector('.livo-artist-hero');\r\n            if (!root) return;\r\n\r\n            var fadeItems = root.querySelectorAll('.livo-fade-item');\r\n            fadeItems.forEach(function(el) {\r\n                el.classList.add('livo-fade-hidden');\r\n            });\r\n\r\n            function revealItem(el) {\r\n                var delay = parseInt(el.getAttribute('data-livo-delay') || '0', 10);\r\n                setTimeout(function() {\r\n                    el.classList.remove('livo-fade-hidden');\r\n                }, delay);\r\n            }\r\n\r\n            window.requestAnimationFrame(function() {\r\n                fadeItems.forEach(revealItem);\r\n            });\r\n\r\n            setTimeout(function() {\r\n                fadeItems.forEach(function(el) {\r\n                    el.classList.remove('livo-fade-hidden');\r\n                });\r\n            }, 3000);\r\n\r\n            var canvas = root.querySelector('#livoParticlesCanvas');\r\n            var ctx = canvas.getContext('2d');\r\n            var particles = [];\r\n            var animationId;\r\n            var isActive = true;\r\n\r\n            function resizeCanvas() {\r\n                canvas.width = window.innerWidth;\r\n                canvas.height = window.innerHeight;\r\n            }\r\n            resizeCanvas();\r\n            window.addEventListener('resize', resizeCanvas);\r\n\r\n            function Particle() { this.reset(); }\r\n            Particle.prototype.reset = function() {\r\n                this.x = Math.random() * canvas.width;\r\n                this.y = Math.random() * canvas.height;\r\n                this.size = Math.random() * 2 + 0.5;\r\n                this.speedX = (Math.random() - 0.5) * 0.3;\r\n                this.speedY = (Math.random() - 0.5) * 0.3;\r\n                this.opacity = Math.random() * 0.5 + 0.1;\r\n                this.fadeSpeed = Math.random() * 0.002 + 0.001;\r\n                this.growing = Math.random() > 0.5;\r\n            };\r\n            Particle.prototype.update = function() {\r\n                this.x += this.speedX;\r\n                this.y += this.speedY;\r\n                if (this.growing) {\r\n                    this.opacity += this.fadeSpeed;\r\n                    if (this.opacity >= 0.6) this.growing = false;\r\n                } else {\r\n                    this.opacity -= this.fadeSpeed;\r\n                    if (this.opacity <= 0.1) this.growing = true;\r\n                }\r\n                if (this.x < -10 || this.x > canvas.width + 10 || this.y < -10 || this.y > canvas.height + 10) {\r\n                    this.reset();\r\n                }\r\n            };\r\n            Particle.prototype.draw = function() {\r\n                ctx.beginPath();\r\n                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\r\n                ctx.fillStyle = 'rgba(201, 169, 110, ' + this.opacity + ')';\r\n                ctx.fill();\r\n            };\r\n\r\n            function initParticles() {\r\n                particles = [];\r\n                var particleCount = Math.min(60, Math.floor((canvas.width * canvas.height) \/ 25000));\r\n                for (var i = 0; i < particleCount; i++) particles.push(new Particle());\r\n            }\r\n\r\n            function animateParticles() {\r\n                if (!isActive) return;\r\n                ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n                particles.forEach(function(p) { p.update(); p.draw(); });\r\n                animationId = requestAnimationFrame(animateParticles);\r\n            }\r\n\r\n            initParticles();\r\n            animateParticles();\r\n\r\n            document.addEventListener('visibilitychange', function() {\r\n                if (document.hidden) {\r\n                    isActive = false;\r\n                    cancelAnimationFrame(animationId);\r\n                } else {\r\n                    isActive = true;\r\n                    animateParticles();\r\n                }\r\n            });\r\n\r\n            var nav = root.querySelector('#livoMainNav');\r\n            var hero = root.querySelector('#hero');\r\n\r\n            function handleScroll() {\r\n                var heroBottom = hero.getBoundingClientRect().bottom;\r\n                if (heroBottom < 120) {\r\n                    nav.classList.remove('livo-nav--transparent');\r\n                    nav.classList.add('livo-nav--glass');\r\n                } else {\r\n                    nav.classList.remove('livo-nav--glass');\r\n                    nav.classList.add('livo-nav--transparent');\r\n                }\r\n            }\r\n            window.addEventListener('scroll', handleScroll, { passive: true });\r\n\r\n            root.querySelectorAll('a[href^=\"#\"]').forEach(function(anchor) {\r\n                anchor.addEventListener('click', function(e) {\r\n                    var href = this.getAttribute('href');\r\n                    if (href === '#' || href.length < 2) return;\r\n                    var target = document.querySelector(href);\r\n                    if (target) {\r\n                        e.preventDefault();\r\n                        target.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n                    }\r\n                });\r\n            });\r\n\r\n        })();\r\n    <\/script>\r\n\r\n<\/div>\r\n\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-329b434 e-con-full e-flex e-con e-parent\" data-id=\"329b434\" 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-f4c85fd elementor-widget elementor-widget-html\" data-id=\"f4c85fd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<meta name=\"description\" content=\"Lily Ivor \u2014 Author, artist, and curator of quiet luxury.\"\/>\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,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\"\/>\r\n<style>\r\n:root{--gold:#c5a46d;--gold2:#e0ca9f;--dark:#07070a;--dark2:#100f0d;--dark3:#181614;--cream:#efeae2;--muted:#9a9590;--tr:all .55s cubic-bezier(.25,1,.5,1);}\r\n*{box-sizing:border-box;margin:0;padding:0;}\r\nhtml{scroll-behavior:smooth;}\r\n::selection{background:var(--gold);color:var(--dark);}\r\n::-webkit-scrollbar{width:6px;}\r\n::-webkit-scrollbar-track{background:var(--dark);}\r\n::-webkit-scrollbar-thumb{background:rgba(197,164,109,.3);border-radius:3px;}\r\nbody{background:var(--dark);color:var(--cream);font-family:\"Inter\",sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;}\r\nimg{display:block;width:100%;height:auto;}\r\na{color:inherit;text-decoration:none;}\r\nh1,h2,h3{font-family:\"Cormorant Garamond\",serif;font-weight:300;line-height:1.1;}\r\n\r\n\/* NAV *\/\r\n\r\n\/* REVEAL *\/\r\n.r{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.25,1,.5,1),transform 1s cubic-bezier(.25,1,.5,1);}\r\n.r.rl{transform:translateX(-28px);}\r\n.r.rr{transform:translateX(28px);}\r\n.r.on{opacity:1;transform:none;}\r\n.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}.d4{transition-delay:.48s}\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   SECTION 1 \u00b7 HERO\r\n   Full-screen diagonal split \u2014 image right,\r\n   text left with oversized number accent\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden;}\r\n.hero-left{display:flex;flex-direction:column;justify-content:center;padding:9rem 5vw 5rem 8vw;background:var(--dark);position:relative;z-index:2;}\r\n.hero-left::after{content:\"\";position:absolute;top:0;right:-4vw;width:8vw;height:100%;background:var(--dark);clip-path:polygon(0 0,0 100%,100% 100%);z-index:3;}\r\n.hero-num{font-family:\"Cormorant Garamond\",serif;font-size:clamp(9rem,14vw,14rem);font-weight:600;color:rgba(197,164,109,.05);line-height:1;position:absolute;top:50%;left:6vw;transform:translateY(-50%);pointer-events:none;user-select:none;letter-spacing:-.05em;}\r\n.hero-tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.38em;color:var(--gold);margin-bottom:1.4rem;}\r\n.hero h1{font-size:clamp(2.8rem,4.5vw,5rem);color:var(--cream);margin-bottom:1.4rem;position:relative;z-index:1;}\r\n.hero h1 em{display:block;font-style:italic;color:var(--gold2);font-weight:300;}\r\n.hero-sub{font-size:.98rem;color:var(--muted);line-height:1.85;max-width:480px;margin-bottom:2.2rem;}\r\n.hero-divider{width:3.5rem;height:1px;background:var(--gold);margin:1.6rem 0 2rem;}\r\n.btn-gold{display:inline-flex;align-items:center;gap:.6rem;background:var(--gold);color:var(--dark);font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;font-weight:600;padding:.9rem 1.8rem;transition:var(--tr);text-decoration: none !important;}\r\n.btn-gold:hover{background:var(--gold2);transform:translateY(-2px);color:white !important;}\r\n.btn-ghost{display:inline-flex;align-items:center;gap:.6rem;background:transparent;color:var(--cream);font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;font-weight:600;padding:.9rem 1.8rem;border:1px solid rgba(255,255,255,.14);transition:var(--tr);text-decoration: none !important;}\r\n.btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);color:white !important;}\r\n.hero-btns{display:flex;gap:1rem;flex-wrap:wrap;}\r\n.hero-scroll{position:absolute;bottom:2.2rem;left:8vw;display:flex;align-items:center;gap:.8rem;font-size:.6rem;text-transform:uppercase;letter-spacing:.25em;color:var(--muted);}\r\n.hero-scroll-line{width:36px;height:1px;background:var(--gold);position:relative;overflow:hidden;}\r\n.hero-scroll-line::after{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:1px;background:#fff;animation:slide 2s infinite ease-in-out;}\r\n@keyframes slide{0%{left:-100%}100%{left:100%}}\r\n.hero-right{position:relative;overflow:hidden;}\r\n.hero-right img{width:100%;height:100%;object-fit:cover;filter:grayscale(10%) brightness(.9);transition:transform .9s ease;}\r\n.hero-right:hover img{transform:scale(1.04);}\r\n.hero-right::before{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,var(--dark) 0%,transparent 30%);z-index:1;pointer-events:none;}\r\n.hero-right-tag{position:absolute;bottom:2rem;right:2rem;z-index:2;font-size:.6rem;text-transform:uppercase;letter-spacing:.25em;color:var(--gold);writing-mode:vertical-rl;transform:rotate(180deg);}\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   SECTION 2 \u00b7 FEATURED BOOK\r\n   Cinematic full-width stage \u2014 book floats on\r\n   dark stage, copy overlaid on right with\r\n   vertical number + accent bars\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.book-section{;min-height:100vh;display:flex;align-items:center;padding:8rem 8vw;position:relative;overflow:hidden;border-top:1px solid rgba(197,164,109,.05);}\r\n.book-section::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    background:url(\"https:\/\/demowebdesign.live\/sylvia\/wp-content\/uploads\/2026\/07\/95197.jpg\") center center \/ cover no-repeat;\r\n    z-index:-2;\r\n}\r\n.book-section::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(7,7,10,.90) 0%,\r\n            rgba(7,7,10,.70) 45%,\r\n            rgba(7,7,10,.82) 100%\r\n        );\r\n    z-index:-1;\r\n}\r\n.book-section::before{content:\"LUMINOUS\";position:absolute;bottom:-2%;left:-1%;font-family:\"Cormorant Garamond\",serif;font-size:clamp(10rem,18vw,20rem);font-weight:700;color:rgba(197,164,109,.025);line-height:1;letter-spacing:.1em;pointer-events:none;user-select:none;}\r\n.book-wrap{max-width:1200px;width:100%;margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:7rem;align-items:center;position:relative;z-index:1;}\r\n.book-stage{position:relative;display:flex;justify-content:center;}\r\n.book-mat{background:#f7f5f0;padding:1.8rem 1.8rem 3.2rem;box-shadow:0 50px 100px rgba(0,0,0,.7),0 12px 30px rgba(0,0,0,.35);position:relative;transition:var(--tr);max-width:360px;width:100%;}\r\n.book-mat::after{content:\"\";position:absolute;inset:.8rem;border:1px solid rgba(197,164,109,.22);pointer-events:none;}\r\n.book-mat:hover{transform:translateY(-12px) rotate(-.6deg);box-shadow:0 65px 120px rgba(0,0,0,.8);}\r\n.book-mat img{display:block;width:100%;height:auto;}\r\n.book-mat-label{position:absolute;bottom:.9rem;left:50%;transform:translateX(-50%);font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;color:#8a8070;font-family:\"Inter\",sans-serif;white-space:nowrap;}\r\n.book-glow{position:absolute;width:60%;height:60%;top:20%;left:20%;background:radial-gradient(circle,rgba(197,164,109,.14),transparent 70%);filter:blur(30px);pointer-events:none;z-index:0;}\r\n.book-copy{position:relative;}\r\n.book-copy-bar{width:2px;height:100%;background:linear-gradient(to bottom,var(--gold),transparent);position:absolute;left:-3rem;top:0;}\r\n.book-edition{font-size:.62rem;text-transform:uppercase;letter-spacing:.35em;color:var(--gold);margin-bottom:1.2rem;display:flex;align-items:center;gap:.8rem;}\r\n.book-edition::before{content:\"\";width:2rem;height:1px;background:var(--gold);}\r\n.book-h{font-size:clamp(2.6rem,4vw,4rem);color:var(--cream);margin-bottom:.5rem;}\r\n.book-h em{font-style:italic;color:var(--gold2);}\r\n.book-ital{font-family:\"Cormorant Garamond\",serif;font-style:italic;color:var(--gold2);font-size:1.15rem;margin-bottom:2rem;}\r\n.book-hr{width:3rem;height:1px;background:var(--gold);margin:1.8rem 0;}\r\n.book-quote{border-left:2px solid var(--gold);padding-left:1.4rem;margin:1.8rem 0;font-family:\"Cormorant Garamond\",serif;font-size:1.25rem;line-height:1.65;font-style:italic;color:var(--cream);}\r\n.book-desc{font-size:.93rem;color:var(--muted);line-height:1.85;margin-bottom:2rem;}\r\n.book-specs{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 2rem;border-top:1px solid rgba(255,255,255,.05);padding-top:1.8rem;margin-bottom:2.4rem;}\r\n.spec dt{font-size:.58rem;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);margin-bottom:.2rem;}\r\n.spec dd{font-family:\"Cormorant Garamond\",serif;font-size:1.05rem;color:var(--cream);}\r\n.book-btns{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;}\r\n.btn-link{font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:var(--gold);position:relative;padding-bottom:2px;}\r\n.btn-link::after{content:\"\";position:absolute;bottom:0;left:0;width:30%;height:1px;background:var(--gold);transition:var(--tr);}\r\n.btn-link:hover::after{width:100%;}\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   SECTION 3 \u00b7 ABOUT\r\n   Editorial magazine layout \u2014 portrait bleeds\r\n   into left; text in large pull-quote style\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.about{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden;background:var(--dark);}\r\n.about-img-col{position:relative;overflow:hidden;}\r\n.about-img-col img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(15%) brightness(.88);transition:transform .9s ease;}\r\n.about:hover .about-img-col img{transform:scale(1.03);}\r\n.about-img-col::after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,var(--dark) 100%);pointer-events:none;}\r\n.about-img-badge{position:absolute;bottom:3rem;left:2rem;background:var(--gold);color:var(--dark);font-size:.58rem;text-transform:uppercase;letter-spacing:.22em;padding:.5rem 1.1rem;font-weight:600;z-index:2;}\r\n.about-col{display:flex;flex-direction:column;justify-content:center;padding:8rem 8vw 8rem 5vw;position:relative;}\r\n.about-col::before{content:\"\";position:absolute;top:8rem;left:0;width:1px;height:calc(100% - 16rem);background:linear-gradient(to bottom,transparent,var(--gold),transparent);}\r\n.about-num{font-family:\"Cormorant Garamond\",serif;font-size:clamp(8rem,12vw,12rem);color:rgba(197,164,109,.04);font-weight:700;line-height:1;position:absolute;top:50%;right:4vw;transform:translateY(-50%);pointer-events:none;user-select:none;}\r\n.about-tag{font-size:.65rem;text-transform:uppercase;letter-spacing:.35em;color:var(--gold);margin-bottom:1.4rem;}\r\n.about-h{font-size:clamp(2.4rem,3.5vw,3.8rem);color:var(--cream);margin-bottom:1.6rem;}\r\n.about-rule{width:3rem;height:1px;background:var(--gold);margin:1.6rem 0;}\r\n.about-drop{font-family:\"Cormorant Garamond\",serif;font-size:3.8rem;float:left;line-height:.82;padding-right:8px;color:var(--gold);}\r\n.about-p{font-size:.97rem;color:rgba(239,234,226,.85);line-height:1.9;margin-bottom:1.4rem;}\r\n.about-pull{border-left:2px solid var(--gold);padding-left:1.5rem;margin:2rem 0;}\r\n.about-pull p{font-family:\"Cormorant Garamond\",serif;font-size:1.3rem;font-style:italic;color:var(--gold2);line-height:1.6;}\r\n.about-cap{font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin-bottom:2rem;}\r\n.about-sig{font-family:\"Cormorant Garamond\",serif;font-style:italic;font-size:2.4rem;color:var(--gold);line-height:1;}\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   FOOTER \u2014 Luxury editorial close\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\nfooter{background:#060608;border-top:1px solid rgba(197,164,109,.07);padding:6rem 8vw 2.5rem;}\r\n.footer-top{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:.7fr 1.3fr;gap:5rem;margin-bottom:5rem;}\r\n.f-brand-logo{font-family:\"Cormorant Garamond\",serif;font-size:1.9rem;letter-spacing:.22em;margin-bottom:1rem;}\r\n.f-brand-logo span{color:var(--gold);}\r\n.f-brand-tag{font-size:.85rem;color:var(--muted);max-width:280px;line-height:1.75;margin-bottom:2rem;}\r\n.f-seal{width:60px;height:60px;opacity:.55;transition:var(--tr);}\r\n.f-seal:hover{opacity:1;transform:rotate(8deg);}\r\n.footer-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;}\r\n.footer-col h4{font-family:\"Inter\",sans-serif;font-size:.62rem;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);margin-bottom:1.6rem;}\r\n.footer-col ul{list-style:none;}\r\n.footer-col ul li{margin-bottom:.85rem;}\r\n.footer-col ul li a{font-size:.82rem;color:var(--muted);transition:var(--tr);}\r\n.footer-col ul li a:hover{color:var(--gold2);padding-left:4px;}\r\n.f-nl p{font-size:.82rem;color:var(--muted);line-height:1.7;margin-bottom:1.4rem;}\r\n.f-nl input{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.12);padding:.7rem 0;font-size:.82rem;color:var(--cream);font-family:\"Inter\",sans-serif;outline:none;transition:var(--tr);margin-bottom:.8rem;}\r\n.f-nl input:focus{border-color:var(--gold);}\r\n.f-nl button{width:100%;background:transparent;border:1px solid rgba(197,164,109,.2);color:var(--gold);font-size:.65rem;text-transform:uppercase;letter-spacing:.15em;padding:.7rem;cursor:pointer;transition:var(--tr);font-family:\"Inter\",sans-serif;}\r\n.f-nl button:hover{background:var(--gold);color:var(--dark);}\r\n.footer-bottom{max-width:1200px;margin:0 auto;border-top:1px solid rgba(255,255,255,.04);padding-top:2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;}\r\n.footer-bottom p,.footer-bottom a{font-size:.72rem;color:var(--muted);}\r\n.footer-bottom a:hover{color:var(--gold);}\r\n.footer-bottom-links{display:flex;gap:2rem;}\r\n\r\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\r\n@media(max-width:1050px){\r\n  .hero,.about{grid-template-columns:1fr;}\r\n  .hero-right{height:55vw;min-height:320px;}\r\n  .hero-left{padding:9rem 6vw 5rem;}\r\n  .hero-left::after{display:none;}\r\n  .book-wrap{grid-template-columns:1fr;gap:4rem;}\r\n  .book-copy-bar{display:none;}\r\n  .about-img-col{height:60vw;}\r\n  .about-col{padding:5rem 6vw;}\r\n  .about-col::before{display:none;}\r\n  .footer-top{grid-template-columns:1fr;gap:3.5rem;}\r\n  .footer-nav{grid-template-columns:1fr 1fr;}\r\n  .f-nl{grid-column:span 2;}\r\n}\r\n@media(max-width:640px){\r\n  .nav-links{display:none;}\r\n  .book-section{padding:6rem 5vw;}\r\n  .hero-btns,.book-btns{flex-direction:column;align-items:flex-start;}\r\n  .btn-gold,.btn-ghost{width:100%;justify-content:center;}\r\n  .footer-nav{grid-template-columns:1fr;}\r\n  .f-nl{grid-column:span 1;}\r\n  .footer-bottom{flex-direction:column;align-items:flex-start;}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<!-- \u2550\u2550 SECTION 1 \u00b7 HERO \u2550\u2550 -->\r\n<section class=\"hero\" id=\"home\">\r\n  <div class=\"hero-left\">\r\n    <div class=\"hero-num\" aria-hidden=\"true\">01<\/div>\r\n    <p class=\"hero-tag r\">Author \u00b7 Artist \u00b7 Curator<\/p>\r\n    <h1 class=\"r d1\">\r\n      Quiet luxury,<br>\r\n      <em>crafted in words<br>and pigment.<\/em>\r\n    <\/h1>\r\n    <p class=\"hero-sub r d2\">\r\n      Lily Ivor creates work that lingers between memory, beauty,<br>and contemplation \u2014 a universe of quiet, intentional elegance.\r\n    <\/p>\r\n    <div class=\"hero-divider r d2\"><\/div>\r\n    <div class=\"hero-btns r d3\">\r\n      <a class=\"btn-gold\" href=\"#book\">Discover ArtWork \u2192<\/a>\r\n      <a class=\"btn-ghost\" href=\"#about\">Meet Lily \u2192<\/a>\r\n    <\/div>\r\n    <div class=\"hero-scroll\">\r\n      <span>Scroll<\/span>\r\n      <div class=\"hero-scroll-line\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"hero-right r d2\">\r\n    <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/sylvia\/wp-content\/uploads\/2026\/07\/image-11.png\" alt=\"Lily Ivor artwork\"\/>\r\n    <span class=\"hero-right-tag\">Studio Archive \u00b7 No. 11<\/span>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550 SECTION 2 \u00b7 FEATURED BOOK \u2550\u2550 -->\r\n<section class=\"book-section\" id=\"book\">\r\n  <div class=\"book-wrap\">\r\n    <div class=\"book-stage r rl\">\r\n      <div class=\"book-glow\"><\/div>\r\n      <div class=\"book-mat\">\r\n        <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/sylvia\/wp-content\/uploads\/2026\/07\/coffee-table-boook.png\" alt=\"Think On The Lovely \u2014 book cover\"\/>\r\n        <span class=\"book-mat-label\">Catalogue No. 04 \u00b7 Limited Hardcover<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"book-copy r rr\">\r\n      <div class=\"book-copy-bar\"><\/div>\r\n      <p class=\"book-edition\">Featured Book<\/p>\r\n      <h2 class=\"book-h\">Think On <em>The Lovely<\/em><\/h2>\r\n      <p class=\"book-ital\">A luminous meditation in prose and imagery<\/p>\r\n      <div class=\"book-hr\"><\/div>\r\n      <blockquote class=\"book-quote\">\r\n        \"A thoughtful journey through beauty, faith, reflection, and hope \u2014 elegance as a way of seeing.\"\r\n      <\/blockquote>\r\n      <p class=\"book-desc\">An exquisitely curated collection of literary and visual expressions. A quiet study in finding balance, seeking hope, and appreciating the fine details of our internal landscape.<\/p>\r\n      <dl class=\"book-specs\">\r\n        <div class=\"spec\"><dt>Artistry<\/dt><dd>Elegance in design<\/dd><\/div>\r\n        <div class=\"spec\"><dt>Storytelling<\/dt><dd>Quiet luxury prose<\/dd><\/div>\r\n        <div class=\"spec\"><dt>Format<\/dt><dd>Illustrated Artbook<\/dd><\/div>\r\n        <div class=\"spec\"><dt>Edition<\/dt><dd>Limited Hardcover<\/dd><\/div>\r\n      <\/dl>\r\n      <div class=\"book-btns\">\r\n        <a class=\"btn-gold\" href=\"#\">Buy Book \u2192<\/a>\r\n        <a class=\"btn-ghost\" href=\"#\">Read Sample \u2192<\/a>\r\n        <a class=\"btn-link\" href=\"#\">View Reviews<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550 SECTION 3 \u00b7 ABOUT \u2550\u2550 -->\r\n<section class=\"about\" id=\"about\">\r\n  <div class=\"about-img-col r rl\">\r\n    <img decoding=\"async\" src=\"image%20(18).png\" alt=\"Portrait of Lily Ivor\"\/>\r\n    <div class=\"about-img-badge\">Studio Archive \u00b7 No. 18<\/div>\r\n  <\/div>\r\n\r\n  <div class=\"about-col\">\r\n    <div class=\"about-num\" aria-hidden=\"true\">03<\/div>\r\n    <p class=\"about-tag r\">About<\/p>\r\n    <h2 class=\"about-h r d1\">Meet Lily Ivor<\/h2>\r\n    <div class=\"about-rule r d1\"><\/div>\r\n    <p class=\"about-p r d2\">\r\n      <span class=\"about-drop\">C<\/span>reativity has never belonged to one discipline. Through writing, painting, music, and design, Lily creates experiences that invite reflection, beauty, and imagination.\r\n    <\/p>\r\n    <div class=\"about-pull r d2\">\r\n      <p>\"Author, artist, and creative director of a quiet luxury universe.\"<\/p>\r\n    <\/div>\r\n    <p class=\"about-cap r d3\">A voice that moves between studio, page, and gallery.<\/p>\r\n    <div class=\"about-sig r d3\">Lily Ivor<\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\nconst obs = new IntersectionObserver((entries) => {\r\n  entries.forEach(e => { if(e.isIntersecting) e.target.classList.add('on'); });\r\n}, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 });\r\ndocument.querySelectorAll('.r').forEach(el => obs.observe(el));\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-f3749b7 e-con-full e-flex e-con e-parent\" data-id=\"f3749b7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d05fb63 elementor-widget elementor-widget-html\" data-id=\"d05fb63\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<meta name=\"description\" content=\"Browse the curated artwork gallery of Lily Ivor \u2014 painter, author, and creative director of quiet luxury.\"\/>\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,600;1,300;1,400&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,500&display=swap\" rel=\"stylesheet\"\/>\r\n<style>\r\n\/* \u2500\u2500 TOKENS \u2500\u2500 *\/\r\n:root{\r\n  --dark:#07070a;--dark2:#100f0d;--dark3:#181614;--dark4:#1f1e1b;\r\n  --gold:#c5a46d;--gold2:#e0ca9f;--gold-dim:rgba(197,164,109,.14);\r\n  --cream:#efeae2;--muted:#9a9590;\r\n  --tr:.55s cubic-bezier(.25,1,.5,1);\r\n}\r\n*{box-sizing:border-box;margin:0;padding:0;}\r\nhtml{scroll-behavior:smooth;}\r\n::selection{background:var(--gold);color:var(--dark);}\r\n::-webkit-scrollbar{width:6px;}\r\n::-webkit-scrollbar-track{background:var(--dark);}\r\n::-webkit-scrollbar-thumb{background:rgba(197,164,109,.28);border-radius:3px;}\r\n::-webkit-scrollbar-thumb:hover{background:var(--gold);}\r\nbody{background:var(--dark);color:var(--cream);font-family:\"Inter\",sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.7;}\r\nimg{display:block;width:100%;height:auto;}\r\na{color:inherit;text-decoration:none;}\r\nh1,h2,h3{font-family:\"Cormorant Garamond\",serif;font-weight:300;line-height:1.1;letter-spacing:.01em;}\r\n\r\n\r\n\/* \u2500\u2500 REVEAL \u2500\u2500 *\/\r\n.r{opacity:0;transform:translateY(26px);transition:opacity .95s cubic-bezier(.25,1,.5,1),transform .95s cubic-bezier(.25,1,.5,1);}\r\n.r.rl{transform:translateX(-26px);}\r\n.r.rr{transform:translateX(26px);}\r\n.r.rs{transform:scale(.97);}\r\n.r.on{opacity:1 !important;transform:none !important;}\r\n.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}.d5{transition-delay:.5s}\r\n\/* Fallback: if JS fails, still show everything after 1.5s *\/\r\n@keyframes fallbackShow{to{opacity:1;transform:none;}}\r\n.no-js .r{animation:fallbackShow .001s .001s forwards;}\r\n\r\n\/* \u2500\u2500 COMMON \u2500\u2500 *\/\r\n.eyebrow{font-size:.68rem;text-transform:uppercase;letter-spacing:.38em;color:var(--gold);font-weight:600;display:block;margin-bottom:1.1rem;}\r\n.gold-rule{width:3rem;height:1px;background:var(--gold);margin:1.6rem 0;}\r\n.btn-solid{display:inline-flex;align-items:center;gap:.55rem;background:var(--gold);color:var(--dark);font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;font-weight:700;padding:.9rem 1.9rem;transition:all var(--tr);white-space:nowrap;text-decoration:none !important;}\r\n.btn-solid:hover{background:var(--gold2);transform:translateY(-3px);box-shadow:0 14px 30px rgba(197,164,109,.2);color:white !important;}\r\n.btn-outline{display:inline-flex;align-items:center;gap:.55rem;background:transparent;color:var(--cream);font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;font-weight:600;padding:.9rem 1.9rem;border:1px solid rgba(255,255,255,.14);transition:all var(--tr);white-space:nowrap;text-decoration:none !important;}\r\n.btn-outline:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px);color:white !important;}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SECTION 1 \u2014 FEATURED ARTWORK\r\n   Layout: immersive horizontal split.\r\n   Left = ink-dark panel with editorial copy.\r\n   Right = full-bleed image with border-frame overlay.\r\n   A vertical gold number watermark anchors the left.\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.featured{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;position:relative;}\r\n\r\n\/* left panel *\/\r\n.feat-copy{\r\n  display:flex;flex-direction:column;justify-content:center;\r\n  padding:10rem 6vw 6rem 8vw;\r\n  background:var(--dark2);position:relative;z-index:2;\r\n}\r\n.feat-copy::after{\r\n  content:\"\";position:absolute;top:10%;right:0;width:1px;height:80%;\r\n  background:linear-gradient(to bottom,transparent,rgba(197,164,109,.25),transparent);\r\n}\r\n.feat-watermark{\r\n  position:absolute;top:50%;left:5vw;transform:translateY(-50%);\r\n  font-family:\"Cormorant Garamond\",serif;font-size:clamp(10rem,16vw,18rem);\r\n  font-weight:700;color:rgba(197,164,109,.03);line-height:1;letter-spacing:-.06em;\r\n  pointer-events:none;user-select:none;\r\n}\r\n.feat-copy h2{\r\n  font-family:\"Playfair Display\",serif;font-size:clamp(2.4rem,4vw,4.2rem);\r\n  font-weight:700;font-style:italic;color:var(--cream);margin-bottom:.6rem;position:relative;z-index:1;\r\n}\r\n.feat-copy .desc{\r\n  font-size:.97rem;color:rgba(239,234,226,.78);line-height:1.95;\r\n  max-width:460px;margin-bottom:.5rem;\r\n}\r\n.feat-specs{\r\n  display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 2.4rem;\r\n  margin:2.2rem 0 2.6rem;border-top:1px solid rgba(255,255,255,.05);padding-top:2rem;\r\n}\r\n.feat-spec dt{font-size:.58rem;text-transform:uppercase;letter-spacing:.22em;color:var(--gold);margin-bottom:.3rem;font-weight:700;}\r\n.feat-spec dd{font-family:\"Cormorant Garamond\",serif;font-size:1.08rem;color:var(--cream);}\r\n.feat-btns{display:flex;gap:1rem;flex-wrap:wrap;}\r\n\r\n\/* right panel \u2014 image with layered frame *\/\r\n.feat-image{position:relative;overflow:hidden;}\r\n.feat-image img{width:100%;height:100%;object-fit:cover;filter:brightness(.88) contrast(1.06) saturate(1.04);transition:transform 1.1s cubic-bezier(.25,1,.5,1),filter .8s ease;}\r\n.feat-image:hover img{transform:scale(1.05);filter:brightness(.95) contrast(1.08) saturate(1.08);}\r\n.feat-image::before{\r\n  content:\"\";position:absolute;inset:0;\r\n  background:linear-gradient(90deg,var(--dark2) 0%,transparent 35%,transparent 65%,rgba(0,0,0,.4) 100%);\r\n  z-index:1;pointer-events:none;\r\n}\r\n\/* inner border frame *\/\r\n.feat-frame-border{\r\n  position:absolute;inset:1.8rem;border:1px solid rgba(197,164,109,.2);\r\n  z-index:2;pointer-events:none;transition:all var(--tr);\r\n}\r\n.feat-image:hover .feat-frame-border{inset:2.4rem;border-color:rgba(197,164,109,.35);}\r\n\/* corner accents *\/\r\n.feat-frame-border::before,.feat-frame-border::after{\r\n  content:\"\";position:absolute;width:1.6rem;height:1.6rem;border-color:var(--gold);border-style:solid;\r\n}\r\n.feat-frame-border::before{top:-1px;left:-1px;border-width:1.5px 0 0 1.5px;}\r\n.feat-frame-border::after{bottom:-1px;right:-1px;border-width:0 1.5px 1.5px 0;}\r\n\/* tag *\/\r\n.feat-tag{\r\n  position:absolute;bottom:2.5rem;right:2.5rem;z-index:3;\r\n  background:rgba(7,7,10,.82);backdrop-filter:blur(10px);\r\n  border:1px solid rgba(197,164,109,.2);padding:.7rem 1.3rem;\r\n  font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SECTION 2 \u2014 GALLERY SLIDER\r\n   Layout: centred header + full-width auto-scroll.\r\n   Cards = tall portrait format, dark glass,\r\n   gold border glow on hover.\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.gallery{\r\n  background:var(--dark);padding:9rem 0 7rem;\r\n  position:relative;overflow:hidden;\r\n}\r\n\/* ambient glows *\/\r\n.gallery::before{\r\n  content:\"\";position:absolute;inset:0;\r\n  background:radial-gradient(circle at 15% 50%,rgba(197,164,109,.04) 0%,transparent 40%),\r\n             radial-gradient(circle at 85% 50%,rgba(197,164,109,.035) 0%,transparent 40%);\r\n  pointer-events:none;\r\n}\r\n\/* ghost watermark text *\/\r\n.gallery::after{\r\n  content:\"GALLERY\";position:absolute;bottom:5%;right:-2%;\r\n  font-family:\"Cormorant Garamond\",serif;font-size:clamp(8rem,16vw,18rem);font-weight:700;\r\n  color:rgba(197,164,109,.018);line-height:1;letter-spacing:.1em;\r\n  pointer-events:none;user-select:none;\r\n}\r\n\r\n\/* header *\/\r\n.gallery-hd{\r\n  max-width:760px;margin:0 auto;text-align:center;\r\n  padding:0 5vw 5.5rem;position:relative;z-index:2;\r\n}\r\n.gallery-hd h2{\r\n  font-family:\"Playfair Display\",serif;font-size:clamp(2.2rem,4vw,3.8rem);\r\n  font-weight:700;color:var(--cream);margin-bottom:1.1rem;\r\n}\r\n.gallery-hd .sub{font-size:.95rem;color:var(--muted);line-height:1.85;margin-bottom:1.6rem;}\r\n.gallery-hd .note{\r\n  display:inline-flex;align-items:center;gap:.9rem;\r\n  font-size:.65rem;text-transform:uppercase;letter-spacing:.25em;color:var(--muted);\r\n}\r\n.gallery-hd .note::before,.gallery-hd .note::after{content:\"\";width:2rem;height:1px;background:var(--gold);}\r\n\r\n\/* track *\/\r\n.g-slider{position:relative;z-index:2;width:100%;overflow:hidden;}\r\n.g-track{\r\n  display:flex;gap:1.4rem;padding:1rem 5vw 2rem;\r\n  transition:transform .85s cubic-bezier(.25,.46,.45,.94);\r\n}\r\n\r\n\/* card *\/\r\n.g-card{\r\n  flex:0 0 calc(25% - 1.05rem);min-width:0;\r\n  position:relative;border-radius:.5rem;overflow:hidden;\r\n  background:var(--dark3);border:1px solid rgba(197,164,109,.1);\r\n  box-shadow:0 20px 55px rgba(0,0,0,.55);\r\n  transition:transform .6s cubic-bezier(.25,1,.5,1),box-shadow .6s ease,border-color .6s ease;\r\n  cursor:pointer;\r\n}\r\n.g-card:hover{\r\n  transform:translateY(-10px) scale(1.01);\r\n  border-color:rgba(197,164,109,.32);\r\n  box-shadow:0 40px 90px rgba(197,164,109,.1),0 20px 45px rgba(0,0,0,.6);\r\n}\r\n.g-img{\r\n  position:relative;overflow:hidden;aspect-ratio:3\/4;\r\n  background:var(--dark4);\r\n}\r\n.g-img img{\r\n  width:100%;height:100%;object-fit:cover;\r\n  filter:brightness(.85) contrast(1.07) saturate(1.02);\r\n  transition:transform .85s cubic-bezier(.25,1,.5,1),filter .6s ease;\r\n}\r\n.g-card:hover .g-img img{transform:scale(1.1) rotate(.8deg);filter:brightness(.98) contrast(1.1) saturate(1.07);}\r\n\/* top-left gold corner on hover *\/\r\n.g-img::before{\r\n  content:\"\";position:absolute;top:1rem;left:1rem;\r\n  width:1.8rem;height:1.8rem;\r\n  border-top:1.5px solid var(--gold);border-left:1.5px solid var(--gold);\r\n  z-index:2;opacity:0;transition:opacity var(--tr);\r\n}\r\n.g-card:hover .g-img::before{opacity:1;}\r\n\/* gradient overlay *\/\r\n.g-img::after{\r\n  content:\"\";position:absolute;inset:0;\r\n  background:linear-gradient(180deg,transparent 50%,rgba(7,7,10,.75) 100%);\r\n  z-index:1;pointer-events:none;\r\n}\r\n\/* info strip *\/\r\n.g-info{\r\n  padding:1.25rem 1.2rem 1.4rem;\r\n  background:linear-gradient(180deg,var(--dark3),var(--dark));\r\n  border-top:1px solid rgba(197,164,109,.1);\r\n  position:relative;\r\n}\r\n.g-info::before{\r\n  content:\"\";position:absolute;top:0;left:1.2rem;right:1.2rem;height:1px;\r\n  background:linear-gradient(90deg,transparent,rgba(197,164,109,.3),transparent);\r\n}\r\n.g-cat{font-size:.58rem;text-transform:uppercase;letter-spacing:.22em;color:var(--gold);font-weight:700;display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;}\r\n.g-cat::before{content:\"\";width:1rem;height:1.5px;background:var(--gold);}\r\n.g-title{font-family:\"Playfair Display\",serif;font-size:1.05rem;font-weight:600;color:var(--cream);margin-bottom:.3rem;}\r\n.g-year{font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);}\r\n\r\n\/* no-info variant \u2014 image only *\/\r\n.g-card.no-info .g-info{display:none;}\r\n.g-card.no-info .g-img{aspect-ratio:3\/4;}\r\n\r\n\/* dots *\/\r\n.g-dots{\r\n  display:flex;justify-content:center;gap:1rem;\r\n  margin-top:3.5rem;position:relative;z-index:2;padding:0 5vw;\r\n}\r\n.g-dot{\r\n  width:.7rem;height:.7rem;border-radius:50%;\r\n  background:rgba(255,255,255,.06);border:1.5px solid rgba(197,164,109,.22);\r\n  cursor:pointer;transition:all var(--tr);position:relative;overflow:hidden;\r\n}\r\n.g-dot::before{\r\n  content:\"\";position:absolute;inset:0;border-radius:50%;\r\n  background:linear-gradient(135deg,var(--gold),rgba(197,164,109,.6));\r\n  transform:scale(0);transition:transform var(--tr);\r\n}\r\n.g-dot.on{border-color:var(--gold);box-shadow:0 0 18px rgba(197,164,109,.35);}\r\n.g-dot.on::before{transform:scale(1);}\r\n.g-dot:hover{border-color:rgba(197,164,109,.55);}\r\n\r\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n@media(max-width:1400px){.g-card{flex:0 0 calc(33.333% - .94rem);}}\r\n@media(max-width:1050px){\r\n  .featured{grid-template-columns:1fr;}\r\n  .feat-copy{padding:9rem 6vw 5rem;order:2;}\r\n  .feat-image{min-height:55vw;order:1;}\r\n  .feat-copy::after{display:none;}\r\n  .g-card{flex:0 0 calc(50% - .7rem);}\r\n}\r\n@media(max-width:680px){\r\n  .nav-links{display:none;}\r\n  .feat-copy{padding:7rem 5vw 4rem;}\r\n  .feat-specs{grid-template-columns:1fr;gap:1.2rem;}\r\n  .feat-btns{flex-direction:column;}\r\n  .btn-solid,.btn-outline{width:100%;justify-content:center;}\r\n  .g-track{padding:1rem 4vw 2rem;gap:1rem;}\r\n  .g-card{flex:0 0 calc(50% - .5rem);}\r\n  .gallery{padding:7rem 0 5rem;}\r\n}\r\n@media(max-width:480px){\r\n  .g-card{flex:0 0 100%;}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     SECTION 1 \u2014 FEATURED ARTWORK\r\n     Immersive editorial split\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"featured\" id=\"featured\">\r\n\r\n  <!-- LEFT: copy panel -->\r\n  <div class=\"feat-copy\">\r\n    <div class=\"feat-watermark\" aria-hidden=\"true\">01<\/div>\r\n\r\n    <span class=\"eyebrow r\">Featured Artwork<\/span>\r\n\r\n    <h2 class=\"r d1\">The Quiet<br><em>Gesture<\/em><\/h2>\r\n\r\n    <div class=\"gold-rule r d1\"><\/div>\r\n\r\n    <p class=\"desc r d2\">\r\n      A luminous composition that bridges stillness and movement.\r\n      This piece invites a slow discovery of texture, tone, and\r\n      delicate light \u2014 a pinnacle of quiet, editorial artistry.\r\n    <\/p>\r\n\r\n    <dl class=\"feat-specs r d2\">\r\n      <div class=\"feat-spec\"><dt>Medium<\/dt><dd>Oil on Linen<\/dd><\/div>\r\n      <div class=\"feat-spec\"><dt>Year<\/dt><dd>2025<\/dd><\/div>\r\n      <div class=\"feat-spec\"><dt>Edition<\/dt><dd>Limited Series<\/dd><\/div>\r\n      <div class=\"feat-spec\"><dt>Status<\/dt><dd>Museum Quality<\/dd><\/div>\r\n    <\/dl>\r\n\r\n    <div class=\"feat-btns r d3\">\r\n      <a class=\"btn-solid\" href=\"#\">Inquire Now \u2192<\/a>\r\n      <a class=\"btn-outline\" href=\"#\">View Details \u2192<\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- RIGHT: image panel -->\r\n  <div class=\"feat-image r rr\">\r\n    <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/sylvia\/wp-content\/uploads\/2026\/07\/image-6.png\" alt=\"The Quiet Gesture \u2014 featured artwork by Lily Ivor\"\/>\r\n    <div class=\"feat-frame-border\"><\/div>\r\n    <span class=\"feat-tag\">No. 06 \u00b7 2025 Collection<\/span>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     SECTION 2 \u2014 GALLERY SLIDER\r\n     Full-width auto-scroll with glass cards\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"gallery\" id=\"gallery\">\r\n\r\n  <!-- header -->\r\n  <div class=\"gallery-hd\">\r\n    <span class=\"eyebrow r\">Artwork Gallery<\/span>\r\n    <h2 class=\"r d1\">Recent Works on View<\/h2>\r\n    <p class=\"sub r d2\">\r\n      An edited selection of Lily Ivor's latest paintings \u2014 each composed with\r\n      quiet luxury sensibility and editorial restraint, curated for contemplation.\r\n    <\/p>\r\n    <p class=\"note r d3\">Curated Pieces &nbsp;\u00b7&nbsp; Limited Presentation<\/p>\r\n  <\/div>\r\n\r\n  <!-- slider -->\r\n  <div class=\"g-slider\">\r\n    <div class=\"g-track\" id=\"gTrack\">\r\n\r\n      <div class=\"g-card no-info r rs d1\">\r\n        <div class=\"g-img\"><img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/sylvia\/wp-content\/uploads\/2026\/07\/image-11.png\" alt=\"Whisper of Earth\"\/><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"g-card no-info r rs d2\">\r\n        <div class=\"g-img\"><img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/sylvia\/wp-content\/uploads\/2026\/07\/image-12.png\" alt=\"Evening Poem\"\/><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"g-card no-info r rs d3\">\r\n        <div class=\"g-img\"><img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/sylvia\/wp-content\/uploads\/2026\/07\/image-2.png\" alt=\"Silent Geometry\"\/><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"g-card no-info r rs d4\">\r\n        <div class=\"g-img\"><img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/sylvia\/wp-content\/uploads\/2026\/07\/image-6.png\" alt=\"Gilded Halo\"\/><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"g-card no-info r rs\">\r\n        <div class=\"g-img\"><img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/sylvia\/wp-content\/uploads\/2026\/07\/image-5.png\" alt=\"Luminous Traces\"\/><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"g-card no-info r rs d1\">\r\n        <div class=\"g-img\"><img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/sylvia\/wp-content\/uploads\/2026\/07\/8475667.jpg\" alt=\"Ethereal Moments\"\/><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"g-card r rs d2\">\r\n        <div class=\"g-img\"><img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/sylvia\/wp-content\/uploads\/2026\/07\/shiny-textured-background-scaled.jpg\" alt=\"Chromatic Harmony\"\/><\/div>\r\n       \r\n      <\/div>\r\n\r\n      <div class=\"g-card r rs d3\">\r\n        <div class=\"g-img\"><img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/sylvia\/wp-content\/uploads\/2026\/07\/messy-painted-wooden-textured-background-scaled.jpg\" alt=\"Celestial Dreams\"\/><\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- dots -->\r\n  <div class=\"g-dots\" id=\"gDots\"><\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n\/* \u2500\u2500 Reveal on scroll \u2500\u2500 *\/\r\nconst revEls = document.querySelectorAll('.r');\r\n\r\n\/\/ Immediately show anything already in viewport\r\nfunction checkReveal(){\r\n  const vh = window.innerHeight;\r\n  revEls.forEach(el => {\r\n    const rect = el.getBoundingClientRect();\r\n    if(rect.top < vh * 0.96) el.classList.add('on');\r\n  });\r\n}\r\n\r\n\/\/ IntersectionObserver as primary driver\r\nif('IntersectionObserver' in window){\r\n  const obs = new IntersectionObserver(entries => {\r\n    entries.forEach(e => { if(e.isIntersecting) e.target.classList.add('on'); });\r\n  }, { rootMargin:'0px 0px -4% 0px', threshold:.05 });\r\n  revEls.forEach(el => obs.observe(el));\r\n}\r\n\r\n\/\/ Fallback: force-show everything after 800ms in case observer misses\r\nsetTimeout(() => revEls.forEach(el => el.classList.add('on')), 800);\r\n\r\n\/\/ Also check on scroll\r\nwindow.addEventListener('scroll', checkReveal, {passive:true});\r\ncheckReveal(); \/\/ run immediately on load\r\n\r\n\/* \u2500\u2500 Gallery slider \u2500\u2500 *\/\r\nconst track  = document.getElementById('gTrack');\r\nconst dotsEl = document.getElementById('gDots');\r\nconst cards  = document.querySelectorAll('.g-card');\r\nconst total  = cards.length;\r\n\r\nfunction perView(){\r\n  const w = window.innerWidth;\r\n  return w > 1400 ? 4 : w > 1050 ? 3 : w > 480 ? 2 : 1;\r\n}\r\n\r\nlet ipv = perView(), cur = 0, timer;\r\n\r\nfunction buildDots(){\r\n  dotsEl.innerHTML = '';\r\n  const n = Math.ceil(total \/ ipv);\r\n  for(let i = 0; i < n; i++){\r\n    const d = document.createElement('div');\r\n    d.className = 'g-dot' + (i === 0 ? ' on' : '');\r\n    d.addEventListener('click', () => go(i * ipv));\r\n    dotsEl.appendChild(d);\r\n  }\r\n}\r\n\r\nfunction render(){\r\n  \/\/ Each card = (100% \/ ipv). Offset by cur card widths including gaps.\r\n  const gap = 1.4; \/\/ rem \u2014 must match CSS gap (1.4rem)\r\n  const remPx = parseFloat(getComputedStyle(document.documentElement).fontSize);\r\n  const gapPx = gap * remPx;\r\n  const trackW = track.parentElement.clientWidth - (parseFloat(getComputedStyle(track).paddingLeft)||0)*2;\r\n  const cardW  = (trackW - gapPx * (ipv - 1)) \/ ipv;\r\n  track.style.transform = `translateX(-${cur * (cardW + gapPx)}px)`;\r\n  const active = Math.floor(cur \/ ipv);\r\n  dotsEl.querySelectorAll('.g-dot').forEach((d,i) => d.classList.toggle('on', i === active));\r\n}\r\n\r\nfunction go(idx){\r\n  cur = Math.min(idx, total - ipv);\r\n  if(cur < 0) cur = 0;\r\n  render();\r\n  restart();\r\n}\r\n\r\nfunction next(){ go(cur + ipv >= total ? 0 : cur + ipv); }\r\n\r\nfunction restart(){ clearInterval(timer); timer = setInterval(next, 5500); }\r\n\r\nbuildDots(); render(); restart();\r\n\r\ntrack.addEventListener('mouseenter', () => clearInterval(timer));\r\ntrack.addEventListener('mouseleave', restart);\r\n\r\nlet startX;\r\ntrack.addEventListener('touchstart', e => { startX = e.touches[0].clientX; }, {passive:true});\r\ntrack.addEventListener('touchend', e => {\r\n  const dx = e.changedTouches[0].clientX - startX;\r\n  if(Math.abs(dx) > 40) go(dx < 0 ? cur + ipv : cur - ipv);\r\n});\r\n\r\nwindow.addEventListener('resize', () => {\r\n  const nv = perView();\r\n  if(nv !== ipv){ ipv = nv; cur = 0; buildDots(); render(); }\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-fa3c22c e-con-full e-flex e-con e-parent\" data-id=\"fa3c22c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8336f42 elementor-widget elementor-widget-html\" data-id=\"8336f42\" 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\r\n      href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@600;700;800&display=swap\"\r\n      rel=\"stylesheet\"\r\n    \/>\r\n    <style>\r\n      :root {\r\n        --bg: #0b0b0b;\r\n        --bg-soft: #141414;\r\n        --card: #1a1a1a;\r\n        --gold: #c5a46d;\r\n        --text: #efeae2;\r\n        --muted: #a8a8a8;\r\n        --cream: #f5f1ed;\r\n      }\r\n\r\n      * {\r\n        box-sizing: border-box;\r\n      }\r\n\r\n      html {\r\n        scroll-behavior: smooth;\r\n      }\r\n\r\n      body {\r\n        margin: 0;\r\n        background: var(--bg);\r\n        color: var(--text);\r\n        font-family: \"Inter\", sans-serif;\r\n      }\r\n\r\n      img {\r\n        display: block;\r\n        width: 100%;\r\n        height: auto;\r\n      }\r\n\r\n      a {\r\n        color: inherit;\r\n        text-decoration: none;\r\n      }\r\n\r\n      .page-shell {\r\n        width: 100%;\r\n        margin: 0 auto;\r\n      }\r\n\r\n      .section {\r\n        position: relative;\r\n        overflow: hidden;\r\n      }\r\n\r\n      .eyebrow {\r\n        margin: 0 0 0.85rem;\r\n        font-size: 0.78rem;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.34em;\r\n        color: var(--gold);\r\n        font-weight: 600;\r\n      }\r\n\r\n      h1,\r\n      h2,\r\n      h3 {\r\n        font-family: \"Cormorant Garamond\", serif;\r\n        font-weight: 500;\r\n        margin: 0;\r\n        letter-spacing: 0.01em;\r\n      }\r\n\r\n      p,\r\n      .body-copy {\r\n        font-size: 1rem;\r\n        line-height: 1.9;\r\n        color: var(--muted);\r\n        margin: 0;\r\n      }\r\n\r\n      .gold-line {\r\n        width: 5rem;\r\n        height: 1px;\r\n        background: linear-gradient(90deg, transparent, var(--gold), transparent);\r\n        margin: 1.4rem 0 2rem;\r\n      }\r\n\r\n      \/* ===== INSPIRATIONAL QUOTE SECTION - SPLIT LAYOUT ===== *\/\r\n      .quote-section {\r\n        min-height: 100vh;\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 0;\r\n        align-items: stretch;\r\n        position: relative;\r\n        overflow: hidden;\r\n      }\r\n\r\n      .quote-section::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    background:url(\"https:\/\/demowebdesign.live\/sylvia\/wp-content\/uploads\/2026\/07\/21199.jpg\") center center \/ cover no-repeat;\r\n    z-index:-2;\r\n}\r\n\r\n.quote-section::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    background:linear-gradient(\r\n        135deg,\r\n        rgba(7,7,10,.85) 0%,\r\n        rgba(7,7,10,.65) 50%,\r\n        rgba(7,7,10,.85) 100%\r\n    );\r\n    z-index:-1;\r\n}\r\n\r\n      \/* Quote Left Side - Content *\/\r\n      .quote-left {\r\n        position: relative;\r\n        z-index: 2;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        align-items: flex-start;\r\n        padding: 8rem 7rem;\r\n        background: linear-gradient(135deg, rgba(11, 11, 11, 0.5) 0%, rgba(11, 11, 11, 0.8) 100%);\r\n      }\r\n\r\n      .quote-left::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        bottom: 0;\r\n        right: 0;\r\n        width: 1px;\r\n        height: 70%;\r\n        background: linear-gradient(180deg, transparent, rgba(197, 164, 109, 0.3), transparent);\r\n      }\r\n\r\n      .quote-label {\r\n        font-size: 0.82rem;\r\n        letter-spacing: 0.4em;\r\n        text-transform: uppercase;\r\n        color: var(--gold);\r\n        font-weight: 600;\r\n        margin-bottom: 1.5rem;\r\n      }\r\n\r\n      .quote-text {\r\n        font-family: \"Playfair Display\", serif;\r\n        font-size: 60px !important;\r\n        font-weight: 700;\r\n        letter-spacing: -0.02em;\r\n        line-height: 1.3;\r\n        color: var(--cream);\r\n        margin-bottom: 2.5rem;\r\n        max-width: 580px;\r\n        animation: fadeInUp 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;\r\n        opacity: 0;\r\n      }\r\n\r\n      @keyframes fadeInUp {\r\n        from {\r\n          opacity: 0;\r\n          transform: translateY(40px);\r\n        }\r\n        to {\r\n          opacity: 1;\r\n          transform: translateY(0);\r\n        }\r\n      }\r\n\r\n      .quote-divider {\r\n        width: 4rem;\r\n        height: 1.5px;\r\n        background: linear-gradient(90deg, var(--gold), rgba(197, 164, 109, 0.4));\r\n        margin-bottom: 2rem;\r\n        animation: expandWidth 1.5s ease-out 0.3s forwards;\r\n        transform-origin: left;\r\n        opacity: 0;\r\n      }\r\n\r\n      @keyframes expandWidth {\r\n        from {\r\n          width: 0;\r\n          opacity: 0;\r\n        }\r\n        to {\r\n          width: 4rem;\r\n          opacity: 1;\r\n        }\r\n      }\r\n\r\n      .quote-description {\r\n        font-size: 1.05rem;\r\n        color: #e8dfd2;\r\n        line-height: 2;\r\n        max-width: 520px;\r\n        margin-bottom: 2.5rem;\r\n        animation: fadeIn 1.2s ease-out 0.6s forwards;\r\n        opacity: 0;\r\n      }\r\n\r\n      @keyframes fadeIn {\r\n        from {\r\n          opacity: 0;\r\n        }\r\n        to {\r\n          opacity: 1;\r\n        }\r\n      }\r\n\r\n      .quote-attribution {\r\n        font-size: 0.88rem;\r\n        color: var(--gold);\r\n        letter-spacing: 0.22em;\r\n        text-transform: uppercase;\r\n        font-weight: 600;\r\n        animation: fadeIn 1.2s ease-out 0.8s forwards;\r\n        opacity: 0;\r\n      }\r\n\r\n      \/* Quote Right Side - Image *\/\r\n      .quote-right {\r\n        position: relative;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        background: linear-gradient(135deg, rgba(20, 20, 20, 0.4) 0%, rgba(11, 11, 11, 0.9) 100%);\r\n        overflow: hidden;\r\n        z-index: 1;\r\n        padding: 4rem;\r\n      }\r\n\r\n      .quote-right::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        inset: 0;\r\n        background: radial-gradient(circle at center, rgba(197, 164, 109, 0.03) 0%, transparent 70%);\r\n        pointer-events: none;\r\n      }\r\n\r\n      .quote-image-container {\r\n        position: relative;\r\n        width: 100%;\r\n        max-width: 520px;\r\n        aspect-ratio: 3 \/ 4;\r\n        z-index: 2;\r\n      }\r\n\r\n      .quote-image-container::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        inset: -3%;\r\n        border: 2px solid rgba(197, 164, 109, 0.2);\r\n        pointer-events: none;\r\n      }\r\n\r\n      .quote-image-container::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        inset: 0;\r\n        background: linear-gradient(135deg, rgba(197, 164, 109, 0.05) 0%, transparent 50%, rgba(197, 164, 109, 0.03) 100%);\r\n        pointer-events: none;\r\n      }\r\n\r\n      .quote-image-container img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        filter: contrast(1.08) saturate(1.05) brightness(0.95);\r\n        transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), filter 0.7s ease;\r\n      }\r\n\r\n      .quote-image-container:hover img {\r\n        transform: scale(1.02);\r\n        filter: contrast(1.1) saturate(1.08) brightness(1);\r\n      }\r\n\r\n      \/* ===== TESTIMONIALS SECTION - PREMIUM LAYOUT ===== *\/\r\n      .testimonials-section {\r\n        padding: 10rem 5vw;\r\n        background: var(--bg);\r\n        position: relative;\r\n        min-height: 120vh;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n      }\r\n\r\n      .testimonials-section::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        inset: 0;\r\n        background: \r\n          radial-gradient(circle at 10% 50%, rgba(197, 164, 109, 0.06) 0%, transparent 40%),\r\n          radial-gradient(circle at 90% 50%, rgba(197, 164, 109, 0.04) 0%, transparent 40%);\r\n        pointer-events: none;\r\n      }\r\n\r\n      .testimonials-section::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        height: 1px;\r\n        background: linear-gradient(90deg, transparent, rgba(197, 164, 109, 0.2), transparent);\r\n      }\r\n\r\n      .testimonials-container {\r\n        position: relative;\r\n        z-index: 1;\r\n        max-width: 1600px;\r\n        margin: 0 auto;\r\n      }\r\n\r\n      \/* Testimonials Header *\/\r\n      .testimonials-header {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1.2fr;\r\n        gap: 4rem;\r\n        align-items: start;\r\n        margin-bottom: 6rem;\r\n      }\r\n\r\n      .testimonials-header-left {\r\n        position: relative;\r\n      }\r\n\r\n      .testimonials-header-left .eyebrow {\r\n        font-size: 0.82rem;\r\n        letter-spacing: 0.4em;\r\n      }\r\n\r\n      .testimonials-header-left h2 {\r\n        font-family: \"Playfair Display\", serif;\r\n        font-size: 60px;\r\n        margin-bottom: 1rem;\r\n        letter-spacing: -0.03em;\r\n        font-weight: 800;\r\n        color: white !important;\r\n      }\r\n\r\n      .testimonials-header-left .gold-line {\r\n        width: 6rem;\r\n      }\r\n\r\n      .testimonials-header-right {\r\n        padding: 2.5rem 3rem;\r\n        background: linear-gradient(135deg, rgba(26, 26, 26, 0.7) 0%, rgba(20, 20, 20, 0.9) 100%);\r\n        border: 1px solid rgba(197, 164, 109, 0.2);\r\n        border-radius: 1.2rem;\r\n        backdrop-filter: blur(12px);\r\n        position: relative;\r\n        overflow: hidden;\r\n      }\r\n\r\n      .testimonials-header-right::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: -50%;\r\n        right: -30%;\r\n        width: 400px;\r\n        height: 400px;\r\n        border-radius: 50%;\r\n        background: radial-gradient(circle, rgba(197, 164, 109, 0.08) 0%, transparent 70%);\r\n        filter: blur(80px);\r\n        pointer-events: none;\r\n      }\r\n\r\n      .testimonials-header-right .subtitle {\r\n        font-size: 1.1rem;\r\n        color: #e8dfd2;\r\n        line-height: 2.1;\r\n        position: relative;\r\n        z-index: 1;\r\n      }\r\n\r\n      .testimonials-header-right .stats {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 2rem;\r\n        margin-top: 2rem;\r\n        position: relative;\r\n        z-index: 1;\r\n      }\r\n\r\n      .stat {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 0.5rem;\r\n        padding-top: 1.5rem;\r\n        border-top: 1px solid rgba(197, 164, 109, 0.15);\r\n      }\r\n\r\n      .stat-number {\r\n        font-family: \"Playfair Display\", serif;\r\n        font-size: 2rem;\r\n        font-weight: 700;\r\n        color: var(--gold);\r\n      }\r\n\r\n      .stat-label {\r\n        font-size: 0.8rem;\r\n        color: var(--muted);\r\n        letter-spacing: 0.16em;\r\n        text-transform: uppercase;\r\n      }\r\n\r\n      \/* Testimonials Grid *\/\r\n      .testimonials-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));\r\n        gap: 2.2rem;\r\n        position: relative;\r\n        z-index: 1;\r\n      }\r\n\r\n      .testimonial-card {\r\n        position: relative;\r\n        padding: 2.8rem;\r\n        background: linear-gradient(135deg, rgba(26, 26, 26, 0.8) 0%, rgba(20, 20, 20, 0.95) 100%);\r\n        border: 1px solid rgba(197, 164, 109, 0.15);\r\n        border-radius: 1.2rem;\r\n        box-shadow: \r\n          0 30px 80px rgba(0, 0, 0, 0.4),\r\n          inset 0 1px 0 rgba(255, 255, 255, 0.05);\r\n        transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\r\n        cursor: pointer;\r\n        overflow: hidden;\r\n        animation: scaleIn 0.8s ease-out;\r\n      }\r\n\r\n      @keyframes scaleIn {\r\n        from {\r\n          opacity: 0;\r\n          transform: scale(0.95);\r\n        }\r\n        to {\r\n          opacity: 1;\r\n          transform: scale(1);\r\n        }\r\n      }\r\n\r\n      .testimonial-card::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        inset: 0;\r\n        background: linear-gradient(135deg, rgba(197, 164, 109, 0.1) 0%, transparent 50%, rgba(197, 164, 109, 0.05) 100%);\r\n        opacity: 0;\r\n        transition: opacity 0.6s ease;\r\n        pointer-events: none;\r\n      }\r\n\r\n      .testimonial-card::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        height: 2px;\r\n        background: linear-gradient(90deg, transparent, var(--gold), transparent);\r\n        opacity: 0;\r\n        transition: opacity 0.6s ease;\r\n      }\r\n\r\n      .testimonial-card:hover::before {\r\n        opacity: 1;\r\n      }\r\n\r\n      .testimonial-card:hover::after {\r\n        opacity: 1;\r\n      }\r\n\r\n      .testimonial-card:hover {\r\n        border-color: rgba(197, 164, 109, 0.35);\r\n        box-shadow: \r\n          0 50px 120px rgba(197, 164, 109, 0.15),\r\n          inset 0 1px 0 rgba(255, 255, 255, 0.08);\r\n        transform: translateY(-10px);\r\n      }\r\n\r\n      .testimonial-rating {\r\n        display: flex;\r\n        gap: 0.4rem;\r\n        margin-bottom: 1.8rem;\r\n        position: relative;\r\n        z-index: 1;\r\n      }\r\n\r\n      .star {\r\n        font-size: 1.2rem;\r\n        color: var(--gold);\r\n      }\r\n\r\n      .testimonial-text {\r\n        font-size: 1.08rem;\r\n        color: #e8dfd2;\r\n        line-height: 2.1;\r\n        margin-bottom: 2.2rem;\r\n        position: relative;\r\n        z-index: 1;\r\n      }\r\n\r\n      .testimonial-divider {\r\n        width: 100%;\r\n        height: 1px;\r\n        background: linear-gradient(90deg, transparent, rgba(197, 164, 109, 0.2), transparent);\r\n        margin-bottom: 2rem;\r\n        position: relative;\r\n        z-index: 1;\r\n      }\r\n\r\n      .testimonial-author {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 1.2rem;\r\n        position: relative;\r\n        z-index: 1;\r\n      }\r\n\r\n      .author-avatar {\r\n        width: 3.5rem;\r\n        height: 3.5rem;\r\n        border-radius: 50%;\r\n        background: linear-gradient(135deg, var(--gold), rgba(197, 164, 109, 0.6));\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 1.3rem;\r\n        font-weight: 700;\r\n        color: #0b0b0b;\r\n        box-shadow: 0 10px 30px rgba(197, 164, 109, 0.2);\r\n      }\r\n\r\n      .author-info {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 0.4rem;\r\n      }\r\n\r\n      .author-name {\r\n        font-family: \"Playfair Display\", serif;\r\n        font-size: 1.05rem;\r\n        font-weight: 700;\r\n        color: var(--cream);\r\n      }\r\n\r\n      .author-title {\r\n        font-size: 0.82rem;\r\n        color: var(--muted);\r\n        letter-spacing: 0.16em;\r\n        text-transform: uppercase;\r\n      }\r\n\r\n      \/* ===== LUXURY MINIMAL FOOTER ===== *\/\r\n      .footer {\r\n        position: relative;\r\n        overflow: hidden;\r\n        background: transparent !important;\r\n        padding: 0px 0px;\r\n      }\r\n      \r\n      footer{\r\n    background: #060608;\r\n    border-top: 1px solid rgba(197, 164, 109, .07);\r\n    padding: 0px 0px !important;\r\n}\r\n\r\n      .footer::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    background:url(\"https:\/\/demowebdesign.live\/sylvia\/wp-content\/uploads\/2026\/07\/2151241643.jpg\") center center \/ cover no-repeat;\r\n    z-index:-2;\r\n}\r\n\r\n.footer::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    background:linear-gradient(\r\n        180deg,\r\n        rgba(0,0,0,.90) 0%,\r\n        rgba(0,0,0,.75) 45%,\r\n        rgba(0,0,0,.95) 100%\r\n    );\r\n    z-index:-1;\r\n}\r\n\r\n      .footer-container {\r\n        max-width: 1400px;\r\n        margin: 0 auto;\r\n        padding: 6rem 5vw;\r\n      }\r\n\r\n      \/* Logo Section *\/\r\n      .footer-logo-section {\r\n        display: flex;\r\n        justify-content: center;\r\n        margin-bottom: 5rem;\r\n        animation: fadeIn 1.2s ease-out;\r\n        align-items:center;\r\n}\r\n      \r\n\r\n.footer-logo-img{\r\n    display:block;\r\n    width:200px;      \/* Adjust as needed *\/\r\n    max-width:100%;\r\n    height:auto;\r\n    object-fit:contain;\r\n    transition:transform .35s ease, opacity .35s ease;\r\n}\r\n\r\n.footer-logo-img:hover{\r\n    transform:scale(1.05);\r\n    opacity:.9;\r\n}\r\n\r\n      \/* Navigation Section *\/\r\n      .footer-nav {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 4rem;\r\n        margin-bottom: 5rem;\r\n        flex-wrap: wrap;\r\n      }\r\n\r\n      .footer-nav-link {\r\n        font-size: 0.95rem;\r\n        color: var(--text);\r\n        letter-spacing: 0.08em;\r\n        text-transform: uppercase;\r\n        transition: all 0.4s ease;\r\n        position: relative;\r\n        text-decoration: none !important;\r\n      }\r\n\r\n      .footer-nav-link::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        bottom: -0.5rem;\r\n        left: 0;\r\n        width: 0;\r\n        height: 1px;\r\n        background: var(--gold);\r\n        transition: width 0.4s ease;\r\n      }\r\n\r\n      .footer-nav-link:hover {\r\n        color: var(--gold);\r\n      }\r\n\r\n      .footer-nav-link:hover::after {\r\n        width: 100%;\r\n      }\r\n\r\n      \/* Social Section *\/\r\n      .footer-social {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 2.5rem;\r\n        margin-bottom: 5rem;\r\n      }\r\n\r\n      .social-icon {\r\n        width: 2.5rem;\r\n        height: 2.5rem;\r\n        border-radius: 50%;\r\n        border: 1px solid rgba(197, 164, 109, 0.3);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: var(--text);\r\n        font-size: 1.1rem;\r\n        transition: all 0.4s ease;\r\n        cursor: pointer;\r\n      }\r\n\r\n      .social-icon:hover {\r\n        border-color: var(--gold);\r\n        background: rgba(197, 164, 109, 0.1);\r\n        color: var(--gold);\r\n        transform: translateY(-4px);\r\n      }\r\n\r\n      \/* Newsletter Section *\/\r\n      .footer-newsletter {\r\n        display: flex;\r\n        justify-content: center;\r\n        margin-bottom: 5rem;\r\n      }\r\n\r\n      .newsletter-link {\r\n        font-size: 0.9rem;\r\n        color: var(--muted);\r\n        letter-spacing: 0.12em;\r\n        text-transform: uppercase;\r\n        transition: all 0.4s ease;\r\n        position: relative;\r\n        padding-bottom: 0.5rem;\r\n        text-decoration: none !important;\r\n      }\r\n\r\n      .newsletter-link::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        bottom: 0;\r\n        left: 0;\r\n        width: 0;\r\n        height: 1px;\r\n        background: var(--gold);\r\n        transition: width 0.4s ease;\r\n      }\r\n\r\n      .newsletter-link:hover {\r\n        color: var(--gold);\r\n      }\r\n\r\n      .newsletter-link:hover::after {\r\n        width: 100%;\r\n      }\r\n\r\n      \/* Divider *\/\r\n      .footer-divider {\r\n        width: 100%;\r\n        height: 1px;\r\n        background: linear-gradient(90deg, transparent, rgba(197, 164, 109, 0.2), transparent);\r\n        margin-bottom: 3rem;\r\n      }\r\n\r\n      \/* Bottom Section *\/\r\n      .footer-bottom {\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        gap: 1rem;\r\n        flex-wrap: wrap;\r\n        text-align: center;\r\n      }\r\n\r\n      .footer-copyright {\r\n        font-size: 0.85rem;\r\n        color: var(--muted);\r\n        letter-spacing: 0.1em;\r\n      }\r\n\r\n      .footer-tagline {\r\n        font-size: 0.85rem;\r\n        color: var(--gold);\r\n        letter-spacing: 0.12em;\r\n        text-transform: uppercase;\r\n        font-weight: 600;\r\n      }\r\n\r\n      \/* ===== RESPONSIVE DESIGN ===== *\/\r\n      @media (max-width: 1200px) {\r\n        .quote-section {\r\n          grid-template-columns: 1fr;\r\n          min-height: auto;\r\n        }\r\n\r\n        .quote-left {\r\n          padding: 5rem 4rem;\r\n          order: 2;\r\n        }\r\n\r\n        .quote-right {\r\n          min-height: 500px;\r\n          order: 1;\r\n          padding: 3rem;\r\n        }\r\n\r\n        .testimonials-header {\r\n          grid-template-columns: 1fr;\r\n          gap: 3rem;\r\n        }\r\n\r\n        .testimonials-grid {\r\n          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n          gap: 1.8rem;\r\n        }\r\n\r\n        .footer-nav {\r\n          gap: 2.5rem;\r\n        }\r\n\r\n        .footer-container {\r\n          padding: 4rem 5vw;\r\n        }\r\n      }\r\n\r\n      @media (max-width: 768px) {\r\n        .quote-left {\r\n          padding: 4rem 2rem;\r\n        }\r\n\r\n        .quote-text {\r\n          font-size: 40px !important;\r\n          margin-bottom: 1.8rem;\r\n        }\r\n\r\n        .quote-description {\r\n          font-size: 1rem;\r\n          margin-bottom: 1.8rem;\r\n        }\r\n\r\n        .quote-label {\r\n          margin-bottom: 1.2rem;\r\n        }\r\n\r\n        .testimonials-section {\r\n          padding: 6rem 1.25rem;\r\n          min-height: auto;\r\n        }\r\n\r\n        .testimonials-header {\r\n          margin-bottom: 3rem;\r\n        }\r\n\r\n        .testimonials-header-left h2 {\r\n          font-size: clamp(2rem, 4vw, 2.8rem);\r\n        }\r\n\r\n        .testimonials-grid {\r\n          grid-template-columns: 1fr;\r\n          gap: 1.5rem;\r\n        }\r\n\r\n        .testimonial-card {\r\n          padding: 2rem;\r\n        }\r\n\r\n        .testimonial-text {\r\n          font-size: 1rem;\r\n          margin-bottom: 1.8rem;\r\n        }\r\n\r\n        .author-avatar {\r\n          width: 3rem;\r\n          height: 3rem;\r\n          font-size: 1.1rem;\r\n        }\r\n\r\n        .author-name {\r\n          font-size: 0.95rem;\r\n        }\r\n\r\n        .author-title {\r\n          font-size: 0.75rem;\r\n        }\r\n\r\n        .footer-logo {\r\n          font-size: 1.6rem;\r\n        }\r\n\r\n        .footer-nav {\r\n          gap: 1.8rem;\r\n          margin-bottom: 3.5rem;\r\n        }\r\n\r\n        .footer-nav-link {\r\n          font-size: 0.85rem;\r\n        }\r\n\r\n        .footer-social {\r\n          gap: 2rem;\r\n          margin-bottom: 3.5rem;\r\n        }\r\n\r\n        .social-icon {\r\n          width: 2.2rem;\r\n          height: 2.2rem;\r\n          font-size: 1rem;\r\n        }\r\n\r\n        .footer-newsletter {\r\n          margin-bottom: 3.5rem;\r\n        }\r\n\r\n        .footer-divider {\r\n          margin-bottom: 2.5rem;\r\n        }\r\n\r\n        .footer-container {\r\n          padding: 3rem 1.25rem;\r\n        }\r\n      }\r\n\r\n      @media (max-width: 480px) {\r\n        .quote-left {\r\n          padding: 3rem 1.5rem;\r\n        }\r\n\r\n        .quote-text {\r\n          font-size: 1.8rem;\r\n          line-height: 1.4;\r\n          margin-bottom: 1.5rem;\r\n        }\r\n\r\n        .quote-description {\r\n          font-size: 0.95rem;\r\n          margin-bottom: 1.5rem;\r\n        }\r\n\r\n        .quote-label {\r\n          font-size: 0.75rem;\r\n          margin-bottom: 1rem;\r\n        }\r\n\r\n        .quote-divider {\r\n          width: 3rem;\r\n          margin-bottom: 1.5rem;\r\n        }\r\n\r\n        .quote-attribution {\r\n          font-size: 0.8rem;\r\n        }\r\n\r\n        .testimonials-section {\r\n          padding: 4rem 1.25rem;\r\n        }\r\n\r\n        .testimonials-header-left h2 {\r\n          font-size: 1.8rem;\r\n        }\r\n\r\n        .testimonials-header-right {\r\n          padding: 1.8rem 1.5rem;\r\n        }\r\n\r\n        .testimonials-header-right .subtitle {\r\n          font-size: 0.95rem;\r\n        }\r\n\r\n        .stat {\r\n          padding-top: 1rem;\r\n        }\r\n\r\n        .stat-number {\r\n          font-size: 1.6rem;\r\n        }\r\n\r\n        .stat-label {\r\n          font-size: 0.7rem;\r\n        }\r\n\r\n        .testimonial-card {\r\n          padding: 1.5rem;\r\n        }\r\n\r\n        .testimonial-rating {\r\n          margin-bottom: 1.2rem;\r\n        }\r\n\r\n        .star {\r\n          font-size: 1rem;\r\n        }\r\n\r\n        .testimonial-text {\r\n          font-size: 0.95rem;\r\n          line-height: 1.9;\r\n          margin-bottom: 1.5rem;\r\n        }\r\n\r\n        .testimonial-divider {\r\n          margin-bottom: 1.5rem;\r\n        }\r\n\r\n        .author-avatar {\r\n          width: 2.8rem;\r\n          height: 2.8rem;\r\n          font-size: 1rem;\r\n        }\r\n\r\n        .author-name {\r\n          font-size: 0.9rem;\r\n        }\r\n\r\n        .author-title {\r\n          font-size: 0.7rem;\r\n        }\r\n\r\n        .footer-logo {\r\n          font-size: 1.4rem;\r\n          margin-bottom: 3rem;\r\n        }\r\n\r\n        .footer-nav {\r\n          gap: 1.2rem;\r\n          margin-bottom: 2.5rem;\r\n          justify-content: center;\r\n        }\r\n\r\n        .footer-nav-link {\r\n          font-size: 0.75rem;\r\n        }\r\n\r\n        .footer-social {\r\n          gap: 1.5rem;\r\n          margin-bottom: 2.5rem;\r\n        }\r\n\r\n        .social-icon {\r\n          width: 2rem;\r\n          height: 2rem;\r\n          font-size: 0.9rem;\r\n        }\r\n\r\n        .footer-newsletter {\r\n          margin-bottom: 2.5rem;\r\n        }\r\n\r\n        .newsletter-link {\r\n          font-size: 0.8rem;\r\n        }\r\n\r\n        .footer-divider {\r\n          margin-bottom: 2rem;\r\n        }\r\n\r\n        .footer-copyright {\r\n          font-size: 0.75rem;\r\n        }\r\n\r\n        .footer-tagline {\r\n          font-size: 0.75rem;\r\n        }\r\n\r\n        .footer-container {\r\n          padding: 2.5rem 1.25rem;\r\n        }\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <main class=\"page-shell\">\r\n      <!-- INSPIRATIONAL QUOTE SECTION - SPLIT LAYOUT -->\r\n      <section class=\"section quote-section\">\r\n        <div class=\"quote-left\">\r\n          <p class=\"quote-label\">Inspiration<\/p>\r\n          <h1 class=\"quote-text\">\r\n            Beauty begins<br>\r\n            where imagination<br>\r\n            meets purpose.\r\n          <\/h1>\r\n          <div class=\"quote-divider\"><\/div>\r\n          <p class=\"quote-description\">\r\n            This philosophy guides every creation, every brushstroke, and every moment of artistic vision. \r\n            It's the essence of what drives the work forward.\r\n          <\/p>\r\n          <p class=\"quote-attribution\">\u2014 Lily Ivor<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"quote-right\">\r\n          <div class=\"quote-image-container\">\r\n            <img decoding=\"async\"\r\n              src=\"https:\/\/demowebdesign.live\/sylvia\/wp-content\/uploads\/2026\/07\/2149372238.jpg\"\r\n              alt=\"Inspirational artwork\"\r\n            \/>\r\n          <\/div>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- TESTIMONIALS SECTION - PREMIUM LAYOUT -->\r\n      <section class=\"section testimonials-section\">\r\n        <div class=\"testimonials-container\">\r\n          <!-- Header -->\r\n          <div class=\"testimonials-header\">\r\n            <div class=\"testimonials-header-left\">\r\n              <p class=\"eyebrow\">Client Testimonials<\/p>\r\n              <h2>Voices of Appreciation<\/h2>\r\n              <div class=\"gold-line\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"testimonials-header-right\">\r\n              <p class=\"subtitle\">\r\n                Discover what collectors, curators, and creative professionals say about Lily Ivor's \r\n                transformative work and artistic vision.\r\n              <\/p>\r\n              <div class=\"stats\">\r\n                <div class=\"stat\">\r\n                  <span class=\"stat-number\">500+<\/span>\r\n                  <span class=\"stat-label\">Happy Clients<\/span>\r\n                <\/div>\r\n                <div class=\"stat\">\r\n                  <span class=\"stat-number\">98%<\/span>\r\n                  <span class=\"stat-label\">Satisfaction Rate<\/span>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- Testimonials Grid -->\r\n          <div class=\"testimonials-grid\">\r\n            <!-- Testimonial 1 -->\r\n            <div class=\"testimonial-card\">\r\n              <div class=\"testimonial-rating\">\r\n                <span class=\"star\">\u2605<\/span>\r\n                <span class=\"star\">\u2605<\/span>\r\n                <span class=\"star\">\u2605<\/span>\r\n                <span class=\"star\">\u2605<\/span>\r\n                <span class=\"star\">\u2605<\/span>\r\n              <\/div>\r\n              <p class=\"testimonial-text\">\r\n                \"Lily's work transcends the ordinary. Each piece carries a profound emotional depth that \r\n                resonates long after you've seen it. A true artist of our time.\"\r\n              <\/p>\r\n              <div class=\"testimonial-divider\"><\/div>\r\n              <div class=\"testimonial-author\">\r\n                <div class=\"author-avatar\">SA<\/div>\r\n                <div class=\"author-info\">\r\n                  <p class=\"author-name\">Sarah Anderson<\/p>\r\n                  <p class=\"author-title\">Art Collector<\/p>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <!-- Testimonial 2 -->\r\n            <div class=\"testimonial-card\">\r\n              <div class=\"testimonial-rating\">\r\n                <span class=\"star\">\u2605<\/span>\r\n                <span class=\"star\">\u2605<\/span>\r\n                <span class=\"star\">\u2605<\/span>\r\n                <span class=\"star\">\u2605<\/span>\r\n                <span class=\"star\">\u2605<\/span>\r\n              <\/div>\r\n              <p class=\"testimonial-text\">\r\n                \"The editorial restraint combined with emotional depth is extraordinary. Lily has mastered \r\n                the art of saying more with less. Absolutely captivating.\"\r\n              <\/p>\r\n              <div class=\"testimonial-divider\"><\/div>\r\n              <div class=\"testimonial-author\">\r\n                <div class=\"author-avatar\">JM<\/div>\r\n                <div class=\"author-info\">\r\n                  <p class=\"author-name\">James Mitchell<\/p>\r\n                  <p class=\"author-title\">Gallery Director<\/p>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <!-- Testimonial 3 -->\r\n            <div class=\"testimonial-card\">\r\n              <div class=\"testimonial-rating\">\r\n                <span class=\"star\">\u2605<\/span>\r\n                <span class=\"star\">\u2605<\/span>\r\n                <span class=\"star\">\u2605<\/span>\r\n                <span class=\"star\">\u2605<\/span>\r\n                <span class=\"star\">\u2605<\/span>\r\n              <\/div>\r\n              <p class=\"testimonial-text\">\r\n                \"Working with Lily on a commission was transformative. Her ability to understand vision \r\n                and translate it into art is unparalleled. Highly recommended.\"\r\n              <\/p>\r\n              <div class=\"testimonial-divider\"><\/div>\r\n              <div class=\"testimonial-author\">\r\n                <div class=\"author-avatar\">EC<\/div>\r\n                <div class=\"author-info\">\r\n                  <p class=\"author-name\">Emma Chen<\/p>\r\n                  <p class=\"author-title\">Creative Director<\/p>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <!-- Testimonial 4 -->\r\n            <div class=\"testimonial-card\">\r\n              <div class=\"testimonial-rating\">\r\n                <span class=\"star\">\u2605<\/span>\r\n                <span class=\"star\">\u2605<\/span>\r\n                <span class=\"star\">\u2605<\/span>\r\n                <span class=\"star\">\u2605<\/span>\r\n                <span class=\"star\">\u2605<\/span>\r\n              <\/div>\r\n              <p class=\"testimonial-text\">\r\n                \"Every piece tells a story. Lily's work has a timeless quality that elevates any space. \r\n                I've acquired three pieces and each one brings me joy daily.\"\r\n              <\/p>\r\n              <div class=\"testimonial-divider\"><\/div>\r\n              <div class=\"testimonial-author\">\r\n                <div class=\"author-avatar\">MR<\/div>\r\n                <div class=\"author-info\">\r\n                  <p class=\"author-name\">Marcus Richardson<\/p>\r\n                  <p class=\"author-title\">Private Collector<\/p>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/section>\r\n    <\/main>\r\n\r\n    <!-- LUXURY MINIMAL FOOTER -->\r\n    <footer class=\"footer\">\r\n      <div class=\"footer-container\">\r\n        <!-- Logo -->\r\n        <div class=\"footer-logo-section\">\r\n    <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/sylvia\/wp-content\/uploads\/2026\/07\/Lily-Ivor.png\" alt=\"Lily Ivor\" class=\"footer-logo-img\">\r\n<\/div>\r\n\r\n        <!-- Navigation -->\r\n        <nav class=\"footer-nav\">\r\n          <a href=\"#home\" class=\"footer-nav-link\">Home<\/a>\r\n          <a href=\"#about\" class=\"footer-nav-link\">About<\/a>\r\n          <a href=\"#books\" class=\"footer-nav-link\">Books<\/a>\r\n          <a href=\"#gallery\" class=\"footer-nav-link\">Gallery<\/a>\r\n          <a href=\"#journal\" class=\"footer-nav-link\">BLOGS<\/a>\r\n          <a href=\"#journal\" class=\"footer-nav-link\">EVENTS<\/a>\r\n          <a href=\"#contact\" class=\"footer-nav-link\">Contact<\/a>\r\n        <\/nav>\r\n\r\n        <!-- Social Icons -->\r\n        <div class=\"footer-social\">\r\n          <a href=\"https:\/\/instagram.com\" class=\"social-icon\" title=\"Instagram\">\r\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\r\n              <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\"><\/rect>\r\n              <path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\"><\/path>\r\n              <circle cx=\"17.5\" cy=\"6.5\" r=\"1.5\"><\/circle>\r\n            <\/svg>\r\n          <\/a>\r\n          <a href=\"https:\/\/pinterest.com\" class=\"social-icon\" title=\"Pinterest\">\r\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\r\n              <path d=\"M8 12s0-4 4-4 4 3 4 5c0 2-1 3-2 3s-1-1-1-2\"><\/path>\r\n            <\/svg>\r\n          <\/a>\r\n          <a href=\"https:\/\/facebook.com\" class=\"social-icon\" title=\"Facebook\">\r\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\r\n              <path d=\"M18 2h-3a6 6 0 0 0-6 6v3H7v4h2v8h4v-8h3l1-4h-4V8a2 2 0 0 1 2-2h1z\"><\/path>\r\n            <\/svg>\r\n          <\/a>\r\n        <\/div>\r\n\r\n        <!-- Newsletter Link -->\r\n        <div class=\"footer-newsletter\">\r\n          <a href=\"#newsletter\" class=\"newsletter-link\">Subscribe to Newsletter<\/a>\r\n        <\/div>\r\n\r\n        <!-- Divider -->\r\n        <div class=\"footer-divider\"><\/div>\r\n\r\n        <!-- Bottom Section -->\r\n        <div class=\"footer-bottom\">\r\n          <span class=\"footer-copyright\">\u00a9 2026 Lily Ivor. All rights reserved.<\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/footer>\r\n  <\/body>\r\n<\/html>\r\n\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>Instagram \/ Facebook About Gallery The Book blogs events Contact Original Works &amp; Literature &ldquo; Lily Ivor Artist &bull; Author [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","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":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","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-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/sylvia\/index.php\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demowebdesign.live\/sylvia\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demowebdesign.live\/sylvia\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/sylvia\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/sylvia\/index.php\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":148,"href":"https:\/\/demowebdesign.live\/sylvia\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":191,"href":"https:\/\/demowebdesign.live\/sylvia\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions\/191"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/sylvia\/index.php\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}