{"id":149,"date":"2026-09-13T10:28:36","date_gmt":"2026-09-13T10:28:36","guid":{"rendered":"https:\/\/urbanfitouts.ae\/?page_id=149"},"modified":"2026-09-19T19:22:23","modified_gmt":"2026-09-19T19:22:23","slug":"premium-residential","status":"publish","type":"page","link":"https:\/\/urbanfitouts.ae\/premium-residential\/","title":{"rendered":"Premium Residential"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"149\" class=\"elementor elementor-149\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bdba76f e-con-full e-flex e-con e-parent\" data-id=\"bdba76f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5f8cecc elementor-widget elementor-widget-html\" data-id=\"5f8cecc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t```html\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\r\n\r\n<title>Premium Residential | Urban Fitouts UAE<\/title>\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600&display=swap');\r\n\r\n*{\r\n    margin:0;\r\n    padding:0;\r\n    box-sizing:border-box;\r\n}\r\n\r\nhtml{\r\n    scroll-behavior:smooth;\r\n}\r\n\r\nbody{\r\n    background:#f4f1eb;\r\n    color:#191816;\r\n    font-family:'DM Sans',sans-serif;\r\n    overflow-x:hidden;\r\n}\r\n\r\n:root{\r\n    --dark:#151513;\r\n    --cream:#f4f1eb;\r\n    --soft:#e8e2d7;\r\n    --gold:#b49668;\r\n    --muted:#77736b;\r\n    --line:#d4cec2;\r\n    --white:#fff;\r\n}\r\n\r\nimg{\r\n    width:100%;\r\n    display:block;\r\n}\r\n\r\n.container{\r\n    width:min(1240px,92%);\r\n    margin:auto;\r\n}\r\n\r\n.reveal{\r\n    opacity:0;\r\n    transform:translateY(55px);\r\n    transition:1s cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n.reveal.active{\r\n    opacity:1;\r\n    transform:translateY(0);\r\n}\r\n\r\n.eyebrow{\r\n    display:flex;\r\n    align-items:center;\r\n    gap:12px;\r\n    color:var(--gold);\r\n    font-size:10px;\r\n    letter-spacing:3px;\r\n    text-transform:uppercase;\r\n    font-weight:700;\r\n}\r\n\r\n.eyebrow i{\r\n    display:block;\r\n    width:35px;\r\n    height:1px;\r\n    background:var(--gold);\r\n}\r\n\r\n.title{\r\n    font-family:'Playfair Display',serif;\r\n    font-size:clamp(48px,7vw,90px);\r\n    line-height:.95;\r\n    font-weight:500;\r\n    letter-spacing:-3px;\r\n}\r\n\r\n.title span{\r\n    color:#aaa49a;\r\n}\r\n\r\n.text{\r\n    color:var(--muted);\r\n    line-height:1.85;\r\n    font-size:15px;\r\n}\r\n\r\n\/* =====================================================\r\n   HERO\r\n===================================================== *\/\r\n\r\n.hero{\r\n    min-height:100vh;\r\n    position:relative;\r\n    overflow:hidden;\r\n    display:flex;\r\n    align-items:center;\r\n    color:#fff;\r\n    background:#171715;\r\n}\r\n\r\n.hero-image{\r\n    position:absolute;\r\n    inset:0;\r\n    background:\r\n        linear-gradient(90deg,\r\n        rgba(9,9,8,.88),\r\n        rgba(9,9,8,.45),\r\n        rgba(9,9,8,.18)),\r\n        url(\"https:\/\/images.unsplash.com\/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=2400&q=90\")\r\n        center\/cover;\r\n    transform:scale(1.06);\r\n    animation:heroScale 12s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes heroScale{\r\n    from{transform:scale(1.04)}\r\n    to{transform:scale(1.13)}\r\n}\r\n\r\n.hero-content{\r\n    position:relative;\r\n    z-index:2;\r\n    width:min(1240px,92%);\r\n    margin:auto;\r\n    padding-top:80px;\r\n}\r\n\r\n.hero-small{\r\n    color:#d0b88d;\r\n    letter-spacing:4px;\r\n    text-transform:uppercase;\r\n    font-size:11px;\r\n    margin-bottom:28px;\r\n}\r\n\r\n.hero h1{\r\n    font-family:'Playfair Display',serif;\r\n    font-weight:500;\r\n    font-size:clamp(68px,11vw,155px);\r\n    line-height:.8;\r\n    letter-spacing:-6px;\r\n    max-width:1050px;\r\n}\r\n\r\n.hero h1 em{\r\n    font-style:normal;\r\n    color:#d4cabc;\r\n}\r\n\r\n.hero-copy{\r\n    max-width:470px;\r\n    margin-top:45px;\r\n    color:#d0cec8;\r\n    line-height:1.8;\r\n    font-size:15px;\r\n}\r\n\r\n.hero-bottom{\r\n    position:absolute;\r\n    z-index:3;\r\n    left:4%;\r\n    right:4%;\r\n    bottom:30px;\r\n    display:flex;\r\n    justify-content:space-between;\r\n    color:#bbb8b0;\r\n    text-transform:uppercase;\r\n    letter-spacing:2px;\r\n    font-size:10px;\r\n}\r\n\r\n.scroll{\r\n    display:flex;\r\n    gap:15px;\r\n    align-items:center;\r\n}\r\n\r\n.scroll b{\r\n    width:55px;\r\n    height:1px;\r\n    background:#aaa;\r\n    animation:scrollLine 2s infinite;\r\n}\r\n\r\n@keyframes scrollLine{\r\n    0%,100%{width:25px}\r\n    50%{width:70px}\r\n}\r\n\r\n\/* =====================================================\r\n   INTRO\r\n===================================================== *\/\r\n\r\n.intro{\r\n    padding:160px 0;\r\n}\r\n\r\n.intro-grid{\r\n    display:grid;\r\n    grid-template-columns:.65fr 1.35fr;\r\n    gap:100px;\r\n    align-items:end;\r\n}\r\n\r\n.intro-number{\r\n    font-family:'Playfair Display',serif;\r\n    font-size:150px;\r\n    line-height:.7;\r\n    color:#d7d1c6;\r\n}\r\n\r\n.intro-content{\r\n    max-width:720px;\r\n}\r\n\r\n.intro-content .title{\r\n    margin-top:25px;\r\n}\r\n\r\n.intro-content .text{\r\n    max-width:620px;\r\n    margin-top:40px;\r\n}\r\n\r\n\/* =====================================================\r\n   3D ROOM\r\n===================================================== *\/\r\n\r\n.room-section{\r\n    background:#171716;\r\n    color:#fff;\r\n    padding:145px 0;\r\n    overflow:hidden;\r\n}\r\n\r\n.room-head{\r\n    display:grid;\r\n    grid-template-columns:1fr 1fr;\r\n    gap:80px;\r\n}\r\n\r\n.room-head .text{\r\n    color:#aaa8a0;\r\n    max-width:480px;\r\n}\r\n\r\n.room{\r\n    height:650px;\r\n    margin-top:60px;\r\n    position:relative;\r\n    perspective:1400px;\r\n    display:flex;\r\n    justify-content:center;\r\n    align-items:center;\r\n}\r\n\r\n.room-box{\r\n    width:min(800px,90vw);\r\n    height:430px;\r\n    position:relative;\r\n    transform-style:preserve-3d;\r\n    transform:\r\n        rotateX(56deg)\r\n        rotateZ(-7deg)\r\n        rotateY(-18deg);\r\n    transition:transform .2s ease-out;\r\n}\r\n\r\n\/* floor *\/\r\n\r\n.room-floor{\r\n    position:absolute;\r\n    inset:0;\r\n    border:1px solid rgba(255,255,255,.12);\r\n    background:\r\n        linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),\r\n        linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px);\r\n    background-size:65px 65px;\r\n}\r\n\r\n\/* back wall *\/\r\n\r\n.room-wall{\r\n    position:absolute;\r\n    background:#282722;\r\n    border:1px solid rgba(255,255,255,.1);\r\n}\r\n\r\n.room-back{\r\n    width:100%;\r\n    height:230px;\r\n    top:-230px;\r\n    transform-origin:bottom;\r\n    transform:rotateX(-90deg);\r\n}\r\n\r\n\/* left wall *\/\r\n\r\n.room-left{\r\n    width:230px;\r\n    height:100%;\r\n    left:-230px;\r\n    transform-origin:right;\r\n    transform:rotateY(90deg);\r\n}\r\n\r\n\/* window *\/\r\n\r\n.room-window{\r\n    position:absolute;\r\n    width:320px;\r\n    height:175px;\r\n    left:235px;\r\n    top:-200px;\r\n    border:8px solid #38362f;\r\n    background:\r\n        linear-gradient(125deg,\r\n        #c2b08e,\r\n        #596860 45%,\r\n        #1d2827);\r\n    transform:rotateX(-90deg);\r\n    box-shadow:0 0 80px rgba(193,160,103,.12);\r\n}\r\n\r\n\/* bed *\/\r\n\r\n.bed{\r\n    position:absolute;\r\n    width:310px;\r\n    height:160px;\r\n    left:90px;\r\n    top:180px;\r\n    background:#b5a995;\r\n    transform:translateZ(40px);\r\n    box-shadow:0 25px 30px rgba(0,0,0,.4);\r\n}\r\n\r\n.bed-head{\r\n    position:absolute;\r\n    width:310px;\r\n    height:95px;\r\n    background:#544d42;\r\n    top:-70px;\r\n}\r\n\r\n.pillow{\r\n    position:absolute;\r\n    width:90px;\r\n    height:45px;\r\n    background:#ddd6c9;\r\n    top:15px;\r\n    left:30px;\r\n}\r\n\r\n.pillow.two{\r\n    left:140px;\r\n}\r\n\r\n\/* side table *\/\r\n\r\n.side-table{\r\n    position:absolute;\r\n    width:70px;\r\n    height:65px;\r\n    background:#725f49;\r\n    right:130px;\r\n    top:220px;\r\n    transform:translateZ(60px);\r\n}\r\n\r\n\/* lamp *\/\r\n\r\n.lamp{\r\n    position:absolute;\r\n    width:30px;\r\n    height:60px;\r\n    right:150px;\r\n    top:155px;\r\n    background:#d5bd8d;\r\n    transform:translateZ(100px);\r\n}\r\n\r\n.lamp:before{\r\n    content:\"\";\r\n    position:absolute;\r\n    width:65px;\r\n    height:30px;\r\n    background:#b79d70;\r\n    border-radius:50%;\r\n    left:-18px;\r\n    top:-15px;\r\n}\r\n\r\n.lamp-light{\r\n    position:absolute;\r\n    width:220px;\r\n    height:220px;\r\n    right:55px;\r\n    top:80px;\r\n    border-radius:50%;\r\n    background:radial-gradient(circle,\r\n        rgba(211,179,119,.17),\r\n        transparent 70%);\r\n    transform:translateZ(80px);\r\n}\r\n\r\n\/* plant *\/\r\n\r\n.room-plant{\r\n    position:absolute;\r\n    width:70px;\r\n    height:85px;\r\n    right:30px;\r\n    top:100px;\r\n    background:#53634f;\r\n    border-radius:60% 40% 50% 40%;\r\n    transform:translateZ(70px);\r\n}\r\n\r\n\/* =====================================================\r\n   LIVING EXPERIENCE\r\n===================================================== *\/\r\n\r\n.living{\r\n    padding:150px 0;\r\n}\r\n\r\n.living-grid{\r\n    display:grid;\r\n    grid-template-columns:1fr 1fr;\r\n    gap:80px;\r\n    align-items:center;\r\n}\r\n\r\n.living-image{\r\n    height:650px;\r\n    overflow:hidden;\r\n    position:relative;\r\n}\r\n\r\n.living-image img{\r\n    height:100%;\r\n    object-fit:cover;\r\n    transition:1s;\r\n}\r\n\r\n.living-image:hover img{\r\n    transform:scale(1.07);\r\n}\r\n\r\n.living-content{\r\n    max-width:550px;\r\n}\r\n\r\n.living-content .title{\r\n    margin:25px 0 35px;\r\n}\r\n\r\n.feature-list{\r\n    margin-top:45px;\r\n}\r\n\r\n.feature{\r\n    padding:18px 0;\r\n    border-bottom:1px solid var(--line);\r\n    display:flex;\r\n    align-items:center;\r\n    gap:18px;\r\n    font-size:14px;\r\n}\r\n\r\n.feature-dot{\r\n    width:8px;\r\n    height:8px;\r\n    background:var(--gold);\r\n    border-radius:50%;\r\n}\r\n\r\n\/* =====================================================\r\n   360\u00b0 INTERACTION\r\n===================================================== *\/\r\n\r\n.interactive{\r\n    background:#e7e1d6;\r\n    padding:150px 0;\r\n}\r\n\r\n.interactive-head{\r\n    display:flex;\r\n    justify-content:space-between;\r\n    align-items:end;\r\n    gap:50px;\r\n}\r\n\r\n.drag-note{\r\n    color:#888176;\r\n    font-size:11px;\r\n    letter-spacing:2px;\r\n    text-transform:uppercase;\r\n}\r\n\r\n.panorama{\r\n    margin-top:75px;\r\n    height:570px;\r\n    overflow:hidden;\r\n    position:relative;\r\n    cursor:grab;\r\n    background:#25231f;\r\n}\r\n\r\n.panorama:active{\r\n    cursor:grabbing;\r\n}\r\n\r\n.panorama-track{\r\n    height:100%;\r\n    width:220%;\r\n    display:flex;\r\n    transition:transform .05s linear;\r\n}\r\n\r\n.panorama-panel{\r\n    width:25%;\r\n    height:100%;\r\n    flex-shrink:0;\r\n    background-position:center;\r\n    background-size:cover;\r\n}\r\n\r\n.panel1{\r\n    background-image:url(\"https:\/\/images.unsplash.com\/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1600&q=90\");\r\n}\r\n\r\n.panel2{\r\n    background-image:url(\"https:\/\/images.unsplash.com\/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=1600&q=90\");\r\n}\r\n\r\n.panel3{\r\n    background-image:url(\"https:\/\/images.unsplash.com\/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=1600&q=90\");\r\n}\r\n\r\n.panel4{\r\n    background-image:url(\"https:\/\/images.unsplash.com\/photo-1600607688969-a5bfcd646154?auto=format&fit=crop&w=1600&q=90\");\r\n}\r\n\r\n.panorama-label{\r\n    position:absolute;\r\n    left:30px;\r\n    bottom:30px;\r\n    padding:12px 18px;\r\n    background:rgba(0,0,0,.55);\r\n    color:#fff;\r\n    font-size:10px;\r\n    letter-spacing:2px;\r\n    text-transform:uppercase;\r\n}\r\n\r\n\/* =====================================================\r\n   ROOM TYPES\r\n===================================================== *\/\r\n\r\n.rooms{\r\n    padding:150px 0;\r\n}\r\n\r\n.room-cards{\r\n    margin-top:80px;\r\n    display:grid;\r\n    grid-template-columns:repeat(3,1fr);\r\n    gap:20px;\r\n}\r\n\r\n.room-card{\r\n    height:520px;\r\n    overflow:hidden;\r\n    position:relative;\r\n    background:#222;\r\n}\r\n\r\n.room-card img{\r\n    height:100%;\r\n    object-fit:cover;\r\n    transition:1s;\r\n}\r\n\r\n.room-card:hover img{\r\n    transform:scale(1.08);\r\n}\r\n\r\n.room-card:after{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    background:linear-gradient(\r\n        transparent 40%,\r\n        rgba(0,0,0,.82)\r\n    );\r\n}\r\n\r\n.room-card-content{\r\n    position:absolute;\r\n    z-index:2;\r\n    bottom:30px;\r\n    left:30px;\r\n    right:30px;\r\n    color:#fff;\r\n}\r\n\r\n.room-card-content small{\r\n    color:#d0b486;\r\n    letter-spacing:2px;\r\n    text-transform:uppercase;\r\n    font-size:9px;\r\n}\r\n\r\n.room-card-content h3{\r\n    font-family:'Playfair Display',serif;\r\n    font-size:35px;\r\n    font-weight:500;\r\n    margin-top:8px;\r\n}\r\n\r\n\/* =====================================================\r\n   HUMAN DETAIL\r\n===================================================== *\/\r\n\r\n.human{\r\n    background:#181816;\r\n    color:#fff;\r\n    padding:150px 0;\r\n}\r\n\r\n.human-grid{\r\n    display:grid;\r\n    grid-template-columns:.9fr 1.1fr;\r\n    gap:90px;\r\n    align-items:center;\r\n}\r\n\r\n.human-quote{\r\n    font-family:'Playfair Display',serif;\r\n    font-size:clamp(45px,6vw,76px);\r\n    line-height:1;\r\n}\r\n\r\n.human-quote span{\r\n    color:#aaa39a;\r\n}\r\n\r\n.human-copy .text{\r\n    color:#aaa8a1;\r\n    margin-top:35px;\r\n    max-width:500px;\r\n}\r\n\r\n.human-points{\r\n    margin-top:45px;\r\n    display:grid;\r\n    gap:20px;\r\n}\r\n\r\n.human-point{\r\n    display:flex;\r\n    gap:20px;\r\n    align-items:flex-start;\r\n}\r\n\r\n.human-point b{\r\n    font-family:'Playfair Display',serif;\r\n    font-size:25px;\r\n    color:#b99b6d;\r\n}\r\n\r\n.human-point p{\r\n    color:#aaa8a0;\r\n    font-size:13px;\r\n    line-height:1.7;\r\n}\r\n\r\n\/* =====================================================\r\n   BEFORE \/ AFTER\r\n===================================================== *\/\r\n\r\n.before-after{\r\n    padding:150px 0;\r\n}\r\n\r\n.compare{\r\n    height:600px;\r\n    margin-top:75px;\r\n    position:relative;\r\n    overflow:hidden;\r\n    cursor:ew-resize;\r\n}\r\n\r\n.compare-layer{\r\n    position:absolute;\r\n    inset:0;\r\n}\r\n\r\n.compare-layer img{\r\n    width:100%;\r\n    height:100%;\r\n    object-fit:cover;\r\n}\r\n\r\n.compare-after{\r\n    width:50%;\r\n    overflow:hidden;\r\n    border-right:2px solid #fff;\r\n}\r\n\r\n.compare-label{\r\n    position:absolute;\r\n    top:25px;\r\n    padding:10px 16px;\r\n    color:#fff;\r\n    background:rgba(0,0,0,.55);\r\n    text-transform:uppercase;\r\n    letter-spacing:2px;\r\n    font-size:9px;\r\n}\r\n\r\n.before-label{\r\n    left:25px;\r\n}\r\n\r\n.after-label{\r\n    right:25px;\r\n}\r\n\r\n\/* =====================================================\r\n   MATERIALS\r\n===================================================== *\/\r\n\r\n.materials{\r\n    background:#e7e2d9;\r\n    padding:150px 0;\r\n}\r\n\r\n.material-layout{\r\n    margin-top:80px;\r\n    display:grid;\r\n    grid-template-columns:1.1fr .9fr;\r\n    gap:80px;\r\n    align-items:center;\r\n}\r\n\r\n.material-show{\r\n    height:520px;\r\n    position:relative;\r\n    overflow:hidden;\r\n    background:#998570;\r\n    transition:.5s;\r\n}\r\n\r\n.material-show:before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:-50%;\r\n    background:\r\n        repeating-linear-gradient(\r\n            105deg,\r\n            rgba(255,255,255,.12) 0 2px,\r\n            transparent 2px 22px\r\n        );\r\n    transform:rotate(8deg);\r\n}\r\n\r\n.material-info h3{\r\n    font-family:'Playfair Display',serif;\r\n    font-size:55px;\r\n    font-weight:500;\r\n    margin:20px 0;\r\n}\r\n\r\n.material-buttons{\r\n    display:flex;\r\n    flex-wrap:wrap;\r\n    gap:10px;\r\n    margin-top:40px;\r\n}\r\n\r\n.material-button{\r\n    padding:13px 18px;\r\n    border:1px solid #bbb4a8;\r\n    background:transparent;\r\n    cursor:pointer;\r\n    font-size:11px;\r\n    transition:.3s;\r\n}\r\n\r\n.material-button.active,\r\n.material-button:hover{\r\n    background:#171716;\r\n    border-color:#171716;\r\n    color:#fff;\r\n}\r\n\r\n\/* =====================================================\r\n   PROCESS\r\n===================================================== *\/\r\n\r\n.process{\r\n    padding:150px 0;\r\n}\r\n\r\n.process-grid{\r\n    margin-top:85px;\r\n    display:grid;\r\n    grid-template-columns:repeat(4,1fr);\r\n    gap:25px;\r\n}\r\n\r\n.process-item{\r\n    border-top:1px solid var(--line);\r\n    padding-top:25px;\r\n}\r\n\r\n.process-number{\r\n    color:#b89b6c;\r\n    font-family:'Playfair Display',serif;\r\n    font-size:48px;\r\n}\r\n\r\n.process-item h3{\r\n    font-size:20px;\r\n    margin:25px 0 15px;\r\n}\r\n\r\n.process-item p{\r\n    color:var(--muted);\r\n    font-size:13px;\r\n    line-height:1.75;\r\n}\r\n\r\n\/* =====================================================\r\n   CTA\r\n===================================================== *\/\r\n\r\n.cta{\r\n    min-height:650px;\r\n    display:flex;\r\n    align-items:center;\r\n    text-align:center;\r\n    color:#fff;\r\n    background:\r\n        linear-gradient(rgba(15,15,14,.77),rgba(15,15,14,.86)),\r\n        url(\"https:\/\/images.unsplash.com\/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=2200&q=90\")\r\n        center\/cover fixed;\r\n}\r\n\r\n.cta-inner{\r\n    width:min(900px,92%);\r\n    margin:auto;\r\n}\r\n\r\n.cta-inner .eyebrow{\r\n    justify-content:center;\r\n}\r\n\r\n.cta h2{\r\n    font-family:'Playfair Display',serif;\r\n    font-weight:500;\r\n    font-size:clamp(50px,8vw,105px);\r\n    line-height:.9;\r\n    margin-top:28px;\r\n}\r\n\r\n.cta p{\r\n    max-width:580px;\r\n    margin:35px auto;\r\n    color:#c3c1ba;\r\n    line-height:1.8;\r\n}\r\n\r\n.cta-btn{\r\n    display:inline-flex;\r\n    padding:17px 30px;\r\n    border:1px solid #c5ad80;\r\n    color:#fff;\r\n    text-decoration:none;\r\n    font-size:10px;\r\n    letter-spacing:2px;\r\n    text-transform:uppercase;\r\n    transition:.4s;\r\n}\r\n\r\n.cta-btn:hover{\r\n    background:#c5ad80;\r\n    color:#151513;\r\n}\r\n\r\n\/* =====================================================\r\n   TABLET\r\n===================================================== *\/\r\n\r\n@media(max-width:1000px){\r\n\r\n    .intro-grid,\r\n    .room-head,\r\n    .living-grid,\r\n    .interactive-head,\r\n    .human-grid,\r\n    .material-layout{\r\n        grid-template-columns:1fr;\r\n    }\r\n\r\n    .room-head{\r\n        display:grid;\r\n    }\r\n\r\n    .room{\r\n        transform:scale(.85);\r\n        transform-origin:center;\r\n    }\r\n\r\n    .room-cards{\r\n        grid-template-columns:1fr 1fr;\r\n    }\r\n\r\n    .room-card{\r\n        height:480px;\r\n    }\r\n\r\n    .process-grid{\r\n        grid-template-columns:1fr 1fr;\r\n        row-gap:50px;\r\n    }\r\n\r\n    .human-grid{\r\n        gap:60px;\r\n    }\r\n}\r\n\r\n\/* =====================================================\r\n   MOBILE\r\n===================================================== *\/\r\n\r\n@media(max-width:650px){\r\n\r\n    .container{\r\n        width:90%;\r\n    }\r\n\r\n    .hero{\r\n        min-height:850px;\r\n    }\r\n\r\n    .hero h1{\r\n        font-size:67px;\r\n        letter-spacing:-4px;\r\n    }\r\n\r\n    .hero-copy{\r\n        font-size:14px;\r\n    }\r\n\r\n    .hero-bottom{\r\n        bottom:20px;\r\n    }\r\n\r\n    .intro,\r\n    .living,\r\n    .interactive,\r\n    .rooms,\r\n    .human,\r\n    .before-after,\r\n    .materials,\r\n    .process,\r\n    .room-section{\r\n        padding:95px 0;\r\n    }\r\n\r\n    .title{\r\n        font-size:49px;\r\n        letter-spacing:-1.5px;\r\n    }\r\n\r\n    .intro-grid{\r\n        gap:55px;\r\n    }\r\n\r\n    .intro-number{\r\n        font-size:90px;\r\n    }\r\n\r\n    .room{\r\n        height:470px;\r\n        transform:scale(.62);\r\n        margin-left:-20%;\r\n        margin-right:-20%;\r\n    }\r\n\r\n    .living-image{\r\n        height:470px;\r\n    }\r\n\r\n    .interactive-head{\r\n        align-items:flex-start;\r\n    }\r\n\r\n    .panorama{\r\n        height:420px;\r\n        margin-top:50px;\r\n    }\r\n\r\n    .room-cards{\r\n        grid-template-columns:1fr;\r\n        margin-top:55px;\r\n    }\r\n\r\n    .room-card,\r\n    .room-card:nth-child(2),\r\n    .room-card:nth-child(3){\r\n        height:460px;\r\n    }\r\n\r\n    .human-quote{\r\n        font-size:49px;\r\n    }\r\n\r\n    .compare{\r\n        height:430px;\r\n        margin-top:55px;\r\n    }\r\n\r\n    .material-layout{\r\n        margin-top:55px;\r\n    }\r\n\r\n    .material-show{\r\n        height:390px;\r\n    }\r\n\r\n    .material-info h3{\r\n        font-size:45px;\r\n    }\r\n\r\n    .process-grid{\r\n        grid-template-columns:1fr;\r\n    }\r\n\r\n    .cta{\r\n        min-height:560px;\r\n        background-attachment:scroll;\r\n    }\r\n\r\n    .cta h2{\r\n        font-size:57px;\r\n    }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n\r\n<!-- =====================================================\r\n     HERO\r\n===================================================== -->\r\n\r\n<section class=\"hero\">\r\n\r\n    <div class=\"hero-image\"><\/div>\r\n\r\n    <div class=\"hero-content\">\r\n\r\n        <div class=\"hero-small\">\r\n            Urban Fitouts UAE \/ Premium Residential\r\n        <\/div>\r\n\r\n        <h1>\r\n            A Home<br>\r\n            <em>Beyond Luxury.<\/em>\r\n        <\/h1>\r\n\r\n        <p class=\"hero-copy\">\r\n            Bespoke residential interiors created around the way you live,\r\n            relax, entertain and experience your home.\r\n        <\/p>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"hero-bottom\">\r\n\r\n        <div>\r\n            Premium Residential \u00b7 UAE\r\n        <\/div>\r\n\r\n        <div class=\"scroll\">\r\n            Discover\r\n            <b><\/b>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =====================================================\r\n     INTRO\r\n===================================================== -->\r\n\r\n<section class=\"intro\">\r\n\r\n    <div class=\"container intro-grid\">\r\n\r\n        <div class=\"intro-number reveal\">\r\n            01\r\n        <\/div>\r\n\r\n        <div class=\"intro-content reveal\">\r\n\r\n            <div class=\"eyebrow\">\r\n                <i><\/i>\r\n                Premium Residential\r\n            <\/div>\r\n\r\n            <h2 class=\"title\">\r\n                Your home should<br>\r\n                <span>feel unmistakably yours.<\/span>\r\n            <\/h2>\r\n\r\n            <p class=\"text\">\r\n                We create refined residential environments where architecture,\r\n                furniture, textures, lighting and personal character come\r\n                together naturally. Every room is designed as part of one\r\n                connected living experience.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =====================================================\r\n     3D BEDROOM\r\n===================================================== -->\r\n\r\n<section class=\"room-section\">\r\n\r\n    <div class=\"container\">\r\n\r\n        <div class=\"room-head reveal\">\r\n\r\n            <div>\r\n\r\n                <div class=\"eyebrow\">\r\n                    <i><\/i>\r\n                    3D Spatial Experience\r\n                <\/div>\r\n\r\n                <h2 class=\"title\">\r\n                    Walk into<br>\r\n                    <span>the feeling.<\/span>\r\n                <\/h2>\r\n\r\n            <\/div>\r\n\r\n            <p class=\"text\">\r\n                Explore a conceptual luxury bedroom through an interactive\r\n                3D environment. Furniture, architecture, natural materials\r\n                and subtle lighting are layered to create a calm residential\r\n                atmosphere.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"room\">\r\n\r\n            <div class=\"room-box\" id=\"roomBox\">\r\n\r\n                <div class=\"room-floor\"><\/div>\r\n\r\n                <div class=\"room-wall room-back\"><\/div>\r\n\r\n                <div class=\"room-wall room-left\"><\/div>\r\n\r\n                <div class=\"room-window\"><\/div>\r\n\r\n                <div class=\"bed\">\r\n\r\n                    <div class=\"bed-head\"><\/div>\r\n\r\n                    <div class=\"pillow\"><\/div>\r\n\r\n                    <div class=\"pillow two\"><\/div>\r\n\r\n                <\/div>\r\n\r\n                <div class=\"side-table\"><\/div>\r\n\r\n                <div class=\"lamp\"><\/div>\r\n\r\n                <div class=\"lamp-light\"><\/div>\r\n\r\n                <div class=\"room-plant\"><\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =====================================================\r\n     LIVING EXPERIENCE\r\n===================================================== -->\r\n\r\n<section class=\"living\">\r\n\r\n    <div class=\"container living-grid\">\r\n\r\n        <div class=\"living-image reveal\">\r\n\r\n            <img decoding=\"async\"\r\n            src=\"https:\/\/images.unsplash.com\/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1600&q=90\"\r\n            alt=\"Premium luxury living room\">\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"living-content reveal\">\r\n\r\n            <div class=\"eyebrow\">\r\n                <i><\/i>\r\n                Living Experience\r\n            <\/div>\r\n\r\n            <h2 class=\"title\">\r\n                Calm spaces.<br>\r\n                <span>Beautiful moments.<\/span>\r\n            <\/h2>\r\n\r\n            <p class=\"text\">\r\n                A premium home is not defined only by expensive materials.\r\n                It is the feeling created when everything works together \u2014\r\n                proportion, comfort, light, texture and personal expression.\r\n            <\/p>\r\n\r\n\r\n            <div class=\"feature-list\">\r\n\r\n                <div class=\"feature\">\r\n                    <span class=\"feature-dot\"><\/span>\r\n                    Bespoke furniture planning\r\n                <\/div>\r\n\r\n                <div class=\"feature\">\r\n                    <span class=\"feature-dot\"><\/span>\r\n                    Architectural lighting\r\n                <\/div>\r\n\r\n                <div class=\"feature\">\r\n                    <span class=\"feature-dot\"><\/span>\r\n                    Premium wall finishes\r\n                <\/div>\r\n\r\n                <div class=\"feature\">\r\n                    <span class=\"feature-dot\"><\/span>\r\n                    Curated textures & fabrics\r\n                <\/div>\r\n\r\n                <div class=\"feature\">\r\n                    <span class=\"feature-dot\"><\/span>\r\n                    Smart residential integration\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =====================================================\r\n     360\u00b0 HOME EXPERIENCE\r\n===================================================== -->\r\n\r\n<section class=\"interactive\">\r\n\r\n    <div class=\"container\">\r\n\r\n        <div class=\"interactive-head reveal\">\r\n\r\n            <div>\r\n\r\n                <div class=\"eyebrow\">\r\n                    <i><\/i>\r\n                    Interactive Home\r\n                <\/div>\r\n\r\n                <h2 class=\"title\">\r\n                    Move through<br>\r\n                    <span>your home.<\/span>\r\n                <\/h2>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"drag-note\">\r\n                \u2190 Drag to explore \u2192\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"panorama reveal\" id=\"panorama\">\r\n\r\n            <div class=\"panorama-track\" id=\"panoramaTrack\">\r\n\r\n                <div class=\"panorama-panel panel1\"><\/div>\r\n\r\n                <div class=\"panorama-panel panel2\"><\/div>\r\n\r\n                <div class=\"panorama-panel panel3\"><\/div>\r\n\r\n                <div class=\"panorama-panel panel4\"><\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"panorama-label\">\r\n                Residential Atmosphere \/ 360\u00b0 Exploration\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =====================================================\r\n     ROOM COLLECTION\r\n===================================================== -->\r\n\r\n<section class=\"rooms\">\r\n\r\n    <div class=\"container\">\r\n\r\n        <div class=\"reveal\">\r\n\r\n            <div class=\"eyebrow\">\r\n                <i><\/i>\r\n                Residential Spaces\r\n            <\/div>\r\n\r\n            <h2 class=\"title\">\r\n                Every room tells<br>\r\n                <span>part of your story.<\/span>\r\n            <\/h2>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"room-cards\">\r\n\r\n            <article class=\"room-card reveal\">\r\n\r\n                <img decoding=\"async\"\r\n                src=\"https:\/\/images.unsplash.com\/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=1400&q=90\"\r\n                alt=\"Luxury living room\">\r\n\r\n                <div class=\"room-card-content\">\r\n\r\n                    <small>01 \/ Living<\/small>\r\n\r\n                    <h3>\r\n                        Living Room\r\n                    <\/h3>\r\n\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <article class=\"room-card reveal\">\r\n\r\n                <img decoding=\"async\"\r\n                src=\"https:\/\/images.unsplash.com\/photo-1600607688969-a5bfcd646154?auto=format&fit=crop&w=1400&q=90\"\r\n                alt=\"Luxury bedroom\">\r\n\r\n                <div class=\"room-card-content\">\r\n\r\n                    <small>02 \/ Private<\/small>\r\n\r\n                    <h3>\r\n                        Master Bedroom\r\n                    <\/h3>\r\n\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <article class=\"room-card reveal\">\r\n\r\n                <img decoding=\"async\"\r\n                src=\"https:\/\/images.unsplash.com\/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=1400&q=90\"\r\n                alt=\"Luxury kitchen\">\r\n\r\n                <div class=\"room-card-content\">\r\n\r\n                    <small>03 \/ Culinary<\/small>\r\n\r\n                    <h3>\r\n                        Kitchen\r\n                    <\/h3>\r\n\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =====================================================\r\n     HUMAN TOUCH\r\n===================================================== -->\r\n\r\n<section class=\"human\">\r\n\r\n    <div class=\"container human-grid\">\r\n\r\n        <div class=\"human-quote reveal\">\r\n\r\n            Luxury is not<br>\r\n            <span>what you see.<\/span><br>\r\n            It's what you feel.\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"human-copy reveal\">\r\n\r\n            <div class=\"eyebrow\">\r\n                <i><\/i>\r\n                Human Touch\r\n            <\/div>\r\n\r\n            <p class=\"text\">\r\n                The most memorable interiors are personal. They respond to\r\n                morning routines, family gatherings, quiet evenings, weekend\r\n                dinners and the small rituals that make a house a home.\r\n            <\/p>\r\n\r\n\r\n            <div class=\"human-points\">\r\n\r\n                <div class=\"human-point\">\r\n\r\n                    <b>01<\/b>\r\n\r\n                    <p>\r\n                        Spaces shaped around your lifestyle rather than a\r\n                        predefined design template.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"human-point\">\r\n\r\n                    <b>02<\/b>\r\n\r\n                    <p>\r\n                        Materials selected for how they look, feel and age\r\n                        within the home.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"human-point\">\r\n\r\n                    <b>03<\/b>\r\n\r\n                    <p>\r\n                        Details that create warmth without compromising\r\n                        architectural sophistication.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =====================================================\r\n     BEFORE \/ AFTER\r\n===================================================== -->\r\n\r\n<section class=\"before-after\">\r\n\r\n    <div class=\"container\">\r\n\r\n        <div class=\"reveal\">\r\n\r\n            <div class=\"eyebrow\">\r\n                <i><\/i>\r\n                Transformation\r\n            <\/div>\r\n\r\n            <h2 class=\"title\">\r\n                From blank canvas<br>\r\n                <span>to personal sanctuary.<\/span>\r\n            <\/h2>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"compare reveal\" id=\"compare\">\r\n\r\n            <div class=\"compare-layer\">\r\n\r\n                <img decoding=\"async\"\r\n                src=\"https:\/\/images.unsplash.com\/photo-1493663284031-b7e3aefcae8e?auto=format&fit=crop&w=1800&q=90\"\r\n                alt=\"Residential before\">\r\n\r\n                <div class=\"compare-label before-label\">\r\n                    Before\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"compare-layer compare-after\" id=\"compareAfter\">\r\n\r\n                <img decoding=\"async\"\r\n                src=\"https:\/\/images.unsplash.com\/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1800&q=90\"\r\n                alt=\"Residential after\">\r\n\r\n                <div class=\"compare-label after-label\">\r\n                    After\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =====================================================\r\n     MATERIAL SELECTOR\r\n===================================================== -->\r\n\r\n<section class=\"materials\">\r\n\r\n    <div class=\"container\">\r\n\r\n        <div class=\"reveal\">\r\n\r\n            <div class=\"eyebrow\">\r\n                <i><\/i>\r\n                Material Studio\r\n            <\/div>\r\n\r\n            <h2 class=\"title\">\r\n                Choose the mood.<br>\r\n                <span>Feel the difference.<\/span>\r\n            <\/h2>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"material-layout\">\r\n\r\n            <div class=\"material-show reveal\" id=\"materialShow\"><\/div>\r\n\r\n\r\n            <div class=\"material-info reveal\">\r\n\r\n                <div class=\"eyebrow\">\r\n                    <i><\/i>\r\n                    Curated Finish\r\n                <\/div>\r\n\r\n                <h3 id=\"materialName\">\r\n                    Natural Oak\r\n                <\/h3>\r\n\r\n                <p class=\"text\" id=\"materialDescription\">\r\n                    Warm natural tones designed to bring softness,\r\n                    comfort and timeless character into the home.\r\n                <\/p>\r\n\r\n\r\n                <div class=\"material-buttons\">\r\n\r\n                    <button\r\n                    class=\"material-button active\"\r\n                    data-color=\"#998570\"\r\n                    data-name=\"Natural Oak\"\r\n                    data-description=\"Warm natural tones designed to bring softness, comfort and timeless character into the home.\">\r\n                        Natural Oak\r\n                    <\/button>\r\n\r\n                    <button\r\n                    class=\"material-button\"\r\n                    data-color=\"#403d37\"\r\n                    data-name=\"Charcoal\"\r\n                    data-description=\"Deep architectural tones for a dramatic, contemporary residential atmosphere.\">\r\n                        Charcoal\r\n                    <\/button>\r\n\r\n                    <button\r\n                    class=\"material-button\"\r\n                    data-color=\"#c7bba7\"\r\n                    data-name=\"Travertine\"\r\n                    data-description=\"Soft stone-inspired tones that create a calm, sophisticated Mediterranean feeling.\">\r\n                        Travertine\r\n                    <\/button>\r\n\r\n                    <button\r\n                    class=\"material-button\"\r\n                    data-color=\"#6d765f\"\r\n                    data-name=\"Olive\"\r\n                    data-description=\"A muted botanical tone that introduces a subtle connection to nature.\">\r\n                        Olive\r\n                    <\/button>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =====================================================\r\n     PROCESS\r\n===================================================== -->\r\n\r\n<section class=\"process\">\r\n\r\n    <div class=\"container\">\r\n\r\n        <div class=\"reveal\">\r\n\r\n            <div class=\"eyebrow\">\r\n                <i><\/i>\r\n                Our Process\r\n            <\/div>\r\n\r\n            <h2 class=\"title\">\r\n                Your vision.<br>\r\n                <span>Our craft.<\/span>\r\n            <\/h2>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"process-grid\">\r\n\r\n            <div class=\"process-item reveal\">\r\n\r\n                <div class=\"process-number\">\r\n                    01\r\n                <\/div>\r\n\r\n                <h3>\r\n                    Discover\r\n                <\/h3>\r\n\r\n                <p>\r\n                    We understand your lifestyle, preferences, property and\r\n                    vision before defining the design direction.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"process-item reveal\">\r\n\r\n                <div class=\"process-number\">\r\n                    02\r\n                <\/div>\r\n\r\n                <h3>\r\n                    Design\r\n                <\/h3>\r\n\r\n                <p>\r\n                    Spatial planning, materials, furniture, colours and\r\n                    architectural details are brought together.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"process-item reveal\">\r\n\r\n                <div class=\"process-number\">\r\n                    03\r\n                <\/div>\r\n\r\n                <h3>\r\n                    Refine\r\n                <\/h3>\r\n\r\n                <p>\r\n                    Every finish and detail is carefully developed before\r\n                    construction and installation.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"process-item reveal\">\r\n\r\n                <div class=\"process-number\">\r\n                    04\r\n                <\/div>\r\n\r\n                <h3>\r\n                    Experience\r\n                <\/h3>\r\n\r\n                <p>\r\n                    The final space becomes a complete residential environment\r\n                    designed around the people who live in it.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =====================================================\r\n     CTA\r\n===================================================== -->\r\n\r\n<section class=\"cta\">\r\n\r\n    <div class=\"cta-inner reveal\">\r\n\r\n        <div class=\"eyebrow\">\r\n            <i><\/i>\r\n            Urban Fitouts UAE\r\n            <i><\/i>\r\n        <\/div>\r\n\r\n        <h2>\r\n            Your home.<br>\r\n            Your story.\r\n        <\/h2>\r\n\r\n        <p>\r\n            Let's turn your residential space into an environment that feels\r\n            refined, personal and completely yours.\r\n        <\/p>\r\n\r\n        <a href=\"#\" class=\"cta-btn\">\r\n            Begin Your Home Journey \u2192\r\n        <\/a>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n\r\n\/* =====================================================\r\n   SCROLL REVEAL\r\n===================================================== *\/\r\n\r\nconst revealElements =\r\ndocument.querySelectorAll(\".reveal\");\r\n\r\nconst observer =\r\nnew IntersectionObserver((entries)=>{\r\n\r\n    entries.forEach(entry=>{\r\n\r\n        if(entry.isIntersecting){\r\n\r\n            entry.target.classList.add(\"active\");\r\n\r\n        }\r\n\r\n    });\r\n\r\n},{\r\n    threshold:.12\r\n});\r\n\r\nrevealElements.forEach(el=>{\r\n    observer.observe(el);\r\n});\r\n\r\n\r\n\/* =====================================================\r\n   3D ROOM MOUSE \/ TOUCH ROTATION\r\n===================================================== *\/\r\n\r\nconst roomBox =\r\ndocument.getElementById(\"roomBox\");\r\n\r\nconst room =\r\ndocument.querySelector(\".room\");\r\n\r\nroom.addEventListener(\"mousemove\",(e)=>{\r\n\r\n    const rect =\r\n    room.getBoundingClientRect();\r\n\r\n    const x =\r\n    (e.clientX-rect.left)\/rect.width-.5;\r\n\r\n    const y =\r\n    (e.clientY-rect.top)\/rect.height-.5;\r\n\r\n    roomBox.style.transform =\r\n    `\r\n    rotateX(${56-y*14}deg)\r\n    rotateZ(${-7+x*9}deg)\r\n    rotateY(${-18+x*18}deg)\r\n    `;\r\n\r\n});\r\n\r\nroom.addEventListener(\"mouseleave\",()=>{\r\n\r\n    roomBox.style.transform =\r\n    \"rotateX(56deg) rotateZ(-7deg) rotateY(-18deg)\";\r\n\r\n});\r\n\r\n\r\n\/* =====================================================\r\n   360\u00b0 PANORAMA DRAG\r\n===================================================== *\/\r\n\r\nconst panorama =\r\ndocument.getElementById(\"panorama\");\r\n\r\nconst panoramaTrack =\r\ndocument.getElementById(\"panoramaTrack\");\r\n\r\nlet isDragging=false;\r\nlet startX=0;\r\nlet currentX=0;\r\n\r\npanorama.addEventListener(\"pointerdown\",(e)=>{\r\n\r\n    isDragging=true;\r\n\r\n    startX=e.clientX-currentX;\r\n\r\n    panorama.setPointerCapture(e.pointerId);\r\n\r\n});\r\n\r\n\r\npanorama.addEventListener(\"pointermove\",(e)=>{\r\n\r\n    if(!isDragging) return;\r\n\r\n    currentX=e.clientX-startX;\r\n\r\n    const maxMove =\r\n    panorama.offsetWidth*1.15;\r\n\r\n    currentX=\r\n    Math.max(-maxMove,\r\n    Math.min(0,currentX));\r\n\r\n    panoramaTrack.style.transform=\r\n    `translateX(${currentX}px)`;\r\n\r\n});\r\n\r\n\r\npanorama.addEventListener(\"pointerup\",()=>{\r\n\r\n    isDragging=false;\r\n\r\n});\r\n\r\n\r\npanorama.addEventListener(\"pointercancel\",()=>{\r\n\r\n    isDragging=false;\r\n\r\n});\r\n\r\n\r\n\/* =====================================================\r\n   BEFORE \/ AFTER SLIDER\r\n===================================================== *\/\r\n\r\nconst compare =\r\ndocument.getElementById(\"compare\");\r\n\r\nconst compareAfter =\r\ndocument.getElementById(\"compareAfter\");\r\n\r\nlet compareDragging=false;\r\n\r\nfunction updateCompare(x){\r\n\r\n    const rect=\r\n    compare.getBoundingClientRect();\r\n\r\n    let percentage=\r\n    ((x-rect.left)\/rect.width)*100;\r\n\r\n    percentage=\r\n    Math.max(5,Math.min(95,percentage));\r\n\r\n    compareAfter.style.width=\r\n    percentage+\"%\";\r\n}\r\n\r\ncompare.addEventListener(\"pointerdown\",(e)=>{\r\n\r\n    compareDragging=true;\r\n\r\n    compare.setPointerCapture(e.pointerId);\r\n\r\n    updateCompare(e.clientX);\r\n\r\n});\r\n\r\ncompare.addEventListener(\"pointermove\",(e)=>{\r\n\r\n    if(compareDragging){\r\n\r\n        updateCompare(e.clientX);\r\n\r\n    }\r\n\r\n});\r\n\r\ncompare.addEventListener(\"pointerup\",()=>{\r\n\r\n    compareDragging=false;\r\n\r\n});\r\n\r\ncompare.addEventListener(\"pointercancel\",()=>{\r\n\r\n    compareDragging=false;\r\n\r\n});\r\n\r\n\r\n\/* =====================================================\r\n   MATERIAL SELECTOR\r\n===================================================== *\/\r\n\r\nconst materialShow =\r\ndocument.getElementById(\"materialShow\");\r\n\r\nconst materialName =\r\ndocument.getElementById(\"materialName\");\r\n\r\nconst materialDescription =\r\ndocument.getElementById(\"materialDescription\");\r\n\r\nconst materialButtons =\r\ndocument.querySelectorAll(\".material-button\");\r\n\r\nmaterialButtons.forEach(button=>{\r\n\r\n    button.addEventListener(\"click\",()=>{\r\n\r\n        materialButtons.forEach(btn=>{\r\n            btn.classList.remove(\"active\");\r\n        });\r\n\r\n        button.classList.add(\"active\");\r\n\r\n        materialShow.style.background=\r\n        button.dataset.color;\r\n\r\n        materialName.textContent=\r\n        button.dataset.name;\r\n\r\n        materialDescription.textContent=\r\n        button.dataset.description;\r\n\r\n    });\r\n\r\n});\r\n\r\n\r\n\/* =====================================================\r\n   HERO PARALLAX\r\n===================================================== *\/\r\n\r\nwindow.addEventListener(\"scroll\",()=>{\r\n\r\n    const heroImage =\r\n    document.querySelector(\".hero-image\");\r\n\r\n    const scroll =\r\n    window.scrollY;\r\n\r\n    if(scroll<\r\n    window.innerHeight){\r\n\r\n        heroImage.style.transform=\r\n        `scale(1.06) translateY(${scroll*.12}px)`;\r\n\r\n    }\r\n\r\n});\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n```\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>&#8220;`html Premium Residential | Urban Fitouts UAE Urban Fitouts UAE \/ Premium Residential A Home Beyond Luxury. Bespoke residential interiors [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_thinkrank_schema_form_data":"","_thinkrank_selected_schema_type":"","_thinkrank_additional_schemas":"","_thinkrank_canonical_url":"","_thinkrank_og_title":"","_thinkrank_og_description":"","_thinkrank_og_image":"","_thinkrank_twitter_title":"","_thinkrank_twitter_description":"","_thinkrank_twitter_image":"","_thinkrank_imported_from":"","_thinkrank_focus_keywords":[],"_thinkrank_focus_keyword":"","_thinkrank_robots_meta_enabled":0,"_thinkrank_robots_meta":"","_thinkrank_advanced_robots_meta":"","_thinkrank_exclude_from_search":0,"_thinkrank_exclude_from_archives":0,"_thinkrank_primary_category":0,"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":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","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-149","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Premium Residential - urbanfitouts.ae<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/urbanfitouts.ae\/premium-residential\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Premium Residential - urbanfitouts.ae\" \/>\n<meta property=\"og:description\" content=\"&#8220;`html Premium Residential | Urban Fitouts UAE Urban Fitouts UAE \/ Premium Residential A Home Beyond Luxury. Bespoke residential interiors [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/urbanfitouts.ae\/premium-residential\/\" \/>\n<meta property=\"og:site_name\" content=\"urbanfitouts.ae\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-19T19:22:23+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/urbanfitouts.ae\\\/premium-residential\\\/\",\"url\":\"https:\\\/\\\/urbanfitouts.ae\\\/premium-residential\\\/\",\"name\":\"Premium Residential - urbanfitouts.ae\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/urbanfitouts.ae\\\/#website\"},\"datePublished\":\"2026-09-13T10:28:36+00:00\",\"dateModified\":\"2026-09-19T19:22:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/urbanfitouts.ae\\\/premium-residential\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/urbanfitouts.ae\\\/premium-residential\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/urbanfitouts.ae\\\/premium-residential\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/urbanfitouts.ae\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Premium Residential\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/urbanfitouts.ae\\\/#website\",\"url\":\"https:\\\/\\\/urbanfitouts.ae\\\/\",\"name\":\"urbanfitouts.ae\",\"description\":\"urbanfitouts\",\"publisher\":{\"@id\":\"https:\\\/\\\/urbanfitouts.ae\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/urbanfitouts.ae\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/urbanfitouts.ae\\\/#organization\",\"name\":\"urbanfitouts.ae\",\"url\":\"https:\\\/\\\/urbanfitouts.ae\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/urbanfitouts.ae\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/urbanfitouts.ae\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/cropped-URBAN-WRAP-FINAL-HIGH-RES-01-scaled-2.jpg\",\"contentUrl\":\"https:\\\/\\\/urbanfitouts.ae\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/cropped-URBAN-WRAP-FINAL-HIGH-RES-01-scaled-2.jpg\",\"width\":1892,\"height\":2118,\"caption\":\"urbanfitouts.ae\"},\"image\":{\"@id\":\"https:\\\/\\\/urbanfitouts.ae\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Premium Residential - urbanfitouts.ae","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/urbanfitouts.ae\/premium-residential\/","og_locale":"en_US","og_type":"article","og_title":"Premium Residential - urbanfitouts.ae","og_description":"&#8220;`html Premium Residential | Urban Fitouts UAE Urban Fitouts UAE \/ Premium Residential A Home Beyond Luxury. Bespoke residential interiors [&hellip;]","og_url":"https:\/\/urbanfitouts.ae\/premium-residential\/","og_site_name":"urbanfitouts.ae","article_modified_time":"2026-09-19T19:22:23+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/urbanfitouts.ae\/premium-residential\/","url":"https:\/\/urbanfitouts.ae\/premium-residential\/","name":"Premium Residential - urbanfitouts.ae","isPartOf":{"@id":"https:\/\/urbanfitouts.ae\/#website"},"datePublished":"2026-09-13T10:28:36+00:00","dateModified":"2026-09-19T19:22:23+00:00","breadcrumb":{"@id":"https:\/\/urbanfitouts.ae\/premium-residential\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/urbanfitouts.ae\/premium-residential\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/urbanfitouts.ae\/premium-residential\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/urbanfitouts.ae\/"},{"@type":"ListItem","position":2,"name":"Premium Residential"}]},{"@type":"WebSite","@id":"https:\/\/urbanfitouts.ae\/#website","url":"https:\/\/urbanfitouts.ae\/","name":"urbanfitouts.ae","description":"urbanfitouts","publisher":{"@id":"https:\/\/urbanfitouts.ae\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/urbanfitouts.ae\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/urbanfitouts.ae\/#organization","name":"urbanfitouts.ae","url":"https:\/\/urbanfitouts.ae\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/urbanfitouts.ae\/#\/schema\/logo\/image\/","url":"https:\/\/urbanfitouts.ae\/wp-content\/uploads\/2026\/09\/cropped-URBAN-WRAP-FINAL-HIGH-RES-01-scaled-2.jpg","contentUrl":"https:\/\/urbanfitouts.ae\/wp-content\/uploads\/2026\/09\/cropped-URBAN-WRAP-FINAL-HIGH-RES-01-scaled-2.jpg","width":1892,"height":2118,"caption":"urbanfitouts.ae"},"image":{"@id":"https:\/\/urbanfitouts.ae\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/urbanfitouts.ae\/wp-json\/wp\/v2\/pages\/149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/urbanfitouts.ae\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/urbanfitouts.ae\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/urbanfitouts.ae\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/urbanfitouts.ae\/wp-json\/wp\/v2\/comments?post=149"}],"version-history":[{"count":10,"href":"https:\/\/urbanfitouts.ae\/wp-json\/wp\/v2\/pages\/149\/revisions"}],"predecessor-version":[{"id":429,"href":"https:\/\/urbanfitouts.ae\/wp-json\/wp\/v2\/pages\/149\/revisions\/429"}],"wp:attachment":[{"href":"https:\/\/urbanfitouts.ae\/wp-json\/wp\/v2\/media?parent=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}