{"id":20637,"date":"2026-06-25T17:16:12","date_gmt":"2026-06-25T17:16:12","guid":{"rendered":"https:\/\/gemmafj.com\/?page_id=20637"},"modified":"2026-06-29T12:30:17","modified_gmt":"2026-06-29T12:30:17","slug":"appointment","status":"publish","type":"page","link":"https:\/\/gemmafj.com\/index.php\/appointment\/","title":{"rendered":"APPOINTMENT"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nBook an Appointment \u2014 GEMMA Fine Jewelry<\/title>\r\n<meta name=\"description\" content=\"Reserve your private viewing or bespoke consultation at GEMMA Fine Jewelry. Showrooms in Dubai and Hong Kong.\">\r\n\r\n<script type=\"application\/ld+json\">\r\n{\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@type\": \"Event\",\r\n \"name\": \"GEMMA Fine Jewelry Private Viewing\",\r\n \"organizer\": { \"@type\": \"Organization\", \"name\": \"GEMMA Fine Jewelry\", \"url\": \"https:\/\/gemmafj.com\" },\r\n \"location\": [\r\n { \"@type\": \"Place\", \"name\": \"GEMMA Dubai\", \"address\": { \"@type\": \"PostalAddress\", \"streetAddress\": \"A304, Building 5, Dubai Design District\", \"addressLocality\": \"Dubai\", \"addressCountry\": \"AE\" } },\r\n { \"@type\": \"Place\", \"name\": \"GEMMA Hong Kong\", \"address\": { \"@type\": \"PostalAddress\", \"streetAddress\": \"Queens Road Central 54-56, Canton House, 20F\", \"addressLocality\": \"Central District\", \"addressCountry\": \"HK\" } }\r\n ]\r\n}\r\n<\/script>\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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Montserrat:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* \u2550\u2550 TOKENS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n:root {\r\n --w: #ffffff;\r\n --off: #f8f6f2;\r\n --offb: #f2ede4;\r\n --navy: #0d1b3e;\r\n --navy2: #111f48;\r\n --gold: #b8985a;\r\n --gold2: #d4b87a;\r\n --gold3: rgba(184,152,90,0.12);\r\n --ink: #1a1a1a;\r\n --muted: #6b6b6b;\r\n --border: #e8e2d9;\r\n --gbord: rgba(184,152,90,0.28);\r\n --ffd: 'Cormorant Garamond', Georgia, serif;\r\n --ffb: 'Montserrat', sans-serif;\r\n --ease: cubic-bezier(.4,0,.2,1);\r\n}\r\n\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\nhtml { scroll-behavior: smooth; }\r\nbody {\r\n font-family: var(--ffb);\r\n font-weight: 300;\r\n color: var(--ink);\r\n background: var(--w);\r\n -webkit-font-smoothing: antialiased;\r\n overflow-x: hidden;\r\n}\r\nimg { display: block; width: 100%; height: 100%; object-fit: cover; }\r\na { text-decoration: none; color: inherit; }\r\n\r\n\/* \u2550\u2550 REVEAL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.rv { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }\r\n.rv.on { opacity: 1; transform: translateY(0); }\r\n.rv.d1 { transition-delay: .1s; } .rv.d2 { transition-delay: .2s; }\r\n.rv.d3 { transition-delay: .3s; } .rv.d4 { transition-delay: .4s; }\r\n.rvl { opacity: 0; transform: translateX(-28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }\r\n.rvl.on { opacity: 1; transform: translateX(0); }\r\n.rvr { opacity: 0; transform: translateX(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }\r\n.rvr.on { opacity: 1; transform: translateX(0); }\r\n@media (prefers-reduced-motion: reduce) { .rv,.rvl,.rvr { opacity:1; transform:none; transition:none; } }\r\n\r\n\/* \u2550\u2550 UTILS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.eyebrow { font-size: 9px; font-weight: 500; letter-spacing: .45em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 12px; }\r\n.eyebrow.light { color: var(--gold2); }\r\n.gline { width: 44px; height: 1px; background: var(--gold); opacity: .5; margin: 22px 0; }\r\n.gline.c { margin: 22px auto; }\r\n\r\n\/* \u2550\u2550 1. HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hero {\r\n position: relative;\r\n min-height: 56vh;\r\n display: flex; align-items: center;\r\n overflow: hidden;\r\n background: var(--navy);\r\n}\r\n.hero-bg {\r\n position: absolute; inset: 0;\r\n background: url('https:\/\/images.unsplash.com\/photo-1617038260897-41a1f14a8ca0?w=1800&q=80') center\/cover no-repeat;\r\n opacity: .22;\r\n}\r\n.hero-bg::after {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background: linear-gradient(to right, rgba(13,27,62,.95) 40%, rgba(13,27,62,.4) 100%);\r\n}\r\n.hero-inner {\r\n position: relative; z-index: 2;\r\n max-width: 1200px; margin: 0 auto;\r\n padding: clamp(72px,10vw,120px) clamp(24px,5vw,80px);\r\n display: grid; grid-template-columns: 1fr 1fr;\r\n gap: 60px; align-items: center; width: 100%;\r\n}\r\n.hero-text h1 {\r\n font-family: var(--ffd);\r\n font-size: clamp(40px,5.5vw,72px);\r\n font-weight: 300; line-height: 1.06;\r\n color: var(--w); letter-spacing: .02em;\r\n margin-bottom: 20px;\r\n}\r\n.hero-text h1 em { font-style: italic; color: var(--gold2); }\r\n.hero-text p {\r\n font-size: 13px; font-weight: 300;\r\n letter-spacing: .06em; line-height: 1.85;\r\n color: rgba(255,255,255,.62); max-width: 420px;\r\n}\r\n.hero-steps {\r\n display: flex; flex-direction: column; gap: 0;\r\n}\r\n.hero-step {\r\n display: flex; gap: 20px; align-items: flex-start;\r\n padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.08);\r\n position: relative;\r\n}\r\n.hero-step:last-child { border-bottom: none; }\r\n.hs-num {\r\n font-family: var(--ffd); font-size: 28px; font-weight: 300;\r\n color: var(--gold); opacity: .5; line-height: 1;\r\n flex-shrink: 0; width: 32px;\r\n}\r\n.hs-text h4 {\r\n font-family: var(--ffd); font-size: 17px; font-weight: 500;\r\n color: var(--w); margin-bottom: 4px; letter-spacing: .02em;\r\n}\r\n.hs-text p {\r\n font-size: 11px; font-weight: 300; letter-spacing: .05em;\r\n line-height: 1.6; color: rgba(255,255,255,.5);\r\n}\r\n\r\n\/* \u2550\u2550 2. BOOKING ENGINE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.booking-wrap {\r\n max-width: 1200px; margin: 0 auto;\r\n padding: clamp(60px,8vw,100px) clamp(24px,5vw,80px);\r\n}\r\n.booking-head { text-align: center; margin-bottom: 56px; }\r\n.booking-head h2 {\r\n font-family: var(--ffd);\r\n font-size: clamp(28px,4vw,44px);\r\n font-weight: 300; color: var(--navy);\r\n letter-spacing: .03em; margin-bottom: 12px;\r\n}\r\n.booking-head p {\r\n font-size: 13px; font-weight: 300; color: var(--muted);\r\n letter-spacing: .06em; line-height: 1.8; max-width: 460px; margin: 0 auto;\r\n}\r\n\r\n\/* Step indicators *\/\r\n.steps-bar {\r\n display: flex; align-items: flex-start; justify-content: center;\r\n margin-bottom: 52px;\r\n gap: 0;\r\n}\r\n.step-ind {\r\n display: flex; flex-direction: column; align-items: center; gap: 10px;\r\n position: relative;\r\n min-width: 120px;\r\n}\r\n\/* connector line between circles *\/\r\n.step-connector {\r\n flex: 1; max-width: 100px; min-width: 40px;\r\n height: 1px; background: var(--border);\r\n margin-top: 20px; \/* align with circle center *\/\r\n transition: background .4s;\r\n flex-shrink: 0;\r\n}\r\n.step-connector.done { background: var(--gold); }\r\n.step-num {\r\n width: 40px; height: 40px; border-radius: 50%;\r\n border: 1px solid var(--border);\r\n display: flex; align-items: center; justify-content: center;\r\n font-family: var(--ffd); font-size: 16px; font-weight: 400;\r\n color: var(--muted); background: var(--w);\r\n transition: all .35s var(--ease);\r\n position: relative; z-index: 1;\r\n flex-shrink: 0;\r\n}\r\n.step-ind.active .step-num { border-color: var(--gold); color: var(--gold); background: rgba(184,152,90,.08); }\r\n.step-ind.done .step-num { border-color: var(--gold); background: var(--gold); color: var(--navy); }\r\n.step-label {\r\n font-size: 8px; font-weight: 500; letter-spacing: .22em;\r\n text-transform: uppercase; color: var(--muted);\r\n transition: color .35s; white-space: nowrap; text-align: center;\r\n padding: 0 4px;\r\n}\r\n.step-ind.active .step-label,\r\n.step-ind.done .step-label { color: var(--gold); }\r\n\r\n\/* Step panels *\/\r\n.step-panel { display: none; }\r\n.step-panel.active { display: block; }\r\n\r\n\/* \u2500\u2500 STEP 1: Appointment type \u2500\u2500 *\/\r\n.appt-types {\r\n display: grid; grid-template-columns: repeat(4,1fr); gap: 20px;\r\n margin-bottom: 40px;\r\n}\r\n.appt-card {\r\n border: 1px solid var(--border);\r\n padding: 32px 24px 28px; cursor: pointer;\r\n transition: all .3s var(--ease);\r\n position: relative; overflow: hidden;\r\n display: flex; flex-direction: column; gap: 16px;\r\n min-height: 280px;\r\n background: var(--w);\r\n}\r\n.appt-card::before {\r\n content: '';\r\n position: absolute; top: 0; left: 0; right: 0; height: 2px;\r\n background: var(--gold); transform: scaleX(0);\r\n transition: transform .3s var(--ease);\r\n}\r\n.appt-card:hover { border-color: var(--gbord); transform: translateY(-3px); box-shadow: 0 8px 32px rgba(184,152,90,.1); }\r\n.appt-card:hover::before,\r\n.appt-card.selected::before { transform: scaleX(1); }\r\n.appt-card.selected {\r\n border-color: var(--gold);\r\n background: rgba(184,152,90,.04);\r\n transform: translateY(-3px);\r\n box-shadow: 0 8px 32px rgba(184,152,90,.12);\r\n}\r\n.appt-card-icon {\r\n width: 44px; height: 44px; border: 1px solid var(--gbord);\r\n border-radius: 50%; display: flex; align-items: center; justify-content: center;\r\n color: var(--gold);\r\n}\r\n.appt-card-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.4; }\r\n.appt-card h3 { font-family: var(--ffd); font-size: 20px; font-weight: 500; color: var(--navy); letter-spacing: .02em; }\r\n.appt-card p { font-size: 11px; font-weight: 300; color: var(--muted); line-height: 1.75; letter-spacing: .04em; }\r\n.appt-card-duration {\r\n margin-top: auto;\r\n font-size: 9px; font-weight: 500; letter-spacing: .2em;\r\n text-transform: uppercase; color: var(--gold);\r\n display: flex; align-items: center; gap: 6px;\r\n}\r\n.appt-card-duration svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.5; }\r\n.appt-card .tick {\r\n position: absolute; top: 14px; right: 14px;\r\n width: 22px; height: 22px; border-radius: 50%;\r\n background: var(--gold); display: none; align-items: center; justify-content: center;\r\n}\r\n.appt-card .tick svg { width: 10px; height: 10px; stroke: var(--navy); fill: none; stroke-width: 2.5; }\r\n.appt-card.selected .tick { display: flex; }\r\n\r\n\/* \u2500\u2500 STEP 2: Location \u2500\u2500 *\/\r\n.location-pick {\r\n display: grid; grid-template-columns: 1fr 1fr; gap: 20px;\r\n margin-bottom: 40px;\r\n}\r\n.loc-card {\r\n border: 1px solid var(--border);\r\n display: grid; grid-template-columns: 200px 1fr;\r\n overflow: hidden; cursor: pointer;\r\n transition: all .3s var(--ease); position: relative;\r\n}\r\n.loc-card::before {\r\n content: '';\r\n position: absolute; top: 0; left: 0; bottom: 0; width: 2px;\r\n background: var(--gold); transform: scaleY(0);\r\n transition: transform .3s var(--ease);\r\n transform-origin: top;\r\n}\r\n.loc-card:hover { border-color: var(--gbord); box-shadow: 0 6px 24px rgba(184,152,90,.1); }\r\n.loc-card:hover::before,\r\n.loc-card.selected::before { transform: scaleY(1); }\r\n.loc-card.selected { border-color: var(--gold); background: rgba(184,152,90,.03); }\r\n.loc-img { overflow: hidden; min-height: 200px; height: 100%; }\r\n.loc-img img { height: 100%; min-height: 200px; object-fit: cover; transition: transform .6s var(--ease); }\r\n.loc-card:hover .loc-img img { transform: scale(1.05); }\r\n.loc-info { padding: 28px 28px; display: flex; flex-direction: column; gap: 8px; }\r\n.loc-info h3 { font-family: var(--ffd); font-size: 24px; font-weight: 400; color: var(--navy); }\r\n.loc-info .district { font-size: 9px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }\r\n.loc-info .addr { font-size: 11px; font-weight: 300; color: var(--muted); line-height: 1.7; letter-spacing: .04em; margin-top: 4px; }\r\n.loc-info .hours { font-size: 10px; font-weight: 400; color: var(--ink); letter-spacing: .05em; margin-top: 6px; display: flex; align-items: center; gap: 6px; }\r\n.loc-info .hours svg { width: 11px; height: 11px; stroke: var(--gold); fill: none; stroke-width: 1.5; }\r\n.loc-card .tick {\r\n position: absolute; top: 14px; right: 14px;\r\n width: 22px; height: 22px; border-radius: 50%;\r\n background: var(--gold); display: none; align-items: center; justify-content: center;\r\n}\r\n.loc-card .tick svg { width: 10px; height: 10px; stroke: var(--navy); fill: none; stroke-width: 2.5; }\r\n.loc-card.selected .tick { display: flex; }\r\n\r\n\/* \u2500\u2500 STEP 3: Calendly \u2500\u2500 *\/\r\n.calendly-wrap { background: var(--off); border: 1px solid var(--border); overflow: hidden; }\r\n.calendly-header {\r\n background: var(--navy); padding: 24px 32px;\r\n display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;\r\n}\r\n.calendly-header-left h3 { font-family: var(--ffd); font-size: 20px; font-weight: 400; color: var(--w); letter-spacing: .03em; }\r\n.calendly-header-left p { font-size: 10px; font-weight: 300; letter-spacing: .08em; color: rgba(255,255,255,.55); margin-top: 3px; }\r\n.calendly-badges { display: flex; gap: 10px; flex-wrap: wrap; }\r\n.cbadge {\r\n padding: 5px 12px; border: 1px solid rgba(184,152,90,.35);\r\n font-size: 9px; font-weight: 500; letter-spacing: .2em;\r\n text-transform: uppercase; color: var(--gold2);\r\n}\r\n.calendly-body {\r\n min-height: 620px; display: flex; align-items: center; justify-content: center;\r\n flex-direction: column; gap: 20px; padding: 60px 32px;\r\n text-align: center;\r\n}\r\n\/* REAL Calendly embed goes here \u2014 placeholder shown below *\/\r\n.calendly-placeholder {\r\n display: flex; flex-direction: column; align-items: center; gap: 20px;\r\n}\r\n.cal-icon {\r\n width: 80px; height: 80px; border: 1px solid var(--gbord); border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center; color: var(--gold);\r\n}\r\n.cal-icon svg { width: 36px; height: 36px; stroke: currentColor; fill: none; stroke-width: 1.2; }\r\n.calendly-placeholder h3 { font-family: var(--ffd); font-size: 26px; font-weight: 300; color: var(--navy); letter-spacing: .03em; }\r\n.calendly-placeholder p { font-size: 12px; font-weight: 300; color: var(--muted); letter-spacing: .05em; line-height: 1.8; max-width: 400px; }\r\n.cal-note {\r\n padding: 14px 24px; border: 1px solid var(--gbord);\r\n background: rgba(184,152,90,.05);\r\n font-size: 10px; font-weight: 400; letter-spacing: .06em;\r\n color: var(--gold); line-height: 1.6;\r\n}\r\n\r\n\/* Navigation buttons *\/\r\n.step-nav {\r\n display: flex; justify-content: space-between; align-items: center;\r\n margin-top: 36px; padding-top: 28px;\r\n border-top: 1px solid var(--border);\r\n}\r\n.btn-back {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n font-size: 10px; font-weight: 400; letter-spacing: .2em;\r\n text-transform: uppercase; color: var(--muted);\r\n cursor: pointer; background: none; border: none;\r\n transition: color .25s;\r\n}\r\n.btn-back:hover { color: var(--navy); }\r\n.btn-back svg { width: 14px; height: 10px; stroke: currentColor; fill: none; stroke-width: 1.4; }\r\n.btn-next {\r\n display: inline-flex; align-items: center; gap: 10px;\r\n padding: 14px 36px; background: var(--navy); color: var(--w);\r\n font-size: 10px; font-weight: 500; letter-spacing: .3em;\r\n text-transform: uppercase; cursor: pointer; border: none;\r\n transition: all .3s var(--ease);\r\n}\r\n.btn-next:hover { background: var(--gold); color: var(--navy); }\r\n.btn-next:disabled { opacity: .35; cursor: not-allowed; background: var(--navy); color: var(--w); }\r\n.btn-next svg { width: 14px; height: 10px; stroke: currentColor; fill: none; stroke-width: 1.4; }\r\n.selection-summary {\r\n font-size: 11px; font-weight: 300; letter-spacing: .05em;\r\n color: var(--muted); font-style: italic;\r\n}\r\n\r\n\/* \u2550\u2550 3. WHAT TO EXPECT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.expect {\r\n background: var(--navy);\r\n padding: clamp(60px,8vw,100px) clamp(24px,5vw,80px);\r\n}\r\n.expect-head { text-align: center; margin-bottom: 56px; }\r\n.expect-head h2 { font-family: var(--ffd); font-size: clamp(28px,4vw,44px); font-weight: 300; color: var(--w); letter-spacing: .03em; margin-bottom: 10px; }\r\n.expect-head p { font-size: 13px; font-weight: 300; color: rgba(255,255,255,.55); letter-spacing: .06em; line-height: 1.8; max-width: 440px; margin: 0 auto; }\r\n.expect-grid {\r\n display: grid; grid-template-columns: repeat(4,1fr); gap: 2px;\r\n max-width: 1100px; margin: 0 auto;\r\n}\r\n.exp-card {\r\n background: rgba(255,255,255,.03);\r\n border: 1px solid rgba(255,255,255,.07);\r\n padding: 40px 32px;\r\n display: flex; flex-direction: column; gap: 14px;\r\n transition: background .3s;\r\n}\r\n.exp-card:hover { background: rgba(184,152,90,.07); }\r\n.exp-step { font-family: var(--ffd); font-size: 42px; font-weight: 300; color: var(--gold); opacity: .35; line-height: 1; }\r\n.exp-card h3 { font-family: var(--ffd); font-size: 20px; font-weight: 500; color: var(--w); letter-spacing: .02em; }\r\n.exp-card p { font-size: 12px; font-weight: 300; color: rgba(255,255,255,.55); line-height: 1.8; letter-spacing: .04em; }\r\n\r\n\/* \u2550\u2550 4. APPOINTMENT TYPES DETAIL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.types-detail {\r\n background: var(--off);\r\n padding: clamp(60px,8vw,100px) clamp(24px,5vw,80px);\r\n}\r\n.types-detail-head { text-align: center; margin-bottom: 56px; }\r\n.types-detail-head h2 { font-family: var(--ffd); font-size: clamp(28px,4vw,44px); font-weight: 300; color: var(--navy); letter-spacing: .03em; margin-bottom: 10px; }\r\n.types-detail-head p { font-size: 13px; font-weight: 300; color: var(--muted); letter-spacing: .06em; line-height: 1.8; max-width: 440px; margin: 0 auto; }\r\n.types-grid {\r\n display: grid; grid-template-columns: 1fr 1fr; gap: 24px;\r\n max-width: 1100px; margin: 0 auto;\r\n}\r\n.type-card {\r\n background: var(--w); display: grid;\r\n grid-template-columns: 1fr 1fr; overflow: hidden;\r\n border: 1px solid var(--border);\r\n transition: box-shadow .3s;\r\n}\r\n.type-card:hover { box-shadow: 0 10px 36px rgba(184,152,90,.12); }\r\n.type-card-img { min-height: 260px; overflow: hidden; position: relative; }\r\n.type-card-img img { height: 100%; min-height: 260px; object-fit: cover; transition: transform .7s var(--ease); }\r\n.type-card:hover .type-card-img img { transform: scale(1.05); }\r\n.type-card-body { padding: 36px 32px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }\r\n.type-tag { font-size: 8px; font-weight: 500; letter-spacing: .35em; text-transform: uppercase; color: var(--gold); }\r\n.type-card-body h3 { font-family: var(--ffd); font-size: 24px; font-weight: 500; color: var(--navy); letter-spacing: .02em; line-height: 1.2; }\r\n.type-card-body p { font-size: 12px; font-weight: 300; color: var(--muted); line-height: 1.8; letter-spacing: .04em; }\r\n.type-meta { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--border); }\r\n.type-meta-row { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 300; letter-spacing: .06em; color: var(--muted); }\r\n.type-meta-row svg { width: 12px; height: 12px; stroke: var(--gold); fill: none; stroke-width: 1.5; flex-shrink: 0; }\r\n\r\n\/* \u2550\u2550 5. PREPARE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.prepare {\r\n padding: clamp(60px,8vw,100px) clamp(24px,5vw,80px);\r\n background: var(--w);\r\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;\r\n max-width: 1200px; margin: 0 auto;\r\n}\r\n.prepare-text h2 { font-family: var(--ffd); font-size: clamp(28px,4vw,44px); font-weight: 300; color: var(--navy); letter-spacing: .03em; line-height: 1.2; margin-bottom: 12px; }\r\n.prepare-text p { font-size: 13px; font-weight: 300; color: var(--muted); letter-spacing: .06em; line-height: 1.85; margin-bottom: 32px; }\r\n.prep-list { display: flex; flex-direction: column; gap: 16px; }\r\n.prep-item { display: flex; gap: 14px; align-items: flex-start; }\r\n.prep-num { font-family: var(--ffd); font-size: 18px; font-weight: 300; color: var(--gold); flex-shrink: 0; width: 24px; margin-top: 1px; }\r\n.prep-item-text h4 { font-family: var(--ffd); font-size: 17px; font-weight: 500; color: var(--navy); margin-bottom: 3px; letter-spacing: .01em; }\r\n.prep-item-text p { font-size: 12px; font-weight: 300; color: var(--muted); line-height: 1.7; letter-spacing: .04em; }\r\n.prepare-img { position: relative; overflow: hidden; border: 1px solid var(--border); }\r\n.prepare-img img { height: 520px; }\r\n.prepare-img-label {\r\n position: absolute; bottom: 0; left: 0; right: 0;\r\n padding: 18px 24px; background: linear-gradient(to top, rgba(13,27,62,.7), transparent);\r\n font-size: 9px; font-weight: 500; letter-spacing: .3em;\r\n text-transform: uppercase; color: var(--gold2);\r\n}\r\n\r\n\/* \u2550\u2550 6. LOCATIONS STRIP \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.locations {\r\n background: var(--navy);\r\n display: grid; grid-template-columns: 1fr 1fr;\r\n}\r\n.loc-strip-card {\r\n padding: clamp(44px,5vw,72px) clamp(28px,4vw,60px);\r\n border-right: 1px solid rgba(255,255,255,.08);\r\n display: flex; flex-direction: column; gap: 0;\r\n}\r\n.loc-strip-card:last-child { border-right: none; }\r\n.loc-strip-city { font-family: var(--ffd); font-size: clamp(28px,3.5vw,42px); font-weight: 300; color: var(--w); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }\r\n.loc-strip-region { font-size: 9px; font-weight: 500; letter-spacing: .35em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; }\r\n.loc-detail-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }\r\n.loc-detail-row svg { width: 13px; height: 13px; stroke: var(--gold); fill: none; stroke-width: 1.5; flex-shrink: 0; margin-top: 2px; }\r\n.loc-detail-row p { font-size: 12px; font-weight: 300; letter-spacing: .05em; color: rgba(255,255,255,.6); line-height: 1.65; }\r\n.loc-book-btn {\r\n display: inline-flex; align-items: center; gap: 10px;\r\n margin-top: 28px; padding: 12px 28px;\r\n border: 1px solid var(--gbord); color: var(--gold);\r\n font-size: 9px; font-weight: 500; letter-spacing: .25em;\r\n text-transform: uppercase; cursor: pointer;\r\n transition: all .3s var(--ease); background: none;\r\n}\r\n.loc-book-btn:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }\r\n.loc-book-btn svg { width: 13px; height: 9px; stroke: currentColor; fill: none; stroke-width: 1.4; }\r\n\r\n\/* \u2550\u2550 7. TESTIMONIAL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.testimonial {\r\n background: var(--off);\r\n padding: clamp(60px,8vw,100px) clamp(24px,5vw,80px);\r\n text-align: center;\r\n}\r\n.t-quote {\r\n font-family: var(--ffd);\r\n font-size: clamp(20px,3vw,32px);\r\n font-weight: 300; font-style: italic;\r\n color: var(--navy); line-height: 1.55;\r\n max-width: 760px; margin: 0 auto 28px;\r\n letter-spacing: .02em; position: relative;\r\n}\r\n.t-quote::before { content: '\\201C'; font-family: var(--ffd); font-size: 72px; line-height: 0; color: var(--gold); opacity: .25; position: absolute; top: 16px; left: -20px; }\r\n.t-attr { font-size: 10px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }\r\n.t-attr span { display: block; font-size: 10px; font-weight: 300; letter-spacing: .1em; color: var(--muted); text-transform: none; margin-top: 5px; }\r\n\r\n\/* \u2550\u2550 8. FAQ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.faq {\r\n padding: clamp(60px,8vw,100px) clamp(24px,5vw,80px);\r\n background: var(--w);\r\n display: grid; grid-template-columns: 320px 1fr; gap: 80px;\r\n max-width: 1200px; margin: 0 auto;\r\n}\r\n.faq-left h2 { font-family: var(--ffd); font-size: clamp(26px,3.5vw,40px); font-weight: 300; color: var(--navy); letter-spacing: .03em; line-height: 1.2; margin-bottom: 12px; }\r\n.faq-left p { font-size: 12px; font-weight: 300; color: var(--muted); letter-spacing: .05em; line-height: 1.85; }\r\n.faq-list { display: flex; flex-direction: column; }\r\n.faq-item { border-bottom: 1px solid var(--border); cursor: pointer; }\r\n.faq-item:first-child { border-top: 1px solid var(--border); }\r\n.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; }\r\n.faq-q span { font-family: var(--ffd); font-size: 18px; font-weight: 500; color: var(--navy); letter-spacing: .01em; }\r\n.faq-ico { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--gold); transition: all .3s; }\r\n.faq-ico svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .3s; }\r\n.faq-item.open .faq-ico { background: var(--gold); border-color: var(--gold); color: var(--navy); }\r\n.faq-item.open .faq-ico svg { transform: rotate(45deg); }\r\n.faq-a { max-height: 0; overflow: hidden; font-size: 13px; font-weight: 300; color: var(--muted); line-height: 1.85; letter-spacing: .04em; transition: max-height .4s var(--ease), padding .3s; }\r\n.faq-item.open .faq-a { max-height: 200px; padding-bottom: 20px; }\r\n\r\n\/* \u2550\u2550 9. FINAL CTA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.final-cta {\r\n background: var(--gold);\r\n padding: clamp(56px,8vw,100px) clamp(24px,5vw,80px);\r\n display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;\r\n}\r\n.final-cta h2 { font-family: var(--ffd); font-size: clamp(26px,4vw,46px); font-weight: 300; color: var(--navy); letter-spacing: .02em; margin-bottom: 10px; }\r\n.final-cta p { font-size: 13px; font-weight: 300; color: rgba(13,27,62,.68); letter-spacing: .05em; line-height: 1.75; max-width: 520px; }\r\n.final-cta-btns { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }\r\n.btn-cta-main { display: inline-block; padding: 15px 38px; background: var(--navy); color: var(--w); font-size: 10px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; transition: all .3s; }\r\n.btn-cta-main:hover { background: var(--ink); }\r\n.cta-or { font-size: 11px; font-weight: 300; letter-spacing: .08em; color: rgba(13,27,62,.6); white-space: nowrap; }\r\n\r\n\/* \u2550\u2550 RESPONSIVE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (max-width: 1100px) {\r\n .appt-types { grid-template-columns: repeat(2,1fr); gap: 16px; }\r\n .types-grid { grid-template-columns: 1fr; }\r\n .type-card { grid-template-columns: 200px 1fr; }\r\n .faq { grid-template-columns: 1fr; gap: 48px; }\r\n .step-ind { min-width: 100px; }\r\n .step-connector { max-width: 60px; min-width: 24px; }\r\n}\r\n@media (max-width: 900px) {\r\n .hero-inner { grid-template-columns: 1fr; gap: 40px; padding: 56px clamp(24px,5vw,56px); }\r\n .hero-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }\r\n .location-pick { grid-template-columns: 1fr; gap: 16px; }\r\n .loc-card { grid-template-columns: 160px 1fr; }\r\n .loc-img { min-height: 160px; }\r\n .expect-grid { grid-template-columns: 1fr 1fr; gap: 12px; }\r\n .prepare { grid-template-columns: 1fr; gap: 48px; }\r\n .prepare-img img { height: 340px; min-height: 340px; }\r\n .locations { grid-template-columns: 1fr; }\r\n .loc-strip-card { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }\r\n .final-cta { grid-template-columns: 1fr; gap: 32px; }\r\n .final-cta-btns { align-items: flex-start; }\r\n .step-ind { min-width: 80px; }\r\n .step-connector { max-width: 40px; min-width: 16px; }\r\n .step-label { font-size: 7px; letter-spacing: .15em; }\r\n}\r\n@media (max-width: 640px) {\r\n .appt-types { grid-template-columns: 1fr; gap: 12px; }\r\n .appt-card { min-height: auto; padding: 24px 20px; }\r\n .hero-steps { grid-template-columns: 1fr; }\r\n .loc-card { grid-template-columns: 1fr; }\r\n .loc-img { min-height: 180px; height: 180px; }\r\n .loc-img img { min-height: 180px; height: 180px; }\r\n .expect-grid { grid-template-columns: 1fr; gap: 10px; }\r\n .exp-card { padding: 28px 24px; }\r\n .type-card { grid-template-columns: 1fr; }\r\n .type-card-img { min-height: 200px; height: 200px; }\r\n .type-card-img img { min-height: 200px; height: 200px; }\r\n .type-card-body { padding: 24px 22px; }\r\n .steps-bar { gap: 0; }\r\n .step-ind { min-width: 60px; }\r\n .step-connector { max-width: 28px; min-width: 12px; }\r\n .step-label { font-size: 6.5px; letter-spacing: .1em; }\r\n .booking-wrap { padding-left: 20px; padding-right: 20px; }\r\n .step-nav { flex-direction: column; gap: 16px; align-items: stretch; }\r\n .step-nav .btn-next { justify-content: center; }\r\n .selection-summary { text-align: center; }\r\n .calendly-header { flex-direction: column; }\r\n .calendly-body { padding: 40px 20px; min-height: 400px; }\r\n .loc-info { padding: 20px; }\r\n .loc-info h3 { font-size: 20px; }\r\n}\r\n@media (max-width: 400px) {\r\n .step-label { display: none; }\r\n .step-ind { min-width: 44px; }\r\n .step-connector { max-width: 20px; min-width: 8px; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- \u2550\u2550 1. HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"hero\">\r\n <div class=\"hero-bg\"><\/div>\r\n <div class=\"hero-inner\">\r\n <div class=\"hero-text rv\">\r\n <span class=\"eyebrow light\">Private Appointments<\/span>\r\n <h1>Reserve Your<br><em>Experience<\/em><\/h1>\r\n <p>Every GEMMA appointment is crafted around you \u2014 your time, your preferences, your vision. Choose your experience below and we'll take care of everything else.<\/p>\r\n <\/div>\r\n <div class=\"hero-steps rv d2\">\r\n <div class=\"hero-step\">\r\n <div class=\"hs-num\">1<\/div>\r\n <div class=\"hs-text\"><h4>Choose Your Visit Type<\/h4><p>Private viewing, bespoke consultation, gift guidance, or general enquiry.<\/p><\/div>\r\n <\/div>\r\n <div class=\"hero-step\">\r\n <div class=\"hs-num\">2<\/div>\r\n <div class=\"hs-text\"><h4>Select a Location<\/h4><p>Dubai Design District or Hong Kong Central \u2014 both available.<\/p><\/div>\r\n <\/div>\r\n <div class=\"hero-step\">\r\n <div class=\"hs-num\">3<\/div>\r\n <div class=\"hs-text\"><h4>Pick Your Date & Time<\/h4><p>Choose from available slots that suit your schedule.<\/p><\/div>\r\n <\/div>\r\n <div class=\"hero-step\">\r\n <div class=\"hs-num\">4<\/div>\r\n <div class=\"hs-text\"><h4>Receive Confirmation<\/h4><p>Instant email confirmation with everything you need to know.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550 2. BOOKING ENGINE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div class=\"booking-wrap\">\r\n <div class=\"booking-head rv\">\r\n <span class=\"eyebrow\" style=\"justify-content:center;display:block\">Book Your Appointment<\/span>\r\n <h2>Three Simple Steps<\/h2>\r\n <p>Select your appointment type, choose a location, then pick a time that works for you.<\/p>\r\n <\/div>\r\n\r\n <!-- Step indicator bar -->\r\n <div class=\"steps-bar rv d1\">\r\n <div class=\"step-ind active\" id=\"ind-1\">\r\n <div class=\"step-num\">1<\/div>\r\n <span class=\"step-label\">Appointment Type<\/span>\r\n <\/div>\r\n <div class=\"step-connector\" id=\"conn-1\"><\/div>\r\n <div class=\"step-ind\" id=\"ind-2\">\r\n <div class=\"step-num\">2<\/div>\r\n <span class=\"step-label\">Location<\/span>\r\n <\/div>\r\n <div class=\"step-connector\" id=\"conn-2\"><\/div>\r\n <div class=\"step-ind\" id=\"ind-3\">\r\n <div class=\"step-num\">3<\/div>\r\n <span class=\"step-label\">Date & Time<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2500\u2500 STEP 1: Appointment Type \u2500\u2500 -->\r\n <div class=\"step-panel active\" id=\"step-1\">\r\n <div class=\"appt-types rv d2\">\r\n\r\n <div class=\"appt-card\" data-type=\"Private Viewing\" onclick=\"selectType(this)\">\r\n <div class=\"tick\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\r\n <div class=\"appt-card-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg><\/div>\r\n <h3>Private Viewing<\/h3>\r\n <p>Browse our full collection in a dedicated, unhurried session. We curate a selection in advance based on your preferences.<\/p>\r\n <div class=\"appt-card-duration\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>60 minutes<\/div>\r\n <\/div>\r\n\r\n <div class=\"appt-card\" data-type=\"Bespoke Consultation\" onclick=\"selectType(this)\">\r\n <div class=\"tick\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\r\n <div class=\"appt-card-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg><\/div>\r\n <h3>Bespoke Consultation<\/h3>\r\n <p>Commission a one-of-a-kind piece. Work with our designers from first concept to finished creation \u2014 entirely tailored to you.<\/p>\r\n <div class=\"appt-card-duration\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>90 minutes<\/div>\r\n <\/div>\r\n\r\n <div class=\"appt-card\" data-type=\"Gift Consultation\" onclick=\"selectType(this)\">\r\n <div class=\"tick\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\r\n <div class=\"appt-card-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M20 12v10H4V12\"\/><path d=\"M22 7H2v5h20V7z\"\/><path d=\"M12 22V7\"\/><path d=\"M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7z\"\/><path d=\"M12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z\"\/><\/svg><\/div>\r\n <h3>Gift Consultation<\/h3>\r\n <p>Finding the perfect gift for someone you love. Our team guides you through our collection with warmth and expertise.<\/p>\r\n <div class=\"appt-card-duration\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>45 minutes<\/div>\r\n <\/div>\r\n\r\n <div class=\"appt-card\" data-type=\"General Enquiry\" onclick=\"selectType(this)\">\r\n <div class=\"tick\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\r\n <div class=\"appt-card-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z\"\/><\/svg><\/div>\r\n <h3>General Enquiry<\/h3>\r\n <p>Have questions about a specific piece, pricing, care, or availability? Book a relaxed conversation with our team.<\/p>\r\n <div class=\"appt-card-duration\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>30 minutes<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <div class=\"step-nav\">\r\n <span class=\"selection-summary\" id=\"type-summary\">Please select an appointment type to continue<\/span>\r\n <button class=\"btn-next\" id=\"next-1\" disabled onclick=\"goStep(2)\">\r\n Continue to Location\r\n <svg viewBox=\"0 0 14 10\"><path d=\"M1 5h12M8 1l4 4-4 4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2500\u2500 STEP 2: Location \u2500\u2500 -->\r\n <div class=\"step-panel\" id=\"step-2\">\r\n <div class=\"location-pick rv\">\r\n\r\n <div class=\"loc-card\" data-loc=\"Dubai\" onclick=\"selectLoc(this)\">\r\n <div class=\"tick\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\r\n <div class=\"loc-img\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1558618666-fcd25c85cd64?w=400&q=80\" alt=\"Dubai showroom\"><\/div>\r\n <div class=\"loc-info\">\r\n <h3>Dubai<\/h3>\r\n <span class=\"district\">Dubai Design District<\/span>\r\n <p class=\"addr\">A304, Building 5<br>Dubai Design District, UAE<\/p>\r\n <p class=\"hours\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>Mon\u2013Sat, 10:00 AM \u2013 7:00 PM<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"loc-card\" data-loc=\"Hong Kong\" onclick=\"selectLoc(this)\">\r\n <div class=\"tick\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\r\n <div class=\"loc-img\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1605100804763-247f67b3557e?w=400&q=80\" alt=\"Hong Kong showroom\"><\/div>\r\n <div class=\"loc-info\">\r\n <h3>Hong Kong<\/h3>\r\n <span class=\"district\">Central District<\/span>\r\n <p class=\"addr\">Queens Road Central 54\u201356<br>Canton House, 20F, Hong Kong<\/p>\r\n <p class=\"hours\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>Mon\u2013Sat, 10:00 AM \u2013 7:00 PM<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <div class=\"step-nav\">\r\n <button class=\"btn-back\" onclick=\"goStep(1)\">\r\n <svg viewBox=\"0 0 14 10\"><path d=\"M13 5H1M6 1L2 5l4 4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n Back\r\n <\/button>\r\n <div style=\"display:flex;align-items:center;gap:24px;flex-wrap:wrap\">\r\n <span class=\"selection-summary\" id=\"loc-summary\">Please select a location to continue<\/span>\r\n <button class=\"btn-next\" id=\"next-2\" disabled onclick=\"goStep(3)\">\r\n Choose Date & Time\r\n <svg viewBox=\"0 0 14 10\"><path d=\"M1 5h12M8 1l4 4-4 4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2500\u2500 STEP 3: Calendly \u2500\u2500 -->\r\n <div class=\"step-panel\" id=\"step-3\">\r\n <div class=\"calendly-wrap rv\">\r\n <div class=\"calendly-header\">\r\n <div class=\"calendly-header-left\">\r\n <h3 id=\"cal-title\">Select Your Date & Time<\/h3>\r\n <p id=\"cal-subtitle\">GEMMA Fine Jewelry \u2014 Private Appointment<\/p>\r\n <\/div>\r\n <div class=\"calendly-badges\">\r\n <span class=\"cbadge\" id=\"cal-badge-type\">Private Viewing<\/span>\r\n <span class=\"cbadge\" id=\"cal-badge-loc\">Dubai<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n CALENDLY EMBED \u2014 Replace the placeholder below with:\r\n <div class=\"calendly-inline-widget\"\r\n data-url=\"https:\/\/calendly.com\/YOUR-ACCOUNT\/YOUR-EVENT\"\r\n style=\"min-width:320px;height:700px;\">\r\n <\/div>\r\n <script src=\"https:\/\/assets.calendly.com\/assets\/external\/widget.js\" async><\/script>\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <div class=\"calendly-body\">\r\n <div class=\"calendly-placeholder\">\r\n <div class=\"cal-icon\">\r\n <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><line x1=\"8\" y1=\"14\" x2=\"8\" y2=\"14\"\/><line x1=\"12\" y1=\"14\" x2=\"12\" y2=\"14\"\/><line x1=\"16\" y1=\"14\" x2=\"16\" y2=\"14\"\/><\/svg>\r\n <\/div>\r\n <h3>Calendly Booking Widget<\/h3>\r\n <p>Your Calendly scheduling widget will appear here once connected. Clients will be able to select available dates and times directly on this page.<\/p>\r\n <div class=\"cal-note\">\r\n \u2699\ufe0f To activate: replace this placeholder with your Calendly embed code.<br>\r\n Your Calendly URL: <strong>calendly.com\/gemmafj<\/strong>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step-nav\">\r\n <button class=\"btn-back\" onclick=\"goStep(2)\">\r\n <svg viewBox=\"0 0 14 10\"><path d=\"M13 5H1M6 1L2 5l4 4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n Back to Location\r\n <\/button>\r\n <span class=\"selection-summary\">Once booked you'll receive an email confirmation<\/span>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550 3. WHAT TO EXPECT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"expect\">\r\n <div class=\"expect-head rv\">\r\n <span class=\"eyebrow light\">The Experience<\/span>\r\n <h2>What Happens at Your Appointment<\/h2>\r\n <p>Every visit follows a thoughtful rhythm \u2014 unhurried, personal, and entirely focused on you.<\/p>\r\n <\/div>\r\n <div class=\"expect-grid\">\r\n <div class=\"exp-card rv\">\r\n <div class=\"exp-step\">01<\/div>\r\n <h3>We Welcome You<\/h3>\r\n <p>You're greeted personally upon arrival. Your appointment begins the moment you walk through our door \u2014 no waiting, no formalities.<\/p>\r\n <\/div>\r\n <div class=\"exp-card rv d1\">\r\n <div class=\"exp-step\">02<\/div>\r\n <h3>Curated Selection<\/h3>\r\n <p>Based on your preferences, we prepare a tailored selection in advance so your time is spent discovering pieces you'll love.<\/p>\r\n <\/div>\r\n <div class=\"exp-card rv d2\">\r\n <div class=\"exp-step\">03<\/div>\r\n <h3>Expert Guidance<\/h3>\r\n <p>Our specialists share the story and craftsmanship behind each piece, answering every question with honesty and warmth.<\/p>\r\n <\/div>\r\n <div class=\"exp-card rv d3\">\r\n <div class=\"exp-step\">04<\/div>\r\n <h3>Your Decision, Your Pace<\/h3>\r\n <p>No pressure, ever. Take all the time you need. Whether you leave with a piece or simply an idea, the experience is complete.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550 4. APPOINTMENT TYPES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"types-detail\">\r\n <div class=\"types-detail-head rv\">\r\n <span class=\"eyebrow\">Our Appointments<\/span>\r\n <h2>Choose the Right Experience<\/h2>\r\n <p>Every appointment type is designed for a specific purpose. Find the one that fits your visit.<\/p>\r\n <\/div>\r\n <div class=\"types-grid\">\r\n\r\n <div class=\"type-card rv\">\r\n <div class=\"type-card-img\"><img decoding=\"async\" src=\"https:\/\/gemmafj.com\/wp-content\/uploads\/2026\/06\/9EC56A27-3E07-44C0-B823-9B63BD7258E0.png\" alt=\"Private Viewing\"><\/div>\r\n <div class=\"type-card-body\">\r\n <span class=\"type-tag\">60 Minutes<\/span>\r\n <h3>Private Viewing<\/h3>\r\n <p>Designed for clients who want to explore our full collection without interruption. We curate a dedicated selection based on your interests before you arrive.<\/p>\r\n <div class=\"type-meta\">\r\n <div class=\"type-meta-row\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>60 minutes allocated<\/div>\r\n <div class=\"type-meta-row\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75\"\/><\/svg>Up to 3 guests welcome<\/div>\r\n <div class=\"type-meta-row\"><svg viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>Both showrooms available<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"type-card rv d1\">\r\n <div class=\"type-card-img\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1602173574767-37ac01994b2a?w=500&q=80\" alt=\"Bespoke Consultation\"><\/div>\r\n <div class=\"type-card-body\">\r\n <span class=\"type-tag\">90 Minutes<\/span>\r\n <h3>Bespoke Consultation<\/h3>\r\n <p>Commission something entirely your own. Our designers work with you from first sketch to finished piece \u2014 a deeply personal creative process.<\/p>\r\n <div class=\"type-meta\">\r\n <div class=\"type-meta-row\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>90 minutes recommended<\/div>\r\n <div class=\"type-meta-row\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>Concept to creation service<\/div>\r\n <div class=\"type-meta-row\"><svg viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>Dubai showroom primary<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"type-card rv d2\">\r\n <div class=\"type-card-img\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1535632787350-4e68ef0ac584?w=500&q=80\" alt=\"Gift Consultation\"><\/div>\r\n <div class=\"type-card-body\">\r\n <span class=\"type-tag\">45 Minutes<\/span>\r\n <h3>Gift Consultation<\/h3>\r\n <p>Finding the perfect piece for someone you love. We guide you through our collection with warmth, helping you choose with complete confidence.<\/p>\r\n <div class=\"type-meta\">\r\n <div class=\"type-meta-row\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>45 minutes allocated<\/div>\r\n <div class=\"type-meta-row\"><svg viewBox=\"0 0 24 24\"><path d=\"M20 12v10H4V12\"\/><path d=\"M22 7H2v5h20V7z\"\/><\/svg>Complimentary gift wrapping<\/div>\r\n <div class=\"type-meta-row\"><svg viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>Both showrooms available<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"type-card rv d3\">\r\n <div class=\"type-card-img\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1599643478518-a784e5dc4c8f?w=500&q=80\" alt=\"General Enquiry\"><\/div>\r\n <div class=\"type-card-body\">\r\n <span class=\"type-tag\">30 Minutes<\/span>\r\n <h3>General Enquiry<\/h3>\r\n <p>Questions about a specific piece, pricing, resizing, care, or availability. A relaxed conversation with a member of our knowledgeable team.<\/p>\r\n <div class=\"type-meta\">\r\n <div class=\"type-meta-row\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>30 minutes allocated<\/div>\r\n <div class=\"type-meta-row\"><svg viewBox=\"0 0 24 24\"><path d=\"M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z\"\/><\/svg>No commitment required<\/div>\r\n <div class=\"type-meta-row\"><svg viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>Both showrooms available<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550 5. PREPARE FOR YOUR VISIT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section style=\"background:var(--w);padding:clamp(60px,8vw,100px) clamp(24px,5vw,80px)\">\r\n <div class=\"prepare\" style=\"padding:0;max-width:1100px;margin:0 auto\">\r\n <div class=\"prepare-text rvl\">\r\n <span class=\"eyebrow\">Before You Arrive<\/span>\r\n <h2>How to Prepare for Your Visit<\/h2>\r\n <p>A little preparation helps us make the most of your time together. Here is everything you need to know before your appointment.<\/p>\r\n <div class=\"prep-list\">\r\n <div class=\"prep-item\">\r\n <span class=\"prep-num\">1<\/span>\r\n <div class=\"prep-item-text\"><h4>Share Your Preferences<\/h4><p>When booking, mention the occasion, metal preference, or any pieces you have in mind. We'll prepare accordingly.<\/p><\/div>\r\n <\/div>\r\n <div class=\"prep-item\">\r\n <span class=\"prep-num\">2<\/span>\r\n <div class=\"prep-item-text\"><h4>Bring Inspiration<\/h4><p>Screenshots, Pinterest boards, sketches \u2014 anything that captures the style or feeling you're looking for is incredibly helpful.<\/p><\/div>\r\n <\/div>\r\n <div class=\"prep-item\">\r\n <span class=\"prep-num\">3<\/span>\r\n <div class=\"prep-item-text\"><h4>Arrive Rested<\/h4><p>The best choices are made with a clear mind. Our showroom is calm and unhurried \u2014 take your time.<\/p><\/div>\r\n <\/div>\r\n <div class=\"prep-item\">\r\n <span class=\"prep-num\">4<\/span>\r\n <div class=\"prep-item-text\"><h4>No Budget Pressure<\/h4><p>Share your budget range if comfortable \u2014 it helps us narrow your selection. There is never any pressure here.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"prepare-img rvr\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1611591437281-460bfbe1220a?w=700&q=80\" alt=\"GEMMA showroom consultation\">\r\n <div class=\"prepare-img-label\">Inside GEMMA Dubai<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550 6. LOCATIONS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div class=\"locations\">\r\n <div class=\"loc-strip-card rv\">\r\n <span class=\"eyebrow light\">Showroom One<\/span>\r\n <p class=\"loc-strip-city\">Dubai<\/p>\r\n <p class=\"loc-strip-region\">Dubai Design District<\/p>\r\n <div class=\"loc-detail-row\"><svg viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg><p>A304, Building 5, Dubai Design District, Dubai, UAE<\/p><\/div>\r\n <div class=\"loc-detail-row\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg><p>Monday \u2013 Saturday, 10:00 AM \u2013 7:00 PM<\/p><\/div>\r\n <div class=\"loc-detail-row\"><svg viewBox=\"0 0 24 24\"><path d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 01.09 1.18 2 2 0 012.06 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z\"\/><\/svg><p>+852 6368 3125<\/p><\/div>\r\n <button class=\"loc-book-btn\" onclick=\"document.querySelector('.booking-wrap').scrollIntoView({behavior:'smooth'})\">\r\n Book Dubai <svg viewBox=\"0 0 13 9\"><path d=\"M1 4.5h11M7.5 1l3.5 3.5-3.5 3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <div class=\"loc-strip-card rv d1\">\r\n <span class=\"eyebrow light\">Showroom Two<\/span>\r\n <p class=\"loc-strip-city\">Hong Kong<\/p>\r\n <p class=\"loc-strip-region\">Central District<\/p>\r\n <div class=\"loc-detail-row\"><svg viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg><p>Queens Road Central 54\u201356, Canton House, 20F, Central District, Hong Kong<\/p><\/div>\r\n <div class=\"loc-detail-row\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg><p>Monday \u2013 Saturday, 10:00 AM \u2013 7:00 PM<\/p><\/div>\r\n <div class=\"loc-detail-row\"><svg viewBox=\"0 0 24 24\"><path d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 01.09 1.18 2 2 0 012.06 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z\"\/><\/svg><p>+852 6368 3125<\/p><\/div>\r\n <button class=\"loc-book-btn\" onclick=\"document.querySelector('.booking-wrap').scrollIntoView({behavior:'smooth'})\">\r\n Book Hong Kong <svg viewBox=\"0 0 13 9\"><path d=\"M1 4.5h11M7.5 1l3.5 3.5-3.5 3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550 7. TESTIMONIAL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"testimonial\">\r\n <div class=\"gline c rv\"><\/div>\r\n <p class=\"t-quote rv d1\">\"I booked a bespoke consultation on a Tuesday and by Friday had a sketch of my engagement ring. The process was unlike anything I had experienced \u2014 completely personal, completely GEMMA.\"<\/p>\r\n <p class=\"t-attr rv d2\">James L. <span>Hong Kong \u2014 Bespoke Commission, 2024<\/span><\/p>\r\n <div class=\"gline c rv d3\"><\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550 8. FAQ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section style=\"background:var(--w);padding:clamp(60px,8vw,100px) clamp(24px,5vw,80px)\">\r\n <div class=\"faq\" style=\"padding:0;max-width:1100px;margin:0 auto\">\r\n <div class=\"faq-left rv\">\r\n <span class=\"eyebrow\">Good to Know<\/span>\r\n <h2>Appointment FAQs<\/h2>\r\n <div class=\"gline\"><\/div>\r\n <p>Everything you need to know before your visit. Still have a question? Call us directly and we'll answer the same day.<\/p>\r\n <\/div>\r\n <div class=\"faq-list rv d1\">\r\n <div class=\"faq-item open\">\r\n <div class=\"faq-q\"><span>How far in advance should I book?<\/span><div class=\"faq-ico\"><svg viewBox=\"0 0 24 24\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div><\/div>\r\n <p class=\"faq-a\">We recommend booking at least 48 hours in advance so we have time to prepare your selection. Same-day appointments may be available \u2014 call us directly to check.<\/p>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <div class=\"faq-q\"><span>Is there a fee to book an appointment?<\/span><div class=\"faq-ico\"><svg viewBox=\"0 0 24 24\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div><\/div>\r\n <p class=\"faq-a\">All GEMMA appointments are completely complimentary. There is no obligation to purchase.<\/p>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <div class=\"faq-q\"><span>Can I reschedule or cancel?<\/span><div class=\"faq-ico\"><svg viewBox=\"0 0 24 24\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div><\/div>\r\n <p class=\"faq-a\">Yes, with pleasure. Simply use the link in your confirmation email or call us. We ask for at least 24 hours notice where possible.<\/p>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <div class=\"faq-q\"><span>Can I bring children to my appointment?<\/span><div class=\"faq-ico\"><svg viewBox=\"0 0 24 24\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div><\/div>\r\n <p class=\"faq-a\">Our showrooms contain high-value pieces in open display. We kindly ask that children under 12 are accompanied at all times. Please let us know in advance and we'll do our best to accommodate.<\/p>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <div class=\"faq-q\"><span>What happens after a bespoke consultation?<\/span><div class=\"faq-ico\"><svg viewBox=\"0 0 24 24\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div><\/div>\r\n <p class=\"faq-a\">Following your consultation, our design team creates initial sketches within 5\u20137 working days. You'll review and refine until the design is perfect before any work begins.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550 9. FINAL CTA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n\r\n\r\n<script>\r\n\/* \u2500\u2500 Scroll reveal \u2500\u2500 *\/\r\nconst obs = new IntersectionObserver(entries => {\r\n entries.forEach(e => { if(e.isIntersecting){ e.target.classList.add('on'); obs.unobserve(e.target); }});\r\n}, {threshold: 0.08});\r\ndocument.querySelectorAll('.rv,.rvl,.rvr').forEach(el => obs.observe(el));\r\n\r\n\/* \u2500\u2500 Booking steps state \u2500\u2500 *\/\r\nlet selectedType = null;\r\nlet selectedLoc = null;\r\n\r\nfunction selectType(el) {\r\n document.querySelectorAll('.appt-card').forEach(c => c.classList.remove('selected'));\r\n el.classList.add('selected');\r\n selectedType = el.dataset.type;\r\n document.getElementById('type-summary').textContent = '\u2713 ' + selectedType + ' selected';\r\n document.getElementById('next-1').disabled = false;\r\n}\r\n\r\nfunction selectLoc(el) {\r\n document.querySelectorAll('.loc-card').forEach(c => c.classList.remove('selected'));\r\n el.classList.add('selected');\r\n selectedLoc = el.dataset.loc;\r\n document.getElementById('loc-summary').textContent = '\u2713 ' + selectedLoc + ' selected';\r\n document.getElementById('next-2').disabled = false;\r\n}\r\n\r\nfunction goStep(n) {\r\n \/\/ Hide all panels\r\n document.querySelectorAll('.step-panel').forEach(p => p.classList.remove('active'));\r\n document.querySelectorAll('.step-ind').forEach(i => {\r\n i.classList.remove('active');\r\n const num = parseInt(i.id.split('-')[1]);\r\n if(num < n) i.classList.add('done'); else i.classList.remove('done');\r\n });\r\n \/\/ Update connectors\r\n document.querySelectorAll('.step-connector').forEach(c => {\r\n const num = parseInt(c.id.split('-')[1]);\r\n if(num < n) c.classList.add('done'); else c.classList.remove('done');\r\n });\r\n document.getElementById('step-' + n).classList.add('active');\r\n document.getElementById('ind-' + n).classList.add('active');\r\n\r\n \/\/ Update calendly header with selections\r\n if(n === 3) {\r\n document.getElementById('cal-badge-type').textContent = selectedType || 'Private Viewing';\r\n document.getElementById('cal-badge-loc').textContent = selectedLoc || 'Dubai';\r\n document.getElementById('cal-title').textContent = 'Select Your Date & Time';\r\n document.getElementById('cal-subtitle').textContent = (selectedType || '') + ' \u2014 ' + (selectedLoc || '') + ' Showroom';\r\n }\r\n\r\n \/\/ Scroll to booking section\r\n document.querySelector('.booking-wrap').scrollIntoView({behavior:'smooth', block:'start'});\r\n}\r\n\r\n\/* \u2500\u2500 FAQ accordion \u2500\u2500 *\/\r\ndocument.querySelectorAll('.faq-item').forEach(item => {\r\n item.querySelector('.faq-q').addEventListener('click', () => {\r\n const isOpen = item.classList.contains('open');\r\n document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('open'));\r\n if(!isOpen) item.classList.add('open');\r\n });\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Book an Appointment \u2014 GEMMA Fine Jewelry Private Appointments Reserve YourExperience Every GEMMA appointment is crafted around you \u2014 your<\/p>\n","protected":false},"author":10,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-20637","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gemmafj.com\/index.php\/wp-json\/wp\/v2\/pages\/20637","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gemmafj.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gemmafj.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gemmafj.com\/index.php\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/gemmafj.com\/index.php\/wp-json\/wp\/v2\/comments?post=20637"}],"version-history":[{"count":25,"href":"https:\/\/gemmafj.com\/index.php\/wp-json\/wp\/v2\/pages\/20637\/revisions"}],"predecessor-version":[{"id":20773,"href":"https:\/\/gemmafj.com\/index.php\/wp-json\/wp\/v2\/pages\/20637\/revisions\/20773"}],"wp:attachment":[{"href":"https:\/\/gemmafj.com\/index.php\/wp-json\/wp\/v2\/media?parent=20637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}