{"id":344,"date":"2026-09-14T18:07:10","date_gmt":"2026-09-14T18:07:10","guid":{"rendered":"https:\/\/urbanfitouts.ae\/?page_id=344"},"modified":"2026-09-20T12:04:22","modified_gmt":"2026-09-20T12:04:22","slug":"design-consultation","status":"publish","type":"page","link":"https:\/\/urbanfitouts.ae\/design-consultation\/","title":{"rendered":"Design Consultation"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"344\" class=\"elementor elementor-344\">\n\t\t\t\t<div class=\"elementor-element elementor-element-88a2644 e-con-full e-flex e-con e-parent\" data-id=\"88a2644\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-70433fa elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"70433fa\" 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>Design Consultation | Urban Fitouts UAE<\/title>\r\n\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=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n:root{\r\n    --ink:#171717;\r\n    --soft:#f5f2ed;\r\n    --cream:#ebe5dc;\r\n    --white:#ffffff;\r\n    --muted:#77736c;\r\n    --line:rgba(23,23,23,.12);\r\n    --dark:#111211;\r\n    --dark2:#191b19;\r\n    --accent:#b79a72;\r\n    --shadow:0 25px 70px rgba(0,0,0,.10);\r\n    --radius:28px;\r\n}\r\n\r\n*{\r\n    margin:0;\r\n    padding:0;\r\n    box-sizing:border-box;\r\n}\r\n\r\nhtml{\r\n    scroll-behavior:smooth;\r\n}\r\n\r\nbody{\r\n    font-family:\"DM Sans\",sans-serif;\r\n    background:var(--soft);\r\n    color:var(--ink);\r\n    overflow-x:hidden;\r\n}\r\n\r\nimg{\r\n    width:100%;\r\n    display:block;\r\n}\r\n\r\nbutton{\r\n    font:inherit;\r\n}\r\n\r\na{\r\n    color:inherit;\r\n    text-decoration:none;\r\n}\r\n\r\n\/* =========================\r\n   COMMON\r\n========================= *\/\r\n\r\n.section{\r\n    padding:120px 6vw;\r\n    position:relative;\r\n}\r\n\r\n.container{\r\n    width:min(1250px,100%);\r\n    margin:auto;\r\n}\r\n\r\n.eyebrow{\r\n    display:flex;\r\n    align-items:center;\r\n    gap:12px;\r\n    text-transform:uppercase;\r\n    letter-spacing:3px;\r\n    font-size:11px;\r\n    font-weight:700;\r\n    color:var(--accent);\r\n    margin-bottom:18px;\r\n}\r\n\r\n.eyebrow::before{\r\n    content:\"\";\r\n    width:35px;\r\n    height:1px;\r\n    background:currentColor;\r\n}\r\n\r\n.section-title{\r\n    font-family:\"Playfair Display\",serif;\r\n    font-size:clamp(42px,5vw,76px);\r\n    line-height:.98;\r\n    font-weight:500;\r\n    letter-spacing:-2px;\r\n}\r\n\r\n.section-copy{\r\n    max-width:650px;\r\n    color:var(--muted);\r\n    font-size:16px;\r\n    line-height:1.9;\r\n}\r\n\r\n.reveal{\r\n    opacity:0;\r\n    transform:translateY(45px);\r\n    transition:\r\n        opacity .9s ease,\r\n        transform .9s cubic-bezier(.2,.7,.2,1);\r\n}\r\n\r\n.reveal.active{\r\n    opacity:1;\r\n    transform:translateY(0);\r\n}\r\n\r\n\r\n\/* =========================\r\n   HERO\r\n========================= *\/\r\n\r\n.hero{\r\n    min-height:100svh;\r\n    position:relative;\r\n    display:flex;\r\n    align-items:flex-end;\r\n    overflow:hidden;\r\n    background:#222;\r\n    isolation:isolate;\r\n}\r\n\r\n.hero-bg{\r\n    position:absolute;\r\n    inset:-6%;\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(0,0,0,.70),\r\n            rgba(0,0,0,.25),\r\n            rgba(0,0,0,.08)\r\n        ),\r\n        url(\"https:\/\/images.unsplash.com\/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=2200&q=90\")\r\n        center\/cover;\r\n    transform:scale(1.05);\r\n    will-change:transform;\r\n}\r\n\r\n.hero-content{\r\n    position:relative;\r\n    z-index:2;\r\n    width:min(1250px,100%);\r\n    margin:auto;\r\n    padding:100px 6vw 90px;\r\n    color:#fff;\r\n}\r\n\r\n.hero-tag{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:10px;\r\n    padding:9px 15px;\r\n    border:1px solid rgba(255,255,255,.25);\r\n    background:rgba(255,255,255,.08);\r\n    backdrop-filter:blur(12px);\r\n    border-radius:50px;\r\n    text-transform:uppercase;\r\n    letter-spacing:2px;\r\n    font-size:10px;\r\n    margin-bottom:25px;\r\n}\r\n\r\n.hero-tag span{\r\n    width:7px;\r\n    height:7px;\r\n    border-radius:50%;\r\n    background:#d7bd96;\r\n    box-shadow:0 0 18px #d7bd96;\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(60px,9vw,145px);\r\n    line-height:.82;\r\n    letter-spacing:-6px;\r\n    max-width:1000px;\r\n}\r\n\r\n.hero h1 em{\r\n    color:#d6bd99;\r\n    font-style:normal;\r\n}\r\n\r\n.hero-description{\r\n    margin-top:35px;\r\n    max-width:570px;\r\n    font-size:17px;\r\n    line-height:1.8;\r\n    color:rgba(255,255,255,.80);\r\n}\r\n\r\n.hero-scroll{\r\n    margin-top:55px;\r\n    display:flex;\r\n    align-items:center;\r\n    gap:15px;\r\n    color:rgba(255,255,255,.65);\r\n    font-size:11px;\r\n    text-transform:uppercase;\r\n    letter-spacing:2px;\r\n}\r\n\r\n.scroll-line{\r\n    width:60px;\r\n    height:1px;\r\n    background:rgba(255,255,255,.45);\r\n}\r\n\r\n\r\n\/* =========================\r\n   INTRO\r\n========================= *\/\r\n\r\n.intro{\r\n    background:#f8f5f0;\r\n}\r\n\r\n.intro-grid{\r\n    display:grid;\r\n    grid-template-columns:1fr 1fr;\r\n    gap:100px;\r\n    align-items:center;\r\n}\r\n\r\n.intro-visual{\r\n    position:relative;\r\n    min-height:590px;\r\n}\r\n\r\n.intro-image{\r\n    width:82%;\r\n    height:590px;\r\n    object-fit:cover;\r\n    border-radius:4px;\r\n}\r\n\r\n.floating-note{\r\n    position:absolute;\r\n    right:0;\r\n    bottom:45px;\r\n    width:245px;\r\n    padding:28px;\r\n    background:#fff;\r\n    box-shadow:var(--shadow);\r\n}\r\n\r\n.floating-note strong{\r\n    display:block;\r\n    font-family:\"Playfair Display\",serif;\r\n    font-size:27px;\r\n    font-weight:500;\r\n    margin-bottom:8px;\r\n}\r\n\r\n.floating-note span{\r\n    color:var(--muted);\r\n    font-size:12px;\r\n    line-height:1.6;\r\n}\r\n\r\n.intro-content h2{\r\n    margin-bottom:28px;\r\n}\r\n\r\n.intro-content p{\r\n    color:var(--muted);\r\n    font-size:16px;\r\n    line-height:1.9;\r\n    margin-bottom:28px;\r\n}\r\n\r\n.mini-points{\r\n    display:grid;\r\n    grid-template-columns:1fr 1fr;\r\n    gap:18px;\r\n    margin-top:35px;\r\n}\r\n\r\n.mini-point{\r\n    padding:18px 0;\r\n    border-top:1px solid var(--line);\r\n    font-size:13px;\r\n    font-weight:600;\r\n}\r\n\r\n\r\n\/* =========================\r\n   3D CONSULTATION TABLE\r\n========================= *\/\r\n\r\n.consultation-3d{\r\n    background:var(--dark);\r\n    color:#fff;\r\n    overflow:hidden;\r\n}\r\n\r\n.dark-heading{\r\n    display:flex;\r\n    justify-content:space-between;\r\n    align-items:flex-end;\r\n    gap:40px;\r\n    margin-bottom:65px;\r\n}\r\n\r\n.dark-heading .section-copy{\r\n    color:rgba(255,255,255,.55);\r\n}\r\n\r\n.scene{\r\n    height:650px;\r\n    position:relative;\r\n    perspective:1300px;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    touch-action:none;\r\n}\r\n\r\n.scene-floor{\r\n    position:absolute;\r\n    width:700px;\r\n    height:700px;\r\n    border:1px solid rgba(255,255,255,.08);\r\n    transform:\r\n        rotateX(66deg)\r\n        rotateZ(-20deg)\r\n        translateY(70px);\r\n    background:\r\n        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),\r\n        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);\r\n    background-size:50px 50px;\r\n}\r\n\r\n.consultation-room{\r\n    width:520px;\r\n    height:360px;\r\n    position:relative;\r\n    transform-style:preserve-3d;\r\n    transform:\r\n        rotateX(7deg)\r\n        rotateY(-25deg);\r\n    transition:transform .12s linear;\r\n}\r\n\r\n.table{\r\n    position:absolute;\r\n    left:50%;\r\n    top:50%;\r\n    width:300px;\r\n    height:150px;\r\n    transform:\r\n        translate(-50%,-50%)\r\n        translateZ(30px)\r\n        rotateX(8deg);\r\n    transform-style:preserve-3d;\r\n}\r\n\r\n.table-top{\r\n    position:absolute;\r\n    width:100%;\r\n    height:100%;\r\n    border-radius:80px;\r\n    background:linear-gradient(135deg,#b89a72,#80694d);\r\n    box-shadow:\r\n        0 30px 35px rgba(0,0,0,.3),\r\n        inset 0 2px 2px rgba(255,255,255,.25);\r\n    transform:translateZ(30px);\r\n}\r\n\r\n.table-leg{\r\n    position:absolute;\r\n    width:25px;\r\n    height:120px;\r\n    background:linear-gradient(90deg,#504d48,#292a28);\r\n    bottom:-110px;\r\n    border-radius:15px;\r\n}\r\n\r\n.leg1{left:55px}\r\n.leg2{right:55px}\r\n\r\n.laptop{\r\n    position:absolute;\r\n    left:50%;\r\n    top:42%;\r\n    width:100px;\r\n    height:65px;\r\n    transform:\r\n        translate(-50%,-50%)\r\n        translateZ(65px);\r\n}\r\n\r\n.laptop-screen{\r\n    width:100%;\r\n    height:58px;\r\n    background:#101111;\r\n    border:4px solid #444;\r\n    border-radius:6px;\r\n    transform:rotateX(-5deg);\r\n    box-shadow:0 8px 20px rgba(0,0,0,.35);\r\n}\r\n\r\n.laptop-base{\r\n    width:115px;\r\n    height:6px;\r\n    background:#777;\r\n    margin-left:-7px;\r\n    border-radius:0 0 8px 8px;\r\n}\r\n\r\n.chair{\r\n    position:absolute;\r\n    width:70px;\r\n    height:90px;\r\n    border-radius:35px 35px 15px 15px;\r\n    background:#806b55;\r\n    transform-style:preserve-3d;\r\n}\r\n\r\n.chair::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    width:55px;\r\n    height:55px;\r\n    background:#62523f;\r\n    border-radius:30px;\r\n    left:7px;\r\n    top:-48px;\r\n}\r\n\r\n.chair::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    width:7px;\r\n    height:50px;\r\n    background:#444;\r\n    bottom:-45px;\r\n    left:32px;\r\n}\r\n\r\n.chair-a{\r\n    left:55px;\r\n    top:125px;\r\n    transform:translateZ(10px) rotateY(15deg);\r\n}\r\n\r\n.chair-b{\r\n    right:55px;\r\n    top:125px;\r\n    transform:translateZ(10px) rotateY(-15deg);\r\n}\r\n\r\n.material-board{\r\n    position:absolute;\r\n    right:-10px;\r\n    top:40px;\r\n    width:125px;\r\n    height:190px;\r\n    padding:12px;\r\n    display:grid;\r\n    grid-template-columns:1fr 1fr;\r\n    gap:7px;\r\n    background:#272827;\r\n    border:1px solid rgba(255,255,255,.12);\r\n    transform:translateZ(55px) rotateY(-8deg);\r\n    box-shadow:0 25px 40px rgba(0,0,0,.25);\r\n}\r\n\r\n.swatch{\r\n    border-radius:4px;\r\n}\r\n\r\n.sw1{background:#bda98e}\r\n.sw2{background:#e5dfd5}\r\n.sw3{background:#685b4d}\r\n.sw4{background:#282725}\r\n.sw5{background:#8b7358}\r\n.sw6{background:#c7c1b8}\r\n\r\n.scene-label{\r\n    position:absolute;\r\n    padding:10px 15px;\r\n    border:1px solid rgba(255,255,255,.15);\r\n    background:rgba(20,20,20,.65);\r\n    backdrop-filter:blur(10px);\r\n    border-radius:30px;\r\n    font-size:10px;\r\n    letter-spacing:1.5px;\r\n    text-transform:uppercase;\r\n    color:#ddd;\r\n}\r\n\r\n.label-1{\r\n    left:5%;\r\n    top:18%;\r\n}\r\n\r\n.label-2{\r\n    right:3%;\r\n    bottom:20%;\r\n}\r\n\r\n.label-3{\r\n    left:14%;\r\n    bottom:12%;\r\n}\r\n\r\n.drag-hint{\r\n    position:absolute;\r\n    bottom:12px;\r\n    left:50%;\r\n    transform:translateX(-50%);\r\n    color:rgba(255,255,255,.4);\r\n    font-size:10px;\r\n    text-transform:uppercase;\r\n    letter-spacing:2px;\r\n}\r\n\r\n\r\n\/* =========================\r\n   DISCOVERY\r\n========================= *\/\r\n\r\n.discovery{\r\n    background:#f8f5f0;\r\n}\r\n\r\n.discovery-head{\r\n    display:grid;\r\n    grid-template-columns:1fr 1fr;\r\n    gap:80px;\r\n    margin-bottom:70px;\r\n}\r\n\r\n.discovery-grid{\r\n    display:grid;\r\n    grid-template-columns:repeat(3,1fr);\r\n    gap:18px;\r\n}\r\n\r\n.discovery-card{\r\n    min-height:300px;\r\n    padding:35px;\r\n    background:#fff;\r\n    position:relative;\r\n    overflow:hidden;\r\n    transition:.5s ease;\r\n    border:1px solid transparent;\r\n}\r\n\r\n.discovery-card:hover{\r\n    transform:translateY(-10px);\r\n    border-color:var(--line);\r\n    box-shadow:var(--shadow);\r\n}\r\n\r\n.card-number{\r\n    font-size:11px;\r\n    color:#aaa;\r\n    letter-spacing:2px;\r\n}\r\n\r\n.discovery-card h3{\r\n    margin-top:90px;\r\n    font-family:\"Playfair Display\",serif;\r\n    font-size:30px;\r\n    font-weight:500;\r\n}\r\n\r\n.discovery-card p{\r\n    margin-top:12px;\r\n    color:var(--muted);\r\n    font-size:13px;\r\n    line-height:1.7;\r\n}\r\n\r\n.card-orb{\r\n    position:absolute;\r\n    right:-45px;\r\n    top:-45px;\r\n    width:150px;\r\n    height:150px;\r\n    border-radius:50%;\r\n    border:1px solid rgba(183,154,114,.4);\r\n    transition:.7s ease;\r\n}\r\n\r\n.discovery-card:hover .card-orb{\r\n    transform:scale(1.35) rotate(40deg);\r\n}\r\n\r\n\r\n\/* =========================\r\n   HUMAN CONSULTATION\r\n========================= *\/\r\n\r\n.human{\r\n    background:#ebe5dc;\r\n}\r\n\r\n.human-grid{\r\n    display:grid;\r\n    grid-template-columns:1.1fr .9fr;\r\n    gap:90px;\r\n    align-items:center;\r\n}\r\n\r\n.human-image{\r\n    height:650px;\r\n    object-fit:cover;\r\n}\r\n\r\n.human-content h2{\r\n    margin-bottom:25px;\r\n}\r\n\r\n.human-content > p{\r\n    color:var(--muted);\r\n    line-height:1.9;\r\n    margin-bottom:35px;\r\n}\r\n\r\n.human-list{\r\n    border-top:1px solid rgba(23,23,23,.14);\r\n}\r\n\r\n.human-item{\r\n    padding:22px 0;\r\n    border-bottom:1px solid rgba(23,23,23,.14);\r\n    display:grid;\r\n    grid-template-columns:50px 1fr;\r\n    gap:20px;\r\n    align-items:center;\r\n}\r\n\r\n.human-item span{\r\n    font-size:11px;\r\n    color:#a08765;\r\n}\r\n\r\n.human-item strong{\r\n    font-size:14px;\r\n    font-weight:600;\r\n}\r\n\r\n\r\n\/* =========================\r\n   MATERIAL INTERACTION\r\n========================= *\/\r\n\r\n.materials{\r\n    background:#fff;\r\n}\r\n\r\n.material-layout{\r\n    display:grid;\r\n    grid-template-columns:.8fr 1.2fr;\r\n    gap:90px;\r\n    align-items:center;\r\n}\r\n\r\n.material-stage{\r\n    height:570px;\r\n    position:relative;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    perspective:900px;\r\n    background:\r\n        radial-gradient(circle at center,rgba(183,154,114,.14),transparent 48%);\r\n}\r\n\r\n.material-stack{\r\n    width:260px;\r\n    height:340px;\r\n    position:relative;\r\n    transform-style:preserve-3d;\r\n    transform:rotateX(12deg) rotateY(-25deg);\r\n    transition:.8s cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n.material-sheet{\r\n    position:absolute;\r\n    width:260px;\r\n    height:340px;\r\n    border-radius:4px;\r\n    box-shadow:0 25px 45px rgba(0,0,0,.15);\r\n    transition:.6s ease;\r\n}\r\n\r\n.sheet1{\r\n    background:#c9b59a;\r\n    transform:translateZ(0);\r\n}\r\n\r\n.sheet2{\r\n    background:#ede8df;\r\n    transform:translateZ(28px) translateX(25px) translateY(-20px);\r\n}\r\n\r\n.sheet3{\r\n    background:#5d5144;\r\n    transform:translateZ(56px) translateX(50px) translateY(-40px);\r\n}\r\n\r\n.sheet4{\r\n    background:#262523;\r\n    transform:translateZ(84px) translateX(75px) translateY(-60px);\r\n}\r\n\r\n.material-stage:hover .material-stack{\r\n    transform:rotateX(0deg) rotateY(-35deg) rotateZ(2deg);\r\n}\r\n\r\n.material-copy h2{\r\n    margin-bottom:25px;\r\n}\r\n\r\n.material-copy > p{\r\n    color:var(--muted);\r\n    line-height:1.9;\r\n    margin-bottom:35px;\r\n}\r\n\r\n.material-options{\r\n    display:grid;\r\n    grid-template-columns:repeat(4,1fr);\r\n    gap:10px;\r\n}\r\n\r\n.material-option{\r\n    border:0;\r\n    background:#f3f0eb;\r\n    padding:15px 8px;\r\n    cursor:pointer;\r\n    transition:.3s;\r\n}\r\n\r\n.material-option:hover,\r\n.material-option.active{\r\n    background:#1b1c1a;\r\n    color:#fff;\r\n}\r\n\r\n.material-option i{\r\n    width:38px;\r\n    height:38px;\r\n    display:block;\r\n    border-radius:50%;\r\n    margin:auto auto 10px;\r\n}\r\n\r\n.option-wood i{background:#9a7955}\r\n.option-stone i{background:#bdb8af}\r\n.option-fabric i{background:#d8d0c4}\r\n.option-metal i{background:#5b5b58}\r\n\r\n.material-result{\r\n    margin-top:30px;\r\n    padding:22px;\r\n    border-left:2px solid var(--accent);\r\n    background:#f8f6f2;\r\n}\r\n\r\n.material-result strong{\r\n    display:block;\r\n    font-family:\"Playfair Display\",serif;\r\n    font-size:23px;\r\n    font-weight:500;\r\n}\r\n\r\n.material-result span{\r\n    display:block;\r\n    color:var(--muted);\r\n    margin-top:5px;\r\n    font-size:12px;\r\n}\r\n\r\n\r\n\/* =========================\r\n   PROCESS 3D\r\n========================= *\/\r\n\r\n.process{\r\n    background:#121313;\r\n    color:#fff;\r\n}\r\n\r\n.process-title{\r\n    max-width:800px;\r\n}\r\n\r\n.process-title .section-copy{\r\n    margin-top:25px;\r\n    color:rgba(255,255,255,.52);\r\n}\r\n\r\n.process-3d{\r\n    margin-top:80px;\r\n    display:grid;\r\n    grid-template-columns:repeat(4,1fr);\r\n    gap:18px;\r\n}\r\n\r\n.process-card{\r\n    min-height:330px;\r\n    padding:28px;\r\n    border:1px solid rgba(255,255,255,.10);\r\n    background:linear-gradient(\r\n        145deg,\r\n        rgba(255,255,255,.05),\r\n        rgba(255,255,255,.015)\r\n    );\r\n    position:relative;\r\n    overflow:hidden;\r\n    transform-style:preserve-3d;\r\n    transition:.4s ease;\r\n}\r\n\r\n.process-card:hover{\r\n    transform:perspective(800px) rotateX(5deg) rotateY(-5deg) translateY(-8px);\r\n    border-color:rgba(183,154,114,.5);\r\n}\r\n\r\n.process-card-number{\r\n    font-size:10px;\r\n    color:#8e8e89;\r\n    letter-spacing:2px;\r\n}\r\n\r\n.process-icon{\r\n    width:80px;\r\n    height:80px;\r\n    border-radius:50%;\r\n    border:1px solid rgba(183,154,114,.45);\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    margin:55px 0 35px;\r\n    font-family:\"Playfair Display\",serif;\r\n    font-size:28px;\r\n    color:#c4a77f;\r\n    transform:translateZ(25px);\r\n    transition:.5s ease;\r\n}\r\n\r\n.process-card:hover .process-icon{\r\n    transform:translateZ(45px) rotateY(180deg);\r\n}\r\n\r\n.process-card h3{\r\n    font-family:\"Playfair Display\",serif;\r\n    font-size:27px;\r\n    font-weight:500;\r\n}\r\n\r\n.process-card p{\r\n    color:rgba(255,255,255,.47);\r\n    font-size:13px;\r\n    line-height:1.7;\r\n    margin-top:10px;\r\n}\r\n\r\n\r\n\/* =========================\r\n   CONSULTATION OUTPUT\r\n========================= *\/\r\n\r\n.output{\r\n    background:#f8f5f0;\r\n}\r\n\r\n.output-head{\r\n    text-align:center;\r\n    max-width:800px;\r\n    margin:0 auto 70px;\r\n}\r\n\r\n.output-head .section-copy{\r\n    margin:25px auto 0;\r\n}\r\n\r\n.output-grid{\r\n    display:grid;\r\n    grid-template-columns:repeat(3,1fr);\r\n    gap:18px;\r\n}\r\n\r\n.output-card{\r\n    position:relative;\r\n    min-height:390px;\r\n    overflow:hidden;\r\n    background:#ddd;\r\n}\r\n\r\n.output-card img{\r\n    height:100%;\r\n    object-fit:cover;\r\n    transition:1s ease;\r\n}\r\n\r\n.output-card:hover img{\r\n    transform:scale(1.08);\r\n}\r\n\r\n.output-overlay{\r\n    position:absolute;\r\n    inset:0;\r\n    display:flex;\r\n    align-items:flex-end;\r\n    padding:30px;\r\n    background:linear-gradient(transparent 35%,rgba(0,0,0,.8));\r\n    color:#fff;\r\n}\r\n\r\n.output-overlay h3{\r\n    font-family:\"Playfair Display\",serif;\r\n    font-size:28px;\r\n    font-weight:500;\r\n}\r\n\r\n.output-overlay p{\r\n    margin-top:5px;\r\n    color:rgba(255,255,255,.7);\r\n    font-size:12px;\r\n}\r\n\r\n\r\n\/* =========================\r\n   CTA\r\n========================= *\/\r\n\r\n.cta{\r\n    min-height:75vh;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    text-align:center;\r\n    background:\r\n        linear-gradient(rgba(0,0,0,.52),rgba(0,0,0,.62)),\r\n        url(\"https:\/\/images.unsplash.com\/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=2200&q=90\")\r\n        center\/cover fixed;\r\n    color:#fff;\r\n    position:relative;\r\n}\r\n\r\n.cta-inner{\r\n    max-width:900px;\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,7vw,100px);\r\n    line-height:.95;\r\n    letter-spacing:-4px;\r\n}\r\n\r\n.cta p{\r\n    max-width:560px;\r\n    margin:28px auto;\r\n    color:rgba(255,255,255,.72);\r\n    line-height:1.8;\r\n}\r\n\r\n.cta-button{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:15px;\r\n    margin-top:20px;\r\n    padding:17px 27px;\r\n    border:1px solid rgba(255,255,255,.35);\r\n    border-radius:50px;\r\n    background:rgba(255,255,255,.08);\r\n    backdrop-filter:blur(12px);\r\n    transition:.35s;\r\n    text-transform:uppercase;\r\n    letter-spacing:2px;\r\n    font-size:10px;\r\n}\r\n\r\n.cta-button:hover{\r\n    background:#fff;\r\n    color:#111;\r\n    transform:translateY(-4px);\r\n}\r\n\r\n.cta-arrow{\r\n    font-size:17px;\r\n}\r\n\r\n\r\n\/* =========================\r\n   RESPONSIVE\r\n========================= *\/\r\n\r\n@media(max-width:1000px){\r\n\r\n    .section{\r\n        padding:90px 5vw;\r\n    }\r\n\r\n    .intro-grid,\r\n    .human-grid,\r\n    .material-layout,\r\n    .discovery-head{\r\n        grid-template-columns:1fr;\r\n        gap:55px;\r\n    }\r\n\r\n    .discovery-grid{\r\n        grid-template-columns:repeat(2,1fr);\r\n    }\r\n\r\n    .process-3d{\r\n        grid-template-columns:repeat(2,1fr);\r\n    }\r\n\r\n    .output-grid{\r\n        grid-template-columns:1fr 1fr;\r\n    }\r\n\r\n    .intro-visual{\r\n        max-width:700px;\r\n    }\r\n\r\n    .human-image{\r\n        height:550px;\r\n    }\r\n\r\n    .material-stage{\r\n        order:2;\r\n    }\r\n\r\n    .material-copy{\r\n        order:1;\r\n    }\r\n}\r\n\r\n@media(max-width:700px){\r\n\r\n    .section{\r\n        padding:75px 22px;\r\n    }\r\n\r\n    .section-title{\r\n        font-size:46px;\r\n        letter-spacing:-1.5px;\r\n    }\r\n\r\n    .hero-content{\r\n        padding:90px 22px 60px;\r\n    }\r\n\r\n    .hero h1{\r\n        font-size:clamp(58px,17vw,100px);\r\n        letter-spacing:-4px;\r\n    }\r\n\r\n    .hero-description{\r\n        font-size:15px;\r\n    }\r\n\r\n    .intro-image{\r\n        width:100%;\r\n        height:430px;\r\n    }\r\n\r\n    .intro-visual{\r\n        min-height:490px;\r\n    }\r\n\r\n    .floating-note{\r\n        width:210px;\r\n        right:15px;\r\n        bottom:20px;\r\n        padding:22px;\r\n    }\r\n\r\n    .mini-points{\r\n        grid-template-columns:1fr;\r\n    }\r\n\r\n    .dark-heading{\r\n        display:block;\r\n    }\r\n\r\n    .dark-heading .section-copy{\r\n        margin-top:25px;\r\n    }\r\n\r\n    .scene{\r\n        height:500px;\r\n        transform:scale(.82);\r\n        transform-origin:center;\r\n        margin:-40px -50px;\r\n    }\r\n\r\n    .consultation-room{\r\n        width:420px;\r\n    }\r\n\r\n    .scene-label{\r\n        display:none;\r\n    }\r\n\r\n    .discovery-grid{\r\n        grid-template-columns:1fr;\r\n    }\r\n\r\n    .discovery-card{\r\n        min-height:250px;\r\n    }\r\n\r\n    .discovery-card h3{\r\n        margin-top:65px;\r\n    }\r\n\r\n    .human-image{\r\n        height:440px;\r\n    }\r\n\r\n    .material-layout{\r\n        gap:25px;\r\n    }\r\n\r\n    .material-stage{\r\n        height:430px;\r\n    }\r\n\r\n    .material-stack{\r\n        transform:scale(.75) rotateX(12deg) rotateY(-25deg);\r\n    }\r\n\r\n    .material-options{\r\n        grid-template-columns:1fr 1fr;\r\n    }\r\n\r\n    .process-3d{\r\n        grid-template-columns:1fr;\r\n    }\r\n\r\n    .process-card{\r\n        min-height:280px;\r\n    }\r\n\r\n    .process-icon{\r\n        margin:40px 0 25px;\r\n    }\r\n\r\n    .output-grid{\r\n        grid-template-columns:1fr;\r\n    }\r\n\r\n    .output-card{\r\n        min-height:420px;\r\n    }\r\n\r\n    .cta{\r\n        min-height:70vh;\r\n        background-attachment:scroll;\r\n    }\r\n\r\n    .cta h2{\r\n        font-size:58px;\r\n        letter-spacing:-2px;\r\n    }\r\n}\r\n\r\n@media(max-width:420px){\r\n\r\n    .hero h1{\r\n        font-size:57px;\r\n    }\r\n\r\n    .section-title{\r\n        font-size:40px;\r\n    }\r\n\r\n    .scene{\r\n        transform:scale(.66);\r\n        margin:-80px -85px;\r\n    }\r\n\r\n    .material-stack{\r\n        transform:scale(.62) rotateX(12deg) rotateY(-25deg);\r\n    }\r\n\r\n    .human-image{\r\n        height:380px;\r\n    }\r\n\r\n    .cta h2{\r\n        font-size:48px;\r\n    }\r\n}\r\n\r\n@media(prefers-reduced-motion:reduce){\r\n\r\n    *,\r\n    *::before,\r\n    *::after{\r\n        scroll-behavior:auto!important;\r\n        animation-duration:.01ms!important;\r\n        animation-iteration-count:1!important;\r\n        transition-duration:.01ms!important;\r\n    }\r\n\r\n    .reveal{\r\n        opacity:1;\r\n        transform:none;\r\n    }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<!-- =========================================================\r\n     HERO\r\n========================================================= -->\r\n\r\n<section class=\"hero\">\r\n\r\n    <div class=\"hero-bg\" id=\"heroBg\"><\/div>\r\n\r\n    <div class=\"hero-content\">\r\n\r\n        <div class=\"hero-tag\">\r\n            <span><\/span>\r\n            Urban Fitouts UAE\r\n        <\/div>\r\n\r\n        <h1>\r\n            Start with a<br>\r\n            <em>conversation.<\/em>\r\n        <\/h1>\r\n\r\n        <p class=\"hero-description\">\r\n            Great interiors begin with understanding. Our design consultation\r\n            brings together your lifestyle, ambitions, preferences and space\r\n            to create a clear direction for your interior journey.\r\n        <\/p>\r\n\r\n        <div class=\"hero-scroll\">\r\n            <span class=\"scroll-line\"><\/span>\r\n            Explore consultation\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=\"section intro\">\r\n\r\n    <div class=\"container intro-grid\">\r\n\r\n        <div class=\"intro-visual reveal\">\r\n\r\n            <img decoding=\"async\"\r\n                class=\"intro-image\"\r\n                src=\"https:\/\/images.unsplash.com\/photo-1497366412874-3415097a27e7?auto=format&fit=crop&w=1400&q=85\"\r\n                alt=\"Luxury workspace consultation\"\r\n            >\r\n\r\n            <div class=\"floating-note\">\r\n                <strong>Listen first.<\/strong>\r\n                <span>\r\n                    Before materials, drawings or construction,\r\n                    we understand the person behind the space.\r\n                <\/span>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"intro-content reveal\">\r\n\r\n            <div class=\"eyebrow\">\r\n                The beginning\r\n            <\/div>\r\n\r\n            <h2 class=\"section-title\">\r\n                Design starts<br>\r\n                with understanding.\r\n            <\/h2>\r\n\r\n            <p>\r\n                A consultation is more than discussing colours and furniture.\r\n                It is where we discover how you live, work, move, relax,\r\n                entertain and experience your surroundings.\r\n            <\/p>\r\n\r\n            <p>\r\n                Our team transforms those conversations into a meaningful\r\n                design direction \u2014 balancing beauty, functionality,\r\n                personality and the practical realities of your space.\r\n            <\/p>\r\n\r\n            <div class=\"mini-points\">\r\n\r\n                <div class=\"mini-point\">\r\n                    Lifestyle discovery\r\n                <\/div>\r\n\r\n                <div class=\"mini-point\">\r\n                    Space understanding\r\n                <\/div>\r\n\r\n                <div class=\"mini-point\">\r\n                    Style direction\r\n                <\/div>\r\n\r\n                <div class=\"mini-point\">\r\n                    Project clarity\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     3D INTERACTIVE CONSULTATION\r\n========================================================= -->\r\n\r\n<section class=\"section consultation-3d\">\r\n\r\n    <div class=\"container\">\r\n\r\n        <div class=\"dark-heading reveal\">\r\n\r\n            <div>\r\n                <div class=\"eyebrow\">\r\n                    Interactive experience\r\n                <\/div>\r\n\r\n                <h2 class=\"section-title\">\r\n                    Your ideas,<br>\r\n                    on the table.\r\n                <\/h2>\r\n            <\/div>\r\n\r\n            <p class=\"section-copy\">\r\n                Move around the consultation scene to explore the environment\r\n                where ideas become tangible. Discuss layouts, materials,\r\n                proportions, mood and possibilities together.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"scene reveal\" id=\"scene\">\r\n\r\n            <div class=\"scene-floor\"><\/div>\r\n\r\n            <div class=\"consultation-room\" id=\"consultationRoom\">\r\n\r\n                <div class=\"table\">\r\n\r\n                    <div class=\"table-top\"><\/div>\r\n\r\n                    <div class=\"table-leg leg1\"><\/div>\r\n                    <div class=\"table-leg leg2\"><\/div>\r\n\r\n                    <div class=\"laptop\">\r\n                        <div class=\"laptop-screen\"><\/div>\r\n                        <div class=\"laptop-base\"><\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"chair chair-a\"><\/div>\r\n                <div class=\"chair chair-b\"><\/div>\r\n\r\n\r\n                <div class=\"material-board\">\r\n\r\n                    <div class=\"swatch sw1\"><\/div>\r\n                    <div class=\"swatch sw2\"><\/div>\r\n                    <div class=\"swatch sw3\"><\/div>\r\n                    <div class=\"swatch sw4\"><\/div>\r\n                    <div class=\"swatch sw5\"><\/div>\r\n                    <div class=\"swatch sw6\"><\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"scene-label label-1\">\r\n                Your lifestyle\r\n            <\/div>\r\n\r\n            <div class=\"scene-label label-2\">\r\n                Material direction\r\n            <\/div>\r\n\r\n            <div class=\"scene-label label-3\">\r\n                Space planning\r\n            <\/div>\r\n\r\n            <div class=\"drag-hint\">\r\n                Drag \/ move to explore\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     DISCOVERY\r\n========================================================= -->\r\n\r\n<section class=\"section discovery\">\r\n\r\n    <div class=\"container\">\r\n\r\n        <div class=\"discovery-head reveal\">\r\n\r\n            <div>\r\n\r\n                <div class=\"eyebrow\">\r\n                    Discovery\r\n                <\/div>\r\n\r\n                <h2 class=\"section-title\">\r\n                    We ask the<br>\r\n                    right questions.\r\n                <\/h2>\r\n\r\n            <\/div>\r\n\r\n            <p class=\"section-copy\">\r\n                Every project has a story. Our consultation process explores\r\n                the details that make your space different \u2014 from everyday\r\n                routines to the feeling you want when you walk through\r\n                the door.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"discovery-grid\">\r\n\r\n            <div class=\"discovery-card reveal\">\r\n\r\n                <div class=\"card-number\">01 \/ YOU<\/div>\r\n\r\n                <div class=\"card-orb\"><\/div>\r\n\r\n                <h3>Your lifestyle<\/h3>\r\n\r\n                <p>\r\n                    How you live, work, host, relax and move through your space.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"discovery-card reveal\">\r\n\r\n                <div class=\"card-number\">02 \/ SPACE<\/div>\r\n\r\n                <div class=\"card-orb\"><\/div>\r\n\r\n                <h3>Your space<\/h3>\r\n\r\n                <p>\r\n                    Dimensions, architecture, circulation, light and\r\n                    functional opportunities.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"discovery-card reveal\">\r\n\r\n                <div class=\"card-number\">03 \/ STYLE<\/div>\r\n\r\n                <div class=\"card-orb\"><\/div>\r\n\r\n                <h3>Your taste<\/h3>\r\n\r\n                <p>\r\n                    Colours, textures, forms and visual references that\r\n                    naturally connect with you.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"discovery-card reveal\">\r\n\r\n                <div class=\"card-number\">04 \/ PURPOSE<\/div>\r\n\r\n                <div class=\"card-orb\"><\/div>\r\n\r\n                <h3>Your goals<\/h3>\r\n\r\n                <p>\r\n                    What the space needs to achieve today and how it should\r\n                    support you tomorrow.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"discovery-card reveal\">\r\n\r\n                <div class=\"card-number\">05 \/ FEELING<\/div>\r\n\r\n                <div class=\"card-orb\"><\/div>\r\n\r\n                <h3>Your atmosphere<\/h3>\r\n\r\n                <p>\r\n                    Calm, energetic, luxurious, welcoming, productive or\r\n                    something entirely your own.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"discovery-card reveal\">\r\n\r\n                <div class=\"card-number\">06 \/ VISION<\/div>\r\n\r\n                <div class=\"card-orb\"><\/div>\r\n\r\n                <h3>Your direction<\/h3>\r\n\r\n                <p>\r\n                    A clear design language that connects every future\r\n                    decision.\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     HUMAN CENTRED\r\n========================================================= -->\r\n\r\n<section class=\"section human\">\r\n\r\n    <div class=\"container human-grid\">\r\n\r\n        <div class=\"reveal\">\r\n\r\n            <img decoding=\"async\"\r\n                class=\"human-image\"\r\n                src=\"https:\/\/images.unsplash.com\/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1500&q=85\"\r\n                alt=\"Human centred interior consultation\"\r\n            >\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"human-content reveal\">\r\n\r\n            <div class=\"eyebrow\">\r\n                Human centred\r\n            <\/div>\r\n\r\n            <h2 class=\"section-title\">\r\n                The space should<br>\r\n                feel like you.\r\n            <\/h2>\r\n\r\n            <p>\r\n                Trends can inspire. Images can communicate. But your space\r\n                should ultimately respond to your own personality and the way\r\n                you experience everyday life.\r\n            <\/p>\r\n\r\n            <div class=\"human-list\">\r\n\r\n                <div class=\"human-item\">\r\n                    <span>01<\/span>\r\n                    <strong>Understand how you actually use the space.<\/strong>\r\n                <\/div>\r\n\r\n                <div class=\"human-item\">\r\n                    <span>02<\/span>\r\n                    <strong>Identify what currently works \u2014 and what doesn't.<\/strong>\r\n                <\/div>\r\n\r\n                <div class=\"human-item\">\r\n                    <span>03<\/span>\r\n                    <strong>Discover the atmosphere you naturally connect with.<\/strong>\r\n                <\/div>\r\n\r\n                <div class=\"human-item\">\r\n                    <span>04<\/span>\r\n                    <strong>Turn personal preferences into a design language.<\/strong>\r\n                <\/div>\r\n\r\n                <div class=\"human-item\">\r\n                    <span>05<\/span>\r\n                    <strong>Create clarity before making major decisions.<\/strong>\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 INTERACTION\r\n========================================================= -->\r\n\r\n<section class=\"section materials\">\r\n\r\n    <div class=\"container material-layout\">\r\n\r\n        <div class=\"material-stage reveal\">\r\n\r\n            <div class=\"material-stack\">\r\n\r\n                <div class=\"material-sheet sheet1\"><\/div>\r\n                <div class=\"material-sheet sheet2\"><\/div>\r\n                <div class=\"material-sheet sheet3\"><\/div>\r\n                <div class=\"material-sheet sheet4\"><\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"material-copy reveal\">\r\n\r\n            <div class=\"eyebrow\">\r\n                Material direction\r\n            <\/div>\r\n\r\n            <h2 class=\"section-title\">\r\n                Feel the<br>\r\n                possibilities.\r\n            <\/h2>\r\n\r\n            <p>\r\n                Materials influence the way a space feels as much as its\r\n                architecture. During consultation, we explore tactile,\r\n                visual and practical options to create a balanced material\r\n                palette.\r\n            <\/p>\r\n\r\n            <div class=\"material-options\">\r\n\r\n                <button class=\"material-option option-wood active\"\r\n                        data-name=\"Natural Wood\"\r\n                        data-desc=\"Warm, organic and timeless.\">\r\n                    <i><\/i>\r\n                    Wood\r\n                <\/button>\r\n\r\n                <button class=\"material-option option-stone\"\r\n                        data-name=\"Natural Stone\"\r\n                        data-desc=\"Quiet, grounded and sophisticated.\">\r\n                    <i><\/i>\r\n                    Stone\r\n                <\/button>\r\n\r\n                <button class=\"material-option option-fabric\"\r\n                        data-name=\"Soft Fabric\"\r\n                        data-desc=\"Comfortable, tactile and inviting.\">\r\n                    <i><\/i>\r\n                    Fabric\r\n                <\/button>\r\n\r\n                <button class=\"material-option option-metal\"\r\n                        data-name=\"Architectural Metal\"\r\n                        data-desc=\"Precise, contemporary and refined.\">\r\n                    <i><\/i>\r\n                    Metal\r\n                <\/button>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"material-result\">\r\n\r\n                <strong id=\"materialName\">\r\n                    Natural Wood\r\n                <\/strong>\r\n\r\n                <span id=\"materialDesc\">\r\n                    Warm, organic and timeless.\r\n                <\/span>\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=\"section process\">\r\n\r\n    <div class=\"container\">\r\n\r\n        <div class=\"process-title reveal\">\r\n\r\n            <div class=\"eyebrow\">\r\n                Consultation journey\r\n            <\/div>\r\n\r\n            <h2 class=\"section-title\">\r\n                From conversation<br>\r\n                to clear direction.\r\n            <\/h2>\r\n\r\n            <p class=\"section-copy\">\r\n                A thoughtful process keeps creativity focused and every\r\n                decision connected.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"process-3d\">\r\n\r\n            <div class=\"process-card reveal\">\r\n\r\n                <div class=\"process-card-number\">STEP 01<\/div>\r\n\r\n                <div class=\"process-icon\">01<\/div>\r\n\r\n                <h3>Understand<\/h3>\r\n\r\n                <p>\r\n                    We listen to your needs, lifestyle, challenges,\r\n                    aspirations and expectations.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"process-card reveal\">\r\n\r\n                <div class=\"process-card-number\">STEP 02<\/div>\r\n\r\n                <div class=\"process-icon\">02<\/div>\r\n\r\n                <h3>Explore<\/h3>\r\n\r\n                <p>\r\n                    We explore spatial possibilities, style directions,\r\n                    materials and functional opportunities.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"process-card reveal\">\r\n\r\n                <div class=\"process-card-number\">STEP 03<\/div>\r\n\r\n                <div class=\"process-icon\">03<\/div>\r\n\r\n                <h3>Define<\/h3>\r\n\r\n                <p>\r\n                    Ideas become a focused design direction with a stronger\r\n                    sense of identity and purpose.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"process-card reveal\">\r\n\r\n                <div class=\"process-card-number\">STEP 04<\/div>\r\n\r\n                <div class=\"process-icon\">04<\/div>\r\n\r\n                <h3>Move forward<\/h3>\r\n\r\n                <p>\r\n                    With clarity established, the project can progress into\r\n                    detailed design and implementation.\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     CONSULTATION OUTPUT\r\n========================================================= -->\r\n\r\n<section class=\"section output\">\r\n\r\n    <div class=\"container\">\r\n\r\n        <div class=\"output-head reveal\">\r\n\r\n            <div class=\"eyebrow\">\r\n                What consultation creates\r\n            <\/div>\r\n\r\n            <h2 class=\"section-title\">\r\n                A clearer vision<br>\r\n                for your space.\r\n            <\/h2>\r\n\r\n            <p class=\"section-copy\">\r\n                The goal isn't simply to collect ideas. It is to create\r\n                confidence around what your space can become.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"output-grid\">\r\n\r\n            <div class=\"output-card reveal\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/images.unsplash.com\/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1200&q=85\"\r\n                    alt=\"Interior design direction\"\r\n                >\r\n\r\n                <div class=\"output-overlay\">\r\n                    <div>\r\n                        <h3>Design Direction<\/h3>\r\n                        <p>A visual language shaped around you.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"output-card reveal\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/images.unsplash.com\/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=1200&q=85\"\r\n                    alt=\"Interior space planning\"\r\n                >\r\n\r\n                <div class=\"output-overlay\">\r\n                    <div>\r\n                        <h3>Spatial Thinking<\/h3>\r\n                        <p>Better relationships between people and space.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"output-card reveal\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/images.unsplash.com\/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=1200&q=85\"\r\n                    alt=\"Interior material palette\"\r\n                >\r\n\r\n                <div class=\"output-overlay\">\r\n                    <div>\r\n                        <h3>Material Mood<\/h3>\r\n                        <p>A tactile palette that gives the concept character.<\/p>\r\n                    <\/div>\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     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\" style=\"justify-content:center;color:#d2b78d;\">\r\n            Your space starts here\r\n        <\/div>\r\n\r\n        <h2>\r\n            Let's talk<br>\r\n            about your space.\r\n        <\/h2>\r\n\r\n        <p>\r\n            Bring your ideas, references, questions or even uncertainty.\r\n            We'll help turn the conversation into a direction.\r\n        <\/p>\r\n\r\n        <a href=\"#\"\r\n           class=\"cta-button\">\r\n            Begin your consultation\r\n            <span class=\"cta-arrow\">\u2197<\/span>\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 revealItems = document.querySelectorAll(\".reveal\");\r\n\r\nconst revealObserver = new IntersectionObserver(\r\n    entries => {\r\n        entries.forEach(entry => {\r\n\r\n            if(entry.isIntersecting){\r\n                entry.target.classList.add(\"active\");\r\n                revealObserver.unobserve(entry.target);\r\n\r\n            }\r\n\r\n        });\r\n    },\r\n    {\r\n        threshold:.12\r\n    }\r\n);\r\n\r\nrevealItems.forEach(item => revealObserver.observe(item));\r\n\r\n\r\n\/* =========================================\r\n   HERO PARALLAX\r\n========================================= *\/\r\n\r\nconst heroBg = document.getElementById(\"heroBg\");\r\n\r\nwindow.addEventListener(\"scroll\",()=>{\r\n\r\n    if(!heroBg) return;\r\n\r\n    const scroll = window.scrollY;\r\n\r\n    if(scroll < window.innerHeight){\r\n\r\n        heroBg.style.transform =\r\n            `scale(1.05) translateY(${scroll * .10}px)`;\r\n\r\n    }\r\n\r\n});\r\n\r\n\r\n\/* =========================================\r\n   3D CONSULTATION ROOM\r\n========================================= *\/\r\n\r\nconst scene = document.getElementById(\"scene\");\r\nconst room = document.getElementById(\"consultationRoom\");\r\n\r\nlet targetX = -25;\r\nlet targetY = 7;\r\n\r\nlet currentX = targetX;\r\nlet currentY = targetY;\r\n\r\nfunction animateRoom(){\r\n\r\n    currentX += (targetX - currentX) * .08;\r\n    currentY += (targetY - currentY) * .08;\r\n\r\n    room.style.transform =\r\n        `rotateX(${currentY}deg) rotateY(${currentX}deg)`;\r\n\r\n    requestAnimationFrame(animateRoom);\r\n}\r\n\r\nanimateRoom();\r\n\r\n\r\nscene.addEventListener(\"pointermove\",(e)=>{\r\n\r\n    const rect = scene.getBoundingClientRect();\r\n\r\n    const x =\r\n        (e.clientX - rect.left) \/\r\n        rect.width;\r\n\r\n    const y =\r\n        (e.clientY - rect.top) \/\r\n        rect.height;\r\n\r\n    targetX = -35 + x * 25;\r\n    targetY = 15 - y * 12;\r\n\r\n});\r\n\r\n\r\nscene.addEventListener(\"pointerleave\",()=>{\r\n\r\n    targetX = -25;\r\n    targetY = 7;\r\n\r\n});\r\n\r\n\r\n\/* =========================================\r\n   MATERIAL SELECTOR\r\n========================================= *\/\r\n\r\nconst materialButtons =\r\n    document.querySelectorAll(\".material-option\");\r\n\r\nconst materialName =\r\n    document.getElementById(\"materialName\");\r\n\r\nconst materialDesc =\r\n    document.getElementById(\"materialDesc\");\r\n\r\nmaterialButtons.forEach(button => {\r\n\r\n    button.addEventListener(\"click\",()=>{\r\n\r\n        materialButtons.forEach(item =>\r\n            item.classList.remove(\"active\")\r\n        );\r\n\r\n        button.classList.add(\"active\");\r\n\r\n        materialName.textContent =\r\n            button.dataset.name;\r\n\r\n        materialDesc.textContent =\r\n            button.dataset.desc;\r\n\r\n    });\r\n\r\n});\r\n\r\n\r\n\/* =========================================\r\n   3D PROCESS CARD TILT\r\n========================================= *\/\r\n\r\nconst processCards =\r\n    document.querySelectorAll(\".process-card\");\r\n\r\nprocessCards.forEach(card => {\r\n\r\n    card.addEventListener(\"pointermove\",(e)=>{\r\n\r\n        if(window.innerWidth < 700) return;\r\n\r\n        const rect =\r\n            card.getBoundingClientRect();\r\n\r\n        const x =\r\n            (e.clientX - rect.left) \/\r\n            rect.width;\r\n\r\n        const y =\r\n            (e.clientY - rect.top) \/\r\n            rect.height;\r\n\r\n        const rotateY =\r\n            (x - .5) * 8;\r\n\r\n        const rotateX =\r\n            (y - .5) * -8;\r\n\r\n        card.style.transform =\r\n            `perspective(800px)\r\n             rotateX(${rotateX}deg)\r\n             rotateY(${rotateY}deg)\r\n             translateY(-8px)`;\r\n\r\n    });\r\n\r\n    card.addEventListener(\"pointerleave\",()=>{\r\n\r\n        card.style.transform = \"\";\r\n\r\n    });\r\n\r\n});\r\n\r\n\r\n\/* =========================================\r\n   TOUCH RESET\r\n========================================= *\/\r\n\r\nlet touchStartX = 0;\r\n\r\nscene.addEventListener(\"touchstart\",(e)=>{\r\n\r\n    touchStartX =\r\n        e.touches[0].clientX;\r\n\r\n});\r\n\r\nscene.addEventListener(\"touchmove\",(e)=>{\r\n\r\n    const current =\r\n        e.touches[0].clientX;\r\n\r\n    const difference =\r\n        current - touchStartX;\r\n\r\n    targetX =\r\n        -25 + difference * .25;\r\n\r\n});\r\n\r\n\r\nscene.addEventListener(\"touchend\",()=>{\r\n\r\n    targetX = -25;\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 Design Consultation | Urban Fitouts UAE Urban Fitouts UAE Start with a conversation. Great interiors begin with understanding. Our [&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-344","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>Design Consultation - 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\/design-consultation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design Consultation - urbanfitouts.ae\" \/>\n<meta property=\"og:description\" content=\"&#8220;`html Design Consultation | Urban Fitouts UAE Urban Fitouts UAE Start with a conversation. Great interiors begin with understanding. Our [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/urbanfitouts.ae\/design-consultation\/\" \/>\n<meta property=\"og:site_name\" content=\"urbanfitouts.ae\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-20T12:04:22+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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/urbanfitouts.ae\\\/design-consultation\\\/\",\"url\":\"https:\\\/\\\/urbanfitouts.ae\\\/design-consultation\\\/\",\"name\":\"Design Consultation - urbanfitouts.ae\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/urbanfitouts.ae\\\/#website\"},\"datePublished\":\"2026-09-14T18:07:10+00:00\",\"dateModified\":\"2026-09-20T12:04:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/urbanfitouts.ae\\\/design-consultation\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/urbanfitouts.ae\\\/design-consultation\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/urbanfitouts.ae\\\/design-consultation\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/urbanfitouts.ae\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design Consultation\"}]},{\"@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":"Design Consultation - 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\/design-consultation\/","og_locale":"en_US","og_type":"article","og_title":"Design Consultation - urbanfitouts.ae","og_description":"&#8220;`html Design Consultation | Urban Fitouts UAE Urban Fitouts UAE Start with a conversation. Great interiors begin with understanding. Our [&hellip;]","og_url":"https:\/\/urbanfitouts.ae\/design-consultation\/","og_site_name":"urbanfitouts.ae","article_modified_time":"2026-09-20T12:04:22+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/urbanfitouts.ae\/design-consultation\/","url":"https:\/\/urbanfitouts.ae\/design-consultation\/","name":"Design Consultation - urbanfitouts.ae","isPartOf":{"@id":"https:\/\/urbanfitouts.ae\/#website"},"datePublished":"2026-09-14T18:07:10+00:00","dateModified":"2026-09-20T12:04:22+00:00","breadcrumb":{"@id":"https:\/\/urbanfitouts.ae\/design-consultation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/urbanfitouts.ae\/design-consultation\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/urbanfitouts.ae\/design-consultation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/urbanfitouts.ae\/"},{"@type":"ListItem","position":2,"name":"Design Consultation"}]},{"@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\/344","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=344"}],"version-history":[{"count":5,"href":"https:\/\/urbanfitouts.ae\/wp-json\/wp\/v2\/pages\/344\/revisions"}],"predecessor-version":[{"id":516,"href":"https:\/\/urbanfitouts.ae\/wp-json\/wp\/v2\/pages\/344\/revisions\/516"}],"wp:attachment":[{"href":"https:\/\/urbanfitouts.ae\/wp-json\/wp\/v2\/media?parent=344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}