{"id":64902,"date":"2026-08-04T09:46:48","date_gmt":"2026-08-04T09:46:48","guid":{"rendered":"https:\/\/capytech.com\/?page_id=64902"},"modified":"2026-10-27T10:39:08","modified_gmt":"2026-10-27T10:39:08","slug":"hospitality-luxury-retail","status":"publish","type":"page","link":"https:\/\/capytech.com\/en\/hospitality-luxury-retail\/","title":{"rendered":"hospitality-luxury-retail"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"64902\" class=\"elementor elementor-64902\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7ca225d elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"7ca225d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b09770f\" data-id=\"b09770f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6d3c1d0 elementor-widget elementor-widget-html\" data-id=\"6d3c1d0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!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    <meta name=\"referrer\" content=\"no-referrer\">\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=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap\" rel=\"stylesheet\">\r\n\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/gh\/studio-freight\/lenis@1.0.29\/bundled\/lenis.min.js\"><\/script>\r\n\r\n    <style>\r\n        \/*\r\n            FIX NOTES:\r\n            1. @import + html font-size reset to 16px.\r\n            2. Double-class specificity multiplier (#smooth-content .class.class) applied to all typography.\r\n            3. CF7 integrated with appearance\/box-model resets.\r\n        *\/\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');\r\n\r\n        html { font-size: 16px !important; }\r\n\r\n        \/* ==========================================================================\r\n           DESIGN SYSTEM: MONOCHROMATIC ARCHITECTURAL MINIMALISM\r\n           ========================================================================== *\/\r\n        :root {\r\n            --bg-pure: #FFFFFF;\r\n            --bg-alt: #F7F7F7;\r\n            --text-dark: #111111;\r\n            --text-muted: #767676;\r\n            --silver: #E5E5E5;\r\n            --pad-edge: 5vw;\r\n            --space-section: 15vh;\r\n            --font-main: 'Inter', sans-serif;\r\n            --font-mono: 'JetBrains Mono', monospace;\r\n            --font-serif: 'Playfair Display', serif;\r\n        }\r\n        @media (max-width: 768px) { :root { --pad-edge: 6vw; --space-section: 10vh; } }\r\n\r\n        * { margin: 0; padding: 0; box-sizing: border-box; }\r\n        html.lenis { height: auto; background: var(--bg-pure); }\r\n        .lenis.lenis-smooth { scroll-behavior: auto !important; }\r\n        .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }\r\n        .lenis.lenis-stopped { overflow: hidden; }\r\n        body { font-family: var(--font-main) !important; background-color: var(--bg-pure); color: var(--text-dark) !important; -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.4 !important; font-weight: 300 !important; }\r\n\r\n        #smooth-content img, #smooth-content video { margin: 0 !important; }\r\n\r\n        .arch-line { width: 100%; height: 1px; background: var(--silver); transform-origin: left; transform: scaleX(0); }\r\n        #smooth-content .eyebrow.eyebrow { font-family: var(--font-mono) !important; font-size: 0.75rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.2em !important; color: var(--text-muted) !important; display: block; margin-bottom: 2rem !important; }\r\n        .section { padding: var(--space-section) var(--pad-edge); position: relative; }\r\n        #smooth-content .list-title.list-title { font-family: var(--font-main) !important; font-size: clamp(2rem, 3.5vw, 4.5rem) !important; font-weight: 400 !important; text-transform: uppercase !important; line-height: 1 !important; letter-spacing: -0.03em !important; color: var(--text-dark) !important; max-width: 800px; }\r\n        .list-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 4rem; }\r\n\r\n        #smooth-content .btn-solid.btn-solid { display: inline-flex; align-items: center; justify-content: center; padding: 1.25rem 2.5rem !important; background: var(--text-dark) !important; color: var(--bg-pure) !important; font-family: var(--font-mono) !important; font-size: 0.8rem !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-decoration: none !important; transition: opacity 0.4s ease; border: none !important; border-radius: 0 !important;}\r\n        #smooth-content .btn-solid:hover { opacity: 0.8 !important; }\r\n        #smooth-content .btn-outline.btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 1.25rem 2.5rem !important; background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.5) !important; font-family: var(--font-mono) !important; font-size: 0.8rem !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-decoration: none !important; transition: border-color 0.4s ease; border-radius: 0 !important;}\r\n        #smooth-content .btn-outline:hover { border-color: #fff !important; }\r\n\r\n        \/* ==========================================================================\r\n           ACT I: HERO \u2014 VITRINE REVEAL & LUXURY GLASS LENS\r\n           ========================================================================== *\/\r\n        .hero { position: relative; width: 100vw; min-height: 100vh; min-height: -webkit-fill-available; display: flex; flex-direction: column; justify-content: center; padding: 12vh var(--pad-edge) 6vw var(--pad-edge); cursor: none; }\r\n        .hero-actions a { cursor: pointer; } \r\n        \r\n        .hero-bg { position: absolute; inset: 0; z-index: 0; background: #000; overflow: hidden; }\r\n        .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }\r\n        \r\n        \/* Base Grayscale Image *\/\r\n        .hero-img-bw { filter: grayscale(100%) contrast(1.1) brightness(0.6); transform: scale(1.08); }\r\n        \r\n        \/* Premium Floating Glass Lens System (Upgraded Scale) *\/\r\n        .glass-lens { position: absolute; top: 0; left: 0; width: 0; height: 0; pointer-events: none; z-index: 5; }\r\n        .glass-lens-inner {\r\n            position: absolute; top: -240px; left: -240px; \/* 480px diameter *\/\r\n            width: 480px; height: 480px; border-radius: 50%; overflow: hidden;\r\n            border: 2px solid rgba(255, 255, 255, 0.15);\r\n            box-shadow: inset 0 0 20px rgba(0,0,0,0.5), inset 0 0 10px rgba(255,255,255,0.2), 0 15px 35px rgba(0,0,0,0.4);\r\n            opacity: 0; transform: scale(0.95);\r\n            transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.6s ease;\r\n            will-change: transform, opacity, box-shadow;\r\n        }\r\n        .glass-lens.active .glass-lens-inner { opacity: 1; transform: scale(1); }\r\n        \r\n        \/* Background Container perfectly synchronized via GSAP *\/\r\n        .glass-lens-bg {\r\n            position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; transform-origin: 0 0; will-change: transform;\r\n        }\r\n\r\n        \/* Tactile Press-to-Zoom State *\/\r\n        .glass-lens.is-zoomed .glass-lens-inner {\r\n            box-shadow: inset 0 0 40px rgba(0,0,0,0.7), inset 0 0 15px rgba(255,255,255,0.3), 0 5px 15px rgba(0,0,0,0.6);\r\n            border-color: rgba(255, 255, 255, 0.4);\r\n            transform: scale(0.98); \r\n        }\r\n        \r\n        \/* Optically Enhanced Color Image *\/\r\n        .hero-img-color {\r\n            width: 100vw; height: 100vh; object-fit: cover; object-position: center 40%;\r\n            filter: brightness(1.03) contrast(1.05) saturate(1.05);\r\n            transform: scale(1.08); \r\n        }\r\n        \r\n        \/* Glass Glare, Highlight, and Chromatic Aberration Layers *\/\r\n        .glass-lens-reflection { position: absolute; inset: 0; z-index: 2; border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 30%, transparent 50%); mix-blend-mode: screen; pointer-events: none; }\r\n        .glass-lens-highlight { position: absolute; top: 15%; left: 15%; width: 30%; height: 30%; background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%); border-radius: 50%; z-index: 3; mix-blend-mode: screen; pointer-events: none; }\r\n        .glass-lens-aberration { position: absolute; inset: 0; z-index: 4; border-radius: 50%; box-shadow: inset 2px 0 4px rgba(255,0,0,0.3), inset -2px 0 4px rgba(0,255,255,0.3); pointer-events: none; }\r\n\r\n        .hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.65) 100%); pointer-events: none; }\r\n\r\n        .vitrine-panel { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--text-dark); z-index: 6; }\r\n        .vitrine-panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%); }\r\n        .vitrine-left { left: 0; }\r\n        .vitrine-right { right: 0; }\r\n        .vitrine-seam { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255,255,255,0.25); z-index: 7; opacity: 0; transform: translateX(-0.5px); }\r\n\r\n        #smooth-content .hero-meta-strip.hero-meta-strip { position: relative; z-index: 10; display: flex; justify-content: space-between; font-family: var(--font-mono) !important; font-size: 0.72rem !important; color: rgba(255,255,255,0.55) !important; letter-spacing: 0.08em !important; margin-bottom: 6vh; opacity: 0; pointer-events: none;}\r\n        .hero-title-wrap { position: relative; z-index: 10; max-width: 1050px; pointer-events: none;}\r\n        #smooth-content .hero-title-wrap .eyebrow { color: rgba(255,255,255,0.75) !important; opacity: 0; }\r\n        #smooth-content .hero-title.hero-title { font-family: var(--font-main) !important; font-size: clamp(2.6rem, 6vw, 6rem) !important; font-weight: 400 !important; line-height: 1.05 !important; letter-spacing: -0.03em !important; text-transform: uppercase !important; color: #fff !important; opacity: 0; margin-bottom: 0 !important;}\r\n        .hero-lower { position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: flex-end; gap: 4vw; margin-top: 5vh; flex-wrap: wrap; }\r\n        #smooth-content .hero-sub.hero-sub { font-family: var(--font-main) !important; max-width: 460px; font-size: 1.15rem !important; line-height: 1.6 !important; color: rgba(255,255,255,0.8) !important; opacity: 0; pointer-events: none;}\r\n        .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; }\r\n\r\n        @media (max-width: 768px) {\r\n            .hero { padding-top: 10vh; cursor: auto; }\r\n            .hero-meta-strip { flex-direction: column; gap: 0.4rem; margin-bottom: 4vh; }\r\n            #smooth-content .hero-title.hero-title { font-size: clamp(2.1rem, 9vw, 3.4rem) !important; }\r\n            .hero-actions { flex-direction: column; width: 100%; }\r\n            #smooth-content .btn-solid, #smooth-content .btn-outline { width: 100% !important; text-align: center; }\r\n            .glass-lens { display: none; } \r\n        }\r\n\r\n        \/* ==========================================================================\r\n           ACT II: OPERATIONAL REALITY \u2014 editorial pull-quote intro\r\n           ========================================================================== *\/\r\n        .intro-editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: start; margin-bottom: 4rem; }\r\n        .pull-quote-wrap { position: relative; overflow: hidden; border-radius: 2px; display: flex; align-items: flex-end; justify-content: flex-start; min-height: 300px; }\r\n        .pull-quote-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(65%) contrast(1.05) brightness(0.65); z-index: 0; border-radius: 8px; }\r\n        .pull-quote-scrim { position: absolute; inset: 0; z-index: 1; }\r\n        #smooth-content .pull-quote.pull-quote { position: relative; z-index: 2; padding: 3rem 2.5rem !important; margin: 0 !important; color: #fff !important; font-family: var(--font-serif) !important; font-style: italic !important; font-weight: 500 !important; font-size: clamp(1rem, 1.4vw, 1.5rem) !important; line-height: 1.35 !important; border-top: none !important; }\r\n        @media (max-width: 768px) { #smooth-content .pull-quote.pull-quote { padding: 2.25rem 1.5rem !important; } }\r\n        \r\n        #smooth-content .intro-copy p { font-family: var(--font-main) !important; font-size: 1.12rem !important; color: var(--text-muted) !important; line-height: 1.7 !important; margin-bottom: 1.5rem !important; }\r\n        #smooth-content .intro-copy strong { color: var(--text-dark) !important; font-weight: 500 !important; }\r\n\r\n        .stat-strip { display: flex; border-top: 1px solid var(--silver); border-bottom: 1px solid var(--silver); margin: 4rem 0; }\r\n        .stat-strip .stat { flex: 1; padding: 2.5rem 2rem 2.5rem 0; }\r\n        .stat-strip .stat + .stat { border-left: 1px solid var(--silver); padding-left: 2rem; }\r\n        #smooth-content .stat-num.stat-num { font-family: var(--font-main) !important; font-size: clamp(2.2rem, 4vw, 3.6rem) !important; font-weight: 300 !important; line-height: 0.9 !important; letter-spacing: -0.04em !important; color: var(--text-dark) !important; display: block; margin-bottom: 0.75rem !important; }\r\n        #smooth-content .stat-lbl.stat-lbl { font-family: var(--font-main) !important; font-size: 0.85rem !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: var(--text-muted) !important; }\r\n\r\n        .cap-flow { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; align-items: center;}\r\n        #smooth-content .cap-tag.cap-tag { font-family: var(--font-mono) !important; font-size: 0.85rem !important; letter-spacing: 0.03em !important; color: var(--text-dark) !important; border: 1px solid var(--silver) !important; padding: 0.85rem 1.4rem !important; }\r\n        #smooth-content .cap-tag span { color: var(--text-muted) !important; margin-right: 0.6rem; }\r\n\r\n        @media (max-width: 1024px) { .intro-editorial { grid-template-columns: 1fr; gap: 2.5rem; } }\r\n        @media (max-width: 768px) { .stat-strip { flex-direction: column; } .stat-strip .stat + .stat { border-left: none; border-top: 1px solid var(--silver); padding-left: 0; padding-top: 1.5rem; } }\r\n\r\n        \/* ==========================================================================\r\n           ACT III: THE GUEST JOURNEY \u2014 stepped timeline (Challenges)\r\n           ========================================================================== *\/\r\n        .journey-pin { position: relative; }\r\n        .journey-pin .journey-header { margin-bottom: 3rem; }\r\n        .journey-body { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 5vw; align-items: center; }\r\n        .journey-main { min-width: 0; }\r\n        .journey-track { position: relative; display: flex; justify-content: space-between; margin-bottom: 4rem; padding-top: 0.5rem; }\r\n        .journey-line { position: absolute; top: calc(0.5rem + 13px); left: 0; right: 0; height: 4px; border-radius: 999px; background: var(--silver); z-index: 0; overflow: hidden; }\r\n        .journey-line-fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--text-dark); border-radius: 999px; transform-origin: left center; transform: scaleX(0); }\r\n        \r\n        #smooth-content .journey-step { position: relative; z-index: 1; background: none !important; border: none !important; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; padding: 0; font-family: var(--font-main) !important; }\r\n        #smooth-content .journey-step .step-num { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--silver); background: var(--bg-pure); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono) !important; font-size: 0.75rem !important; color: var(--text-muted) !important; transition: all 0.35s ease; }\r\n        #smooth-content .journey-step .step-tag { font-family: var(--font-mono) !important; font-size: 0.7rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--text-muted) !important; transition: color 0.35s ease; }\r\n        #smooth-content .journey-step.active .step-num { background: var(--text-dark) !important; color: #fff !important; border-color: var(--text-dark) !important; }\r\n        #smooth-content .journey-step.active .step-tag { color: var(--text-dark) !important; font-weight: 600 !important; }\r\n\r\n        .journey-detail { border-top: 1px solid var(--text-dark); padding-top: 2.5rem; max-width: 820px; }\r\n        #smooth-content .journey-title.journey-title { font-family: var(--font-main) !important; font-size: clamp(1.4rem, 2.2vw, 2.15rem) !important; font-weight: 400 !important; margin-bottom: 1.1rem !important; color: var(--text-dark) !important; letter-spacing: -0.01em !important; }\r\n        #smooth-content .journey-desc.journey-desc { font-family: var(--font-main) !important; font-size: 1.1rem !important; line-height: 1.65 !important; color: var(--text-muted) !important; }\r\n        #smooth-content .journey-scroll-hint.journey-scroll-hint { position: absolute; bottom: 1.5rem; right: 0; font-family: var(--font-mono) !important; font-size: 0.7rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--text-muted) !important; opacity: 0; transition: opacity 0.4s ease; }\r\n\r\n        .journey-visual { position: relative; width: 100%; max-width: 460px; aspect-ratio: 4 \/ 5; margin: 0 auto; }\r\n        .journey-visual-ring { position: absolute; inset: 5%; border: 1px solid var(--silver); border-radius: 50%; pointer-events: none; }\r\n        .journey-visual-frame { position: relative; width: 100%; height: 100%; overflow: hidden; }\r\n        .journey-visual-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(20%) contrast(1.03); transition: opacity 0.7s ease; }\r\n        .journey-visual-img.active { opacity: 1; }\r\n        #smooth-content .journey-visual-tag.journey-visual-tag { position: absolute; bottom: -2rem; left: 0; font-family: var(--font-mono) !important; font-size: 0.7rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--text-muted) !important; }\r\n\r\n        .journey-pin.is-pinned { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 6vh 0; }\r\n\r\n        @media (max-width: 1024px) {\r\n            .journey-body { grid-template-columns: 1fr; gap: 3rem; }\r\n            .journey-visual { display: none; }\r\n        }\r\n        @media (max-width: 768px) {\r\n            .journey-pin .journey-header { margin-bottom: 2rem; }\r\n            .journey-track { overflow-x: auto; justify-content: flex-start; gap: 2.25rem; padding-bottom: 0.75rem; -webkit-overflow-scrolling: touch; }\r\n            .journey-line { display: none; }\r\n            .journey-step { flex-shrink: 0; }\r\n            .journey-scroll-hint { display: none; }\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           ACT IV: THE MUSEUM PLACARD \u2014 What We Build\r\n           ========================================================================== *\/\r\n        .placard-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }\r\n        .placard { border-left: 1px solid var(--silver); padding: 0 1.75rem; position: relative; }\r\n        .placard:first-child { border-left: none; padding-left: 0; }\r\n        #smooth-content .placard-num.placard-num { font-family: var(--font-serif) !important; font-style: italic !important; font-weight: 600 !important; font-size: 2.1rem !important; color: var(--text-muted) !important; display: block; margin-bottom: 1.25rem !important; }\r\n        .placard-rule { width: 28px; height: 1px; background: var(--text-dark); margin-bottom: 1.5rem; }\r\n        .placard-visual { width: 100%; height: clamp(150px, 12vw, 210px); border-radius: 4px; overflow: hidden; margin-bottom: 1.5rem; border: 1px solid var(--silver); }\r\n        .placard-img { width: 100% !important; height: 100% !important; object-fit: cover; filter: grayscale(100%) contrast(1.05) brightness(0.9); transform: scale(1.05); transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }\r\n        .placard:hover .placard-img { filter: grayscale(0%) brightness(1); transform: scale(1.12); }\r\n        .placard:hover .placard-visual { border-color: var(--text-dark); }\r\n        #smooth-content .placard-title.placard-title { font-family: var(--font-main) !important; font-size: 1.1rem !important; font-weight: 500 !important; color: var(--text-dark) !important; margin-bottom: 0.85rem !important; line-height: 1.3 !important; }\r\n        #smooth-content .placard-desc.placard-desc { font-family: var(--font-main) !important; font-size: 0.95rem !important; line-height: 1.6 !important; color: var(--text-muted) !important; }\r\n\r\n        @media (max-width: 1024px) {\r\n            .placard-row { grid-template-columns: 1fr 1fr; gap: 2.5rem 0; }\r\n            .placard { border-left: none; padding: 0; border-top: 1px solid var(--silver); padding-top: 2rem; }\r\n            .placard:nth-child(odd) { padding-right: 1.5rem; }\r\n            .placard:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid var(--silver); }\r\n            .placard-visual { height: clamp(160px, 22vw, 220px); }\r\n        }\r\n        @media (max-width: 600px) {\r\n            .placard-row { grid-template-columns: 1fr; }\r\n            .placard:nth-child(even) { border-left: none; padding-left: 0; }\r\n            .placard-visual { height: 200px; }\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           ACT V: THE BRAND WALL \u2014 Trusted Partners\r\n           ========================================================================== *\/\r\n        #smooth-content .partners-sub.partners-sub { font-family: var(--font-main) !important; margin-top: 1.25rem !important; max-width: 540px; color: var(--text-muted) !important; font-size: 1.08rem !important; line-height: 1.6 !important; }\r\n        .brand-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--silver); border-top: 1px solid var(--silver); border-left: 1px solid var(--silver); }\r\n        .brand-card { background: var(--bg-pure); padding: 3rem 2.25rem; }\r\n        .flex { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; }\r\n        #smooth-content .brand-name.brand-name { font-family: var(--font-serif) !important; font-style: italic !important; font-weight: 600 !important; font-size: 1.85rem !important; color: var(--text-dark) !important; margin-bottom: 0.6rem !important; letter-spacing: -0.01em !important; }\r\n        .brand-logo { height: 5.3rem !important; width: auto !important; max-width: 100% !important; object-fit: contain; object-position: left center; display: block; margin-bottom: 1rem; transition: filter 0.5s ease; }\r\n        .brand-card:hover .brand-logo { filter: grayscale(0%) contrast(1) brightness(1); }\r\n        #smooth-content .brand-sector.brand-sector { font-family: var(--font-mono) !important; font-size: 0.7rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--text-muted) !important; display: block; margin-bottom: 1.25rem !important; }\r\n        #smooth-content .brand-blurb.brand-blurb { font-family: var(--font-main) !important; font-size: 0.97rem !important; line-height: 1.6 !important; color: var(--text-muted) !important; }\r\n\r\n        @media (max-width: 1024px) { .brand-wall { grid-template-columns: 1fr 1fr; } }\r\n        @media (max-width: 600px) { .brand-wall { grid-template-columns: 1fr; } }\r\n\r\n        \/* ==========================================================================\r\n           ACT VI: SPEC GRID \u2014 Why Capytech\r\n           ========================================================================== *\/\r\n        .spec-scene { padding: var(--space-section) var(--pad-edge); background: var(--text-dark); border-bottom: 1px solid rgba(255,255,255,0.1); color: #fff; }\r\n        .spec-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 4rem; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 1rem; }\r\n        #smooth-content .spec-header h2 { font-family: var(--font-main) !important; font-size: clamp(2.5rem, 4vw, 4.5rem) !important; font-weight: 800 !important; text-transform: uppercase !important; line-height: 1 !important; color: #fff !important; }\r\n        .spec-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.15); }\r\n        .spec-item { background: var(--text-dark); padding: 2.5rem 1.75rem; position: relative; min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; }\r\n        #smooth-content .spec-wm.spec-wm { position: absolute; top: 1.5rem; right: 1.5rem; font-family: var(--font-mono) !important; font-size: 3rem !important; color: rgba(255,255,255,0.08) !important; font-weight: 700 !important; }\r\n        #smooth-content .spec-num.spec-num { font-family: var(--font-mono) !important; font-size: 0.75rem !important; color: rgba(255,255,255,0.5) !important; letter-spacing: 0.1em !important; margin-bottom: 1.5rem !important; }\r\n        #smooth-content .spec-title.spec-title { font-family: var(--font-main) !important; font-size: 1.2rem !important; font-weight: 500 !important; margin-bottom: 0.75rem !important; color: #fff !important; }\r\n        #smooth-content .spec-desc.spec-desc { font-family: var(--font-main) !important; font-size: 0.95rem !important; line-height: 1.5 !important; color: rgba(255,255,255,0.6) !important; }\r\n        @media (max-width: 1024px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } .spec-item { min-height: 220px; } }\r\n        @media (max-width: 600px) { .spec-grid { grid-template-columns: 1fr; } }\r\n\r\n        \/* ==========================================================================\r\n           ACT VII: TERMINAL \u2014 FAQ & CF7 Contact\r\n           ========================================================================== *\/\r\n        .terminal-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 8vw; }\r\n        .faq-item { border-bottom: 1px solid var(--silver); cursor: pointer; }\r\n        #smooth-content .faq-q.faq-q { display: flex; justify-content: space-between; align-items: center; padding: 1.75rem 0 !important; font-family: var(--font-main) !important; font-size: 1.05rem !important; font-weight: 500 !important; color: var(--text-dark) !important; }\r\n        #smooth-content .faq-icon.faq-icon { font-family: var(--font-mono) !important; color: var(--text-muted) !important; transition: transform 0.4s ease; }\r\n        .faq-item.active .faq-icon { transform: rotate(45deg); }\r\n        .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }\r\n        .faq-a-inner { padding-bottom: 1.75rem; max-width: 90%; }\r\n        #smooth-content .faq-a-inner p { font-family: var(--font-main) !important; color: var(--text-muted) !important; font-size: 1rem !important; line-height: 1.6 !important; margin: 0 !important; }\r\n        \r\n        .input-group { margin-bottom: 1.75rem; position: relative;}\r\n        #smooth-content .input-group label { display: block; font-family: var(--font-mono) !important; font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: var(--text-muted) !important; margin-bottom: 0.6rem !important; }\r\n        \r\n        \/* CF7 Form Field Armor *\/\r\n        #smooth-content .input-group input.wpcf7-form-control, \r\n        #smooth-content .input-group textarea.wpcf7-form-control {\r\n            width: 100% !important; border: none !important; border-bottom: 1px solid var(--silver) !important; background: transparent !important;\r\n            font-family: var(--font-main) !important; font-size: 1.05rem !important; padding: 0.6rem 0 !important; color: var(--text-dark) !important; outline: none !important; resize: none !important;\r\n            border-radius: 0 !important; -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important;\r\n            transition: border-color 0.3s ease !important;\r\n        }\r\n        #smooth-content .input-group input.wpcf7-form-control:focus, \r\n        #smooth-content .input-group textarea.wpcf7-form-control:focus { border-bottom-color: var(--text-dark) !important; }\r\n        #smooth-content .input-group input::placeholder, \r\n        #smooth-content .input-group textarea::placeholder { color: var(--text-muted) !important; font-weight: 300 !important; }\r\n\r\n        \/* CF7 Submit Button Armor *\/\r\n        #smooth-content input.wpcf7-submit.btn-submit { \r\n            margin-top: 1rem !important; width: 100% !important; padding: 1.25rem !important; background: var(--text-dark) !important; color: #fff !important; \r\n            border: none !important; font-family: var(--font-mono) !important; font-size: 0.8rem !important; font-weight: 600 !important; \r\n            letter-spacing: 0.1em !important; text-transform: uppercase !important; cursor: pointer !important; border-radius: 0 !important; \r\n            -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important; transition: opacity 0.3s ease !important; \r\n        }\r\n        #smooth-content input.wpcf7-submit.btn-submit:hover { opacity: 0.8 !important; }\r\n\r\n        \/* CF7 Terminal-style Response Box *\/\r\n        #smooth-content form.wpcf7-form .wpcf7-response-output,\r\n        #smooth-content .wpcf7 form .wpcf7-response-output {\r\n            font-family: var(--font-mono) !important;\r\n            font-size: 0.8rem !important;\r\n            font-weight: 600 !important;\r\n            text-transform: uppercase !important;\r\n            letter-spacing: 0.05em !important;\r\n            border: 1px solid var(--text-dark) !important;\r\n            border-radius: 0 !important;\r\n            margin-top: 1.5rem !important;\r\n            padding: 1rem !important;\r\n            text-align: center !important;\r\n            background: transparent !important;\r\n            color: var(--text-dark) !important;\r\n        }\r\n\r\n        \/* Default spinner placement *\/\r\n        #smooth-content .wpcf7-spinner { margin-top: 1rem !important; display: block; margin-left: auto; margin-right: auto; }\r\n\r\n        @media (max-width: 900px) { .terminal-grid { grid-template-columns: 1fr; gap: 4rem; } }\r\n\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"smooth-wrapper\">\r\n    <div id=\"smooth-content\">\r\n\r\n        <!-- ACT I: HERO \u2014 VITRINE REVEAL WITH GLASS LENS -->\r\n        <header class=\"hero\">\r\n            <div class=\"hero-bg\">\r\n                <!-- Base Grayscale Image -->\r\n                <img decoding=\"async\" class=\"hero-img-bw\" src=\"https:\/\/images.unsplash.com\/photo-1445019980597-93fa8acb246c?w=1800\" alt=\"\" loading=\"eager\">\r\n                \r\n                <!-- Premium Glass Inspection Lens (Replaces CSS Mask) -->\r\n                <div class=\"glass-lens\">\r\n                    <div class=\"glass-lens-inner\">\r\n                        <div class=\"glass-lens-bg\">\r\n                            <img decoding=\"async\" class=\"hero-img-color\" src=\"https:\/\/images.unsplash.com\/photo-1445019980597-93fa8acb246c?w=1800\" alt=\"\" loading=\"eager\">\r\n                        <\/div>\r\n                        <!-- Optics Layers -->\r\n                        <div class=\"glass-lens-reflection\"><\/div>\r\n                        <div class=\"glass-lens-highlight\"><\/div>\r\n                        <div class=\"glass-lens-aberration\"><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"hero-scrim\"><\/div>\r\n\r\n            <div class=\"hero-title-wrap\">\r\n                <span class=\"eyebrow\">Service & Brand Standards<\/span>\r\n                <h1 class=\"hero-title\">Bespoke E-Learning for<br>Hospitality, Tourism &<br>Luxury Retail<\/h1>\r\n            <\/div>\r\n            <div class=\"hero-lower\">\r\n                <p class=\"hero-sub\">Training that reflects the calibre of your brand, and the standard your guests expect.<\/p>\r\n                <div class=\"hero-actions\">\r\n                    <a class=\"btn-solid\" href=\"#contact\">Book a Demo<\/a>\r\n                    <!-- <a class=\"btn-outline\" href=\"#contact\">Speak to the Team<\/a> -->\r\n                <\/div>\r\n            <\/div>\r\n        <\/header>\r\n\r\n        <!-- ACT II: OPERATIONAL REALITY -->\r\n        <section class=\"section\">\r\n            <div class=\"intro-editorial\">\r\n                <div class=\"pull-quote-wrap gsap-reveal\">\r\n                    <video class=\"pull-quote-video\" autoplay muted loop playsinline poster=\"YOUR_POSTER_IMAGE_URL_HERE\">\r\n                        <source src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/08\/hotel-comp.mp4\" type=\"video\/mp4\">\r\n                    <\/video>\r\n                    <div class=\"pull-quote-scrim\"><\/div>\r\n                    <blockquote class=\"pull-quote\">For premium organisations, the quality of the learning experience has to match the quality of the brand.<\/blockquote>\r\n                <\/div>\r\n                <div class=\"intro-copy gsap-reveal\">\r\n                    <p>The Gulf's tourism and luxury economy runs on people. Saudi Vision 2030's giga-tourism, Dubai's record visitor numbers, and the region's expanding luxury-retail footprint all depend on a frontline that delivers brand and service standards flawlessly, across a high-turnover, multilingual, multi-property workforce. Generic hospitality courseware doesn't reflect your brand. It dilutes it.<\/p>\r\n                    <p>Capytech has built bespoke digital learning for the world's most demanding luxury and hospitality names for over 13 years. <strong>Our clients include Cartier, Gucci, Richemont, Majid Al Futtaim, Accor, and Kerzner.<\/strong><\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"stat-strip gsap-reveal\">\r\n                <div class=\"stat\"><span class=\"stat-num\">13+<\/span><span class=\"stat-lbl\">Years in region<\/span><\/div>\r\n                <div class=\"stat\"><span class=\"stat-num\">AR \/ EN<\/span><span class=\"stat-lbl\">Native bilingual<\/span><\/div>\r\n                <div class=\"stat\"><span class=\"stat-num\">Mobile<\/span><span class=\"stat-lbl\">First delivery<\/span><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"cap-flow gsap-reveal\">\r\n                <div class=\"cap-tag\"><span>01<\/span>Brand & Service Standards<\/div>\r\n                <div class=\"cap-tag\"><span>02<\/span>Product Knowledge & Clienteling<\/div>\r\n                <div class=\"cap-tag\"><span>03<\/span>Onboarding & Induction at Scale<\/div>\r\n                <div class=\"cap-tag\"><span>04<\/span>Multilingual Guest Experience<\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- ACT III: THE GUEST JOURNEY -->\r\n        <section class=\"section\" style=\"background: var(--bg-alt);\">\r\n            <div class=\"journey-pin\" id=\"journeyPin\">\r\n                <div class=\"list-header journey-header gsap-reveal\">\r\n                    <div><h2 class=\"list-title\">The Training Challenges We Solve<\/h2><\/div>\r\n                <\/div>\r\n                <div class=\"journey gsap-reveal\">\r\n                    <div class=\"journey-body\">\r\n                        <div class=\"journey-main\">\r\n                            <div class=\"journey-track\">\r\n                                <div class=\"journey-line\"><div class=\"journey-line-fill\" id=\"journeyLineFill\"><\/div><\/div>\r\n                                <button class=\"journey-step active\" data-step=\"0\"><span class=\"step-num\">01<\/span><span class=\"step-tag\">BRD<\/span><\/button>\r\n                                <button class=\"journey-step\" data-step=\"1\"><span class=\"step-num\">02<\/span><span class=\"step-tag\">TRN<\/span><\/button>\r\n                                <button class=\"journey-step\" data-step=\"2\"><span class=\"step-num\">03<\/span><span class=\"step-tag\">PRD<\/span><\/button>\r\n                                <button class=\"journey-step\" data-step=\"3\"><span class=\"step-num\">04<\/span><span class=\"step-tag\">LNG<\/span><\/button>\r\n                                <button class=\"journey-step\" data-step=\"4\"><span class=\"step-num\">05<\/span><span class=\"step-tag\">CON<\/span><\/button>\r\n                            <\/div>\r\n                            <div class=\"journey-detail\" id=\"journeyDetail\">\r\n                                <h3 class=\"journey-title\" id=\"journeyTitle\">Brand standards that reflect your brand, not a template<\/h3>\r\n                                <p class=\"journey-desc\" id=\"journeyDesc\">The way your people greet, advise, and serve is your brand made real. Off-the-shelf hospitality content teaches a generic standard. We build training around your specific service rituals, tone, and guest promise, so the experience on the floor matches the experience you sell.<\/p>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"journey-visual\">\r\n                            <div class=\"journey-visual-ring\"><\/div>\r\n                            <div class=\"journey-visual-frame\">\r\n                                <img decoding=\"async\" class=\"journey-visual-img active\" data-step=\"0\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/08\/hotel.webp\" alt=\"Brand and service standards\" loading=\"lazy\">\r\n                                <img decoding=\"async\" class=\"journey-visual-img\" data-step=\"1\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/08\/workstaff.webp\" alt=\"Onboarding and induction\" loading=\"lazy\">\r\n                                <img decoding=\"async\" class=\"journey-visual-img\" data-step=\"2\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/08\/luxury.webp\" alt=\"Product knowledge and clienteling\" loading=\"lazy\">\r\n                                <img decoding=\"async\" class=\"journey-visual-img\" data-step=\"3\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/08\/lang.webp\" alt=\"Multilingual guest experience\" loading=\"lazy\">\r\n                                <img decoding=\"async\" class=\"journey-visual-img\" data-step=\"4\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/08\/last.webp\" alt=\"Consistency across properties\" loading=\"lazy\">\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <span class=\"journey-scroll-hint\" id=\"journeyScrollHint\">Scroll to continue<\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- ACT IV: THE MUSEUM PLACARD -->\r\n        <section class=\"section\">\r\n            <div class=\"list-header gsap-reveal\">\r\n                <div><h2 class=\"list-title\">What We Build for Hospitality & Luxury Retail<\/h2><\/div>\r\n            <\/div>\r\n            <div class=\"placard-row gsap-reveal\">\r\n                <div class=\"placard\">\r\n                    <div class=\"placard-visual\"><img decoding=\"async\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/08\/branding.webp\" alt=\"Brand and service standards\" loading=\"lazy\" class=\"placard-img\"><\/div>\r\n                    <h3 class=\"placard-title\">Brand & Service Standards<\/h3>\r\n                    <p class=\"placard-desc\">Bespoke service-ritual, tone, and guest-experience training that makes your brand promise real on the floor.<\/p>\r\n                <\/div>\r\n                <div class=\"placard\">\r\n                    <div class=\"placard-visual\"><img decoding=\"async\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/08\/luxury-retail.webp\" alt=\"Product knowledge and clienteling\" loading=\"lazy\" class=\"placard-img\"><\/div>\r\n                    <h3 class=\"placard-title\">Product Knowledge & Clienteling<\/h3>\r\n                    <p class=\"placard-desc\">Product, heritage, and clienteling training for advisers representing luxury and premium brands.<\/p>\r\n                <\/div>\r\n                <div class=\"placard\">\r\n                    <div class=\"placard-visual\"><img decoding=\"async\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/08\/onboarding-1.webp\" alt=\"Onboarding and induction at scale\" loading=\"lazy\" class=\"placard-img\"><\/div>\r\n                    <h3 class=\"placard-title\">Onboarding & Induction at Scale<\/h3>\r\n                    <p class=\"placard-desc\">Consistent, tracked inductions for new hires and seasonal staff across every property and store.<\/p>\r\n                <\/div>\r\n                <div class=\"placard\">\r\n                    <div class=\"placard-visual\"><img decoding=\"async\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/08\/guest.webp\" alt=\"Guest experience and cultural awareness\" loading=\"lazy\" class=\"placard-img\"><\/div>\r\n                    <h3 class=\"placard-title\">Guest Experience & Cultural Awareness<\/h3>\r\n                    <p class=\"placard-desc\">Cross-cultural service, hospitality etiquette, and complaint-handling for an international guest base.<\/p>\r\n                <\/div>\r\n                <div class=\"placard\">\r\n                    <div class=\"placard-visual\"><img decoding=\"async\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/08\/leadership.webp\" alt=\"Leadership and management development\" loading=\"lazy\" class=\"placard-img\"><\/div>\r\n                    <h3 class=\"placard-title\">Leadership & Management Development<\/h3>\r\n                    <p class=\"placard-desc\">Floor-manager and departmental-leadership programmes for high-standard, high-pressure environments.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- ACT V: THE BRAND WALL -->\r\n        <section class=\"section\" style=\"background: var(--bg-alt);\">\r\n            <div class=\"list-header gsap-reveal\">\r\n                <div>\r\n                    <h2 class=\"list-title\">Trusted Partners<\/h2>\r\n                    <p class=\"partners-sub\">Bespoke digital learning delivered for organisations where the standard of training must reflect the calibre of the brand.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"brand-wall gsap-reveal\">\r\n                <div class=\"brand-card\">\r\n                    <div class=\"flex\">\r\n                        <img decoding=\"async\" class=\"brand-logo\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2024\/05\/Cartier.svg\" alt=\"Cartier logo\">\r\n                        <span class=\"brand-sector\">Luxury Maison<\/span>\r\n                    <\/div>\r\n                    <p class=\"brand-blurb\">Capytech delivered bespoke product-knowledge training, ensuring client-facing staff embody the brand's heritage, precision, and standards.<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"brand-card\">\r\n                    <div class=\"flex\">\r\n                        <img decoding=\"async\" class=\"brand-logo\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2024\/05\/Gucci.svg\" alt=\"Gucci logo\">\r\n                        <span class=\"brand-sector\">Luxury Fashion<\/span>\r\n                    <\/div>\r\n                    <p class=\"brand-blurb\">Capytech developed bespoke brand-standards training: content where the quality of the learning experience must reflect the quality of the brand.<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"brand-card\">\r\n                    <div class=\"flex\">\r\n                        <img decoding=\"async\" class=\"brand-logo\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2024\/05\/Richemont.svg\" alt=\"Richemont logo\">\r\n                    <span class=\"brand-sector\">Luxury Group<\/span>\r\n                    <\/div>\r\n                    <p class=\"brand-blurb\">High-end digital learning modules designed to maintain uncompromising operational and commercial standards across a portfolio of distinguished brands.<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"brand-card\">\r\n                    <div class=\"flex\">\r\n                        <div class=\"brand-name\">Majid Al Futtaim<\/div>\r\n                    <span class=\"brand-sector\">Retail & Leisure<\/span>\r\n                    <\/div>\r\n                    <p class=\"brand-blurb\">Bespoke digital learning supporting one of the region's largest retail, leisure, and entertainment groups across a large frontline workforce.<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"brand-card\">\r\n                    <div class=\"flex\">\r\n                        <img decoding=\"async\" class=\"brand-logo\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2024\/05\/Accor.svg\" alt=\"Accor logo\">\r\n                    <span class=\"brand-sector\">Hospitality<\/span>\r\n                    <\/div>\r\n                    <p class=\"brand-blurb\">Bespoke digital learning developed for a leading global hospitality group's service and operational training requirements.<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"brand-card\">\r\n                    <div class=\"flex\">\r\n                        <img decoding=\"async\" class=\"brand-logo\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2024\/05\/kerzner.svg\" alt=\"Kerzner International logo\">\r\n                    <span class=\"brand-sector\">Luxury Resorts<\/span>\r\n                    <\/div>\r\n                    <p class=\"brand-blurb\">Digital learning content supporting a leading luxury-resort operator's guest-experience and operational standards.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- ACT VI: SPEC SHEET -->\r\n        <section class=\"spec-scene\">\r\n            <div class=\"spec-header gsap-reveal\">\r\n                <h2>Why Capytech?<\/h2>\r\n            <\/div>\r\n            <div class=\"spec-grid\">\r\n                <div class=\"spec-item gsap-reveal\"><span class=\"spec-wm\">01<\/span><h3 class=\"spec-title\">The Standard Your Brand Demands<\/h3><p class=\"spec-desc\">Visual and experiential quality that premium organisations require. We build learning that matches the calibre of your brand.<\/p><\/div>\r\n                <div class=\"spec-item gsap-reveal\"><span class=\"spec-wm\">02<\/span><h3 class=\"spec-title\">Bespoke Means Bespoke<\/h3><p class=\"spec-desc\">Built around your specific service standards, products, and guest promise. No generic hospitality templates.<\/p><\/div>\r\n                <div class=\"spec-item gsap-reveal\"><span class=\"spec-wm\">03<\/span><h3 class=\"spec-title\">Native Arabic & English<\/h3><p class=\"spec-desc\">Authored bilingual content, not machine-translated: for a workforce and a guest base that span the world.<\/p><\/div>\r\n                <div class=\"spec-item gsap-reveal\"><span class=\"spec-wm\">04<\/span><h3 class=\"spec-title\">Scalable Across Every Site<\/h3><p class=\"spec-desc\">One consistent standard delivered to every property, store, and outlet, with tracked completion.<\/p><\/div>\r\n                <div class=\"spec-item gsap-reveal\"><span class=\"spec-wm\">05<\/span><h3 class=\"spec-title\">FastTrack Delivery<\/h3><p class=\"spec-desc\">Fully interactive modules in as little as 4 working days, ready for a season launch or a new-collection rollout.<\/p><\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- ACT VII: THE TERMINAL (FAQ & Form) -->\r\n        \n<section class=\"cxg-guides\"><style>.cxg-guides{background:#f8fafc;padding:4rem 1.5rem;font-family:inherit}.cxg-guides .cxg-wrap{max-width:1100px;margin:0 auto}.cxg-guides h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-.02em;margin:0 0 1.5rem;color:#0f172a}.cxg-guides .cxg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}.cxg-guides .cxg-card{display:block;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:1.5rem;text-decoration:none;box-shadow:0 10px 30px rgba(15,23,42,.06);transition:border-color .2s}.cxg-guides .cxg-card:hover,.cxg-guides .cxg-card:focus{border-color:#2563eb}.cxg-guides .cxg-card span{display:block;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2563eb;margin-bottom:.5rem}.cxg-guides .cxg-card b{display:block;color:#0f172a;font-size:1.05rem;line-height:1.4;margin-bottom:.8rem}.cxg-guides .cxg-card i{font-style:normal;color:#2563eb;font-weight:700}@media (max-width:860px){.cxg-guides .cxg-grid{grid-template-columns:1fr}.cxg-guides{padding:3rem 1rem}}<\/style><div class=\"cxg-wrap\"><h2>Guides for hospitality and retail teams<\/h2><div class=\"cxg-grid\"><a class=\"cxg-card\" href=\"\/en\/blog\/beyond-the-status-quo-accelerate-onboarding-and-boost-engagement-by-leveraging-ai-tutors-in-training\/\"><span>Guide<\/span><b>Beyond the Status Quo: Accelerate Onboarding and Boost Engagement by Leveraging AI Tutors in Training<\/b><i>Read the guide<\/i><\/a><a class=\"cxg-card\" href=\"\/en\/blog\/from-overwhelmed-teams-to-instant-answers-reducing-errors-and-support-tickets-with-an-embedded-ai-tutor\/\"><span>Guide<\/span><b>From Overwhelmed Teams to Instant Answers: Reducing Errors and Support Tickets with an Embedded AI Tutor<\/b><i>Read the guide<\/i><\/a><a class=\"cxg-card\" href=\"\/en\/blog\/measuring-what-matters-the-roi-of-combining-library-content-and-accredited-training\/\"><span>Guide<\/span><b>Measuring What Matters: The ROI of Combining Library Content and Accredited Training<\/b><i>Read the guide<\/i><\/a><\/div><\/div><\/section>\n<section class=\"section\" id=\"contact\">\r\n            <div class=\"terminal-grid\">\r\n                <div>\r\n                    <span class=\"eyebrow\">Strategic Verification<\/span>\r\n                    <h2 class=\"list-title\" style=\"margin-bottom: 3rem;\">FAQ<\/h2>\r\n                    <div class=\"arch-line line-anim\"><\/div>\r\n                    <div class=\"faq-item\"><div class=\"faq-q\"><span>Can the learning experience match the standard of our brand?<\/span><span class=\"faq-icon\">+<\/span><\/div><div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Yes: that is the point of bespoke. We build the visual and experiential quality premium brands require, so the training reflects the brand rather than diluting it.<\/p><\/div><\/div><\/div>\r\n                    <div class=\"arch-line line-anim\"><\/div>\r\n                    <div class=\"faq-item\"><div class=\"faq-q\"><span>Can you deliver in the languages our teams and guests speak?<\/span><span class=\"faq-icon\">+<\/span><\/div><div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Yes: the same interactive module in Arabic, English, and other languages from a single production process.<\/p><\/div><\/div><\/div>\r\n                    <div class=\"arch-line line-anim\"><\/div>\r\n                    <div class=\"faq-item\"><div class=\"faq-q\"><span>Do modules work on mobile for frontline staff?<\/span><span class=\"faq-icon\">+<\/span><\/div><div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Yes: every module is mobile-responsive and completable on any device, ideal for a floor-based workforce.<\/p><\/div><\/div><\/div>\r\n                    <div class=\"arch-line line-anim\"><\/div>\r\n                    <div class=\"faq-item\"><div class=\"faq-q\"><span>Can you handle onboarding across many properties or stores at once?<\/span><span class=\"faq-icon\">+<\/span><\/div><div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Yes: a scalable digital induction delivers one consistent standard to every site with tracked completion, whatever the intake volume.<\/p><\/div><\/div><\/div>\r\n                    <div class=\"arch-line line-anim\"><\/div>\r\n                    <div class=\"faq-item\"><div class=\"faq-q\"><span>Can you include food-safety or compliance where we need it?<\/span><span class=\"faq-icon\">+<\/span><\/div><div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Yes: we build regulatory content (e.g. food safety \/ HACCP, responsible service) alongside brand and service training where your operation requires it.<\/p><\/div><\/div><\/div>\r\n                    <div class=\"arch-line line-anim\"><\/div>\r\n                    <div class=\"faq-item\"><div class=\"faq-q\"><span>How quickly can you turn around a new module for a launch?<\/span><span class=\"faq-icon\">+<\/span><\/div><div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Our FastTrack service delivers a fully interactive module in as little as 4 working days, built for season launches and new-collection rollouts.<\/p><\/div><\/div><\/div>\r\n                    <div class=\"arch-line line-anim\"><\/div>\r\n                <\/div>\r\n                <div class=\"form-wrap\">\r\n                    <span class=\"eyebrow\">Next Steps<\/span>\r\n                    <h2 class=\"list-title\" style=\"margin-bottom: 4rem;\">Secure a<br>Consultation.<\/h2>\r\n                    \r\n                    <!-- PASTE YOUR CF7 SHORTCODE HERE TO REPLACE THIS -->\r\n                   \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f65000-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"65000\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/en\/wp-json\/wp\/v2\/pages\/64902#wpcf7-f65000-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<div style=\"display: none;\">\n<input type=\"hidden\" name=\"_wpcf7\" value=\"65000\" \/>\n<input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.0.2\" \/>\n<input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/>\n<input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f65000-o1\" \/>\n<input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/>\n<input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/div>\n<div class=\"input-group\">\n\t<p><label>Full name<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Your name\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span>\n\t<\/p>\n<\/div>\n<div class=\"input-group\">\n\t<p><label>Work email<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"you@brand.com\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span>\n\t<\/p>\n<\/div>\n<div class=\"input-group\">\n\t<p><label>Requirement<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"2\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"Tell us about your brand or service training requirement\" name=\"your-message\"><\/textarea><\/span>\n\t<\/p>\n<\/div>\n<div style=\"display: none;\">\n\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"utm_source\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_source\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"utm_medium\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_medium\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"utm_campaign\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_campaign\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"utm_term\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_term\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"utm_content\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_content\" \/><\/span>\n\t<\/p>\n<\/div>\n<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner btn-submit\" type=\"submit\" value=\"Book My Free Demo\" \/>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\r\n\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n    const lenis = new Lenis({ duration: 1.2, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), smooth: true });\r\n    lenis.on('scroll', ScrollTrigger.update);\r\n    gsap.ticker.add((time) => { lenis.raf(time * 1000); });\r\n    gsap.ticker.lagSmoothing(0);\r\n\r\n    \/\/ ACT I: Vitrine doors part, then headline\/meta\/actions fade in\r\n    document.fonts.ready.then(() => {\r\n        const tl = gsap.timeline({ delay: 0.2 });\r\n        tl.to('.vitrine-left', { xPercent: -100, duration: 1.1, ease: \"power4.inOut\" }, 0.3);\r\n        tl.to('.vitrine-right', { xPercent: 100, duration: 1.1, ease: \"power4.inOut\" }, 0.3);\r\n        tl.to('.vitrine-seam', { opacity: 1, duration: 0.6 }, 1.2);\r\n        tl.to('.hero-meta-strip', { opacity: 1, duration: 0.7, ease: \"power2.out\" }, 1.0);\r\n        tl.to('.hero-title-wrap .eyebrow', { opacity: 1, duration: 0.6, ease: \"power2.out\" }, 1.15);\r\n        tl.to('.hero-title', { opacity: 1, duration: 0.9, ease: \"power2.out\" }, 1.3);\r\n        tl.to('.hero-sub', { opacity: 1, duration: 0.8, ease: \"power2.out\" }, 1.5);\r\n        tl.to('.hero-actions', { opacity: 1, duration: 0.8, ease: \"power2.out\" }, 1.65);\r\n    });\r\n\r\n    \/\/ Both images safely inherit this unified parallax logic\r\n    gsap.to('.hero-img-bw, .hero-img-color', { yPercent: 6, ease: \"none\", scrollTrigger: { trigger: \".hero\", start: \"top top\", end: \"bottom top\", scrub: true } });\r\n\r\n    \/\/ Premium Floating Glass Lens Engine (Upgraded Size & Tactile Zoom)\r\n    if (window.matchMedia('(hover: hover) and (pointer: fine)').matches) {\r\n        const heroEl = document.querySelector('.hero');\r\n        const heroBg = document.querySelector('.hero-bg');\r\n        const lens = document.querySelector('.glass-lens');\r\n        const lensBg = document.querySelector('.glass-lens-bg');\r\n        \r\n        if (heroEl && heroBg && lens && lensBg) {\r\n            const lensRadius = 240; \/\/ Matches CSS 480px width \/ 2\r\n            const baseMag = 1.08;   \/\/ Base magnification\r\n            const zoomMag = 1.45;   \/\/ Deep inspection magnification on click\r\n            \r\n            \/\/ Store coordinates to update offset smoothly during zoom\r\n            let currentPos = { x: window.innerWidth \/ 2, y: window.innerHeight \/ 2 };\r\n            let magState = { value: baseMag };\r\n            \r\n            gsap.set(lensBg, { scale: baseMag, transformOrigin: \"0 0\" });\r\n            \r\n            \/\/ High-performance GSAP quickSetters\r\n            const xToLens = gsap.quickTo(lens, \"x\", { duration: 0.15, ease: \"power3\" });\r\n            const yToLens = gsap.quickTo(lens, \"y\", { duration: 0.15, ease: \"power3\" });\r\n            const xToBg = gsap.quickTo(lensBg, \"x\", { duration: 0.15, ease: \"power3\" });\r\n            const yToBg = gsap.quickTo(lensBg, \"y\", { duration: 0.15, ease: \"power3\" });\r\n            \r\n            \/\/ Centralized calculation function\r\n            const updateLensOptics = () => {\r\n                xToBg(lensRadius - (currentPos.x * magState.value));\r\n                yToBg(lensRadius - (currentPos.y * magState.value));\r\n            };\r\n\r\n            \/\/ Track Mouse\r\n            heroEl.addEventListener('mousemove', (e) => {\r\n                const rect = heroBg.getBoundingClientRect();\r\n                currentPos.x = e.clientX - rect.left;\r\n                currentPos.y = e.clientY - rect.top;\r\n                \r\n                xToLens(currentPos.x);\r\n                yToLens(currentPos.y);\r\n                updateLensOptics();\r\n            });\r\n            \r\n            \/\/ Hover States\r\n            heroEl.addEventListener('mouseenter', () => lens.classList.add('active'));\r\n            heroEl.addEventListener('mouseleave', () => {\r\n                lens.classList.remove('active');\r\n                lens.classList.remove('is-zoomed');\r\n                \/\/ Reset zoom if cursor leaves the hero while holding click\r\n                gsap.to(magState, { value: baseMag, duration: 0.5, ease: \"power3.out\", onUpdate: () => {\r\n                    gsap.set(lensBg, { scale: magState.value });\r\n                    updateLensOptics();\r\n                }});\r\n            });\r\n\r\n            \/\/ Tactile Click-to-Zoom Interaction\r\n            heroEl.addEventListener('mousedown', () => {\r\n                lens.classList.add('is-zoomed');\r\n                gsap.to(magState, { \r\n                    value: zoomMag, \r\n                    duration: 0.6, \r\n                    ease: \"power4.out\", \/\/ Sharp, mechanical snap-in\r\n                    onUpdate: () => {\r\n                        gsap.set(lensBg, { scale: magState.value });\r\n                        updateLensOptics();\r\n                    }\r\n                });\r\n            });\r\n\r\n            \/\/ Release to Zoom Out\r\n            heroEl.addEventListener('mouseup', () => {\r\n                lens.classList.remove('is-zoomed');\r\n                gsap.to(magState, { \r\n                    value: baseMag, \r\n                    duration: 0.5, \r\n                    ease: \"power3.out\", \/\/ Smooth release\r\n                    onUpdate: () => {\r\n                        gsap.set(lensBg, { scale: magState.value });\r\n                        updateLensOptics();\r\n                    }\r\n                });\r\n            });\r\n        }\r\n    }\r\n\r\n    gsap.utils.toArray('.line-anim').forEach(line => {\r\n        gsap.to(line, { scaleX: 1, duration: 1.5, ease: \"power3.inOut\", scrollTrigger: { trigger: line, start: \"top 95%\" } });\r\n    });\r\n\r\n    gsap.utils.toArray('.gsap-reveal').forEach(el => {\r\n        gsap.fromTo(el, { opacity: 0, y: 40 }, { opacity: 1, y: 0, duration: 1, ease: \"power3.out\", scrollTrigger: { trigger: el, start: \"top 85%\" } });\r\n    });\r\n\r\n    \/\/ ACT III: Guest Journey step data + interaction\r\n    const journeyData = [\r\n        { title: \"Brand standards that reflect your brand, not a template\", desc: \"The way your people greet, advise, and serve is your brand made real. Off-the-shelf hospitality content teaches a generic standard. We build training around your specific service rituals, tone, and guest promise \u2014 so the experience on the floor matches the experience you sell.\" },\r\n        { title: \"High turnover, seasonal peaks, and a multi-site frontline\", desc: \"Hotels, boutiques, and attractions manage constant new starters and seasonal surges across many properties. A scalable digital induction delivers the same standard to every new hire, on day one, however many join and wherever they are.\" },\r\n        { title: \"Product knowledge and clienteling for luxury retail\", desc: \"Client-facing staff must embody heritage, precision, and product depth. We build bespoke product and clienteling training that equips advisers to represent the maison with the fluency a high-net-worth client expects.\" },\r\n        { title: \"A multilingual, multinational guest-facing workforce\", desc: \"Your teams and your guests span the world. We build the same interactive module in multiple languages from a single production process, so every team member is trained to standard in their own language.\" },\r\n        { title: \"Consistency across every property, store, and outlet\", desc: \"One brand, dozens of locations, one standard. Digital learning delivers identical training to every site with tracked completion \u2014 plus food-safety, responsible-service, and compliance content where regulation requires it.\" }\r\n    ];\r\n    const journeySteps = document.querySelectorAll('.journey-step');\r\n    const journeyTitle = document.getElementById('journeyTitle');\r\n    const journeyDesc = document.getElementById('journeyDesc');\r\n    const journeyDetail = document.getElementById('journeyDetail');\r\n    const journeyPin = document.getElementById('journeyPin');\r\n    const journeyLineFill = document.getElementById('journeyLineFill');\r\n    const journeyScrollHint = document.getElementById('journeyScrollHint');\r\n    const totalSteps = journeySteps.length;\r\n    let journeyCurrentIndex = 0;\r\n    let journeyTextBusy = false;\r\n\r\n    \/\/ Lock journey-detail to the tallest of the 5 states so swapping text\r\n    \/\/ never resizes the pinned container (which would jolt the scroll-scrub).\r\n    function lockJourneyDetailHeight() {\r\n        journeyDetail.style.height = 'auto';\r\n        const probe = journeyDetail.cloneNode(true);\r\n        probe.id = '';\r\n        probe.style.position = 'absolute';\r\n        probe.style.visibility = 'hidden';\r\n        probe.style.pointerEvents = 'none';\r\n        probe.style.height = 'auto';\r\n        probe.style.top = '0';\r\n        probe.style.left = '0';\r\n        probe.style.width = journeyDetail.getBoundingClientRect().width + 'px';\r\n        document.body.appendChild(probe);\r\n        const probeTitle = probe.querySelector('.journey-title');\r\n        const probeDesc = probe.querySelector('.journey-desc');\r\n        let maxH = 0;\r\n        journeyData.forEach(d => {\r\n            probeTitle.textContent = d.title;\r\n            probeDesc.textContent = d.desc;\r\n            maxH = Math.max(maxH, probe.scrollHeight);\r\n        });\r\n        document.body.removeChild(probe);\r\n        journeyDetail.style.height = maxH + 'px';\r\n        if (journeyST) { journeyST.refresh(); } else { ScrollTrigger.refresh(); }\r\n    }\r\n\r\n    const journeyVisualImgs = document.querySelectorAll('.journey-visual-img');\r\n\r\n    function setJourneyStep(idx) {\r\n        if (idx === journeyCurrentIndex || journeyTextBusy) return;\r\n        journeyCurrentIndex = idx;\r\n        journeySteps.forEach(s => s.classList.remove('active'));\r\n        journeySteps[idx].classList.add('active');\r\n        journeyVisualImgs.forEach(img => {\r\n            img.classList.toggle('active', parseInt(img.getAttribute('data-step'), 10) === idx);\r\n        });\r\n        journeyTextBusy = true;\r\n        gsap.to(journeyDetail, { opacity: 0, y: 8, duration: 0.2, onComplete: () => {\r\n            journeyTitle.textContent = journeyData[idx].title;\r\n            journeyDesc.textContent = journeyData[idx].desc;\r\n            gsap.to(journeyDetail, { opacity: 1, y: 0, duration: 0.35, onComplete: () => { journeyTextBusy = false; } });\r\n        }});\r\n    }\r\n\r\n    const journeyMQ = window.matchMedia('(min-width: 769px)');\r\n    let journeyST = null;\r\n\r\n    function buildJourneyScrollTrigger() {\r\n        if (journeyST) return;\r\n        journeyPin.classList.add('is-pinned');\r\n        journeyST = ScrollTrigger.create({\r\n            trigger: journeyPin,\r\n            start: \"top top\",\r\n            end: () => \"+=\" + (window.innerHeight * (totalSteps - 1) * 0.7),\r\n            pin: true,\r\n            scrub: 0.4,\r\n            anticipatePin: 1,\r\n            invalidateOnRefresh: true,\r\n            onUpdate: (self) => {\r\n                gsap.set(journeyLineFill, { scaleX: self.progress });\r\n                const idx = Math.min(totalSteps - 1, Math.floor(self.progress * totalSteps));\r\n                setJourneyStep(idx);\r\n                if (journeyScrollHint) gsap.set(journeyScrollHint, { opacity: (self.progress > 0.02 && self.progress < 0.98) ? 1 : 0 });\r\n            }\r\n        });\r\n    }\r\n\r\n    function teardownJourneyScrollTrigger() {\r\n        if (!journeyST) return;\r\n        journeyST.kill();\r\n        journeyST = null;\r\n        journeyPin.classList.remove('is-pinned');\r\n        gsap.set(journeyLineFill, { scaleX: 0 });\r\n        if (journeyScrollHint) gsap.set(journeyScrollHint, { opacity: 0 });\r\n    }\r\n\r\n    function applyJourneyMode(e) {\r\n        if (e.matches) {\r\n            buildJourneyScrollTrigger();\r\n        } else {\r\n            teardownJourneyScrollTrigger();\r\n        }\r\n        ScrollTrigger.refresh();\r\n    }\r\n\r\n    document.fonts.ready.then(() => {\r\n        lockJourneyDetailHeight();\r\n        applyJourneyMode(journeyMQ);\r\n    });\r\n    journeyMQ.addEventListener('change', applyJourneyMode);\r\n\r\n    let journeyResizeTimer = null;\r\n    window.addEventListener('resize', () => {\r\n        clearTimeout(journeyResizeTimer);\r\n        journeyResizeTimer = setTimeout(lockJourneyDetailHeight, 200);\r\n    });\r\n\r\n    \/\/ Click still works as a fallback \/ manual override (mobile, or desktop tap)\r\n    journeySteps.forEach(step => {\r\n        step.addEventListener('click', () => {\r\n            const idx = parseInt(step.getAttribute('data-step'), 10);\r\n            setJourneyStep(idx);\r\n        });\r\n    });\r\n\r\n    document.querySelectorAll('.faq-item').forEach(item => {\r\n        item.addEventListener('click', () => {\r\n            document.querySelectorAll('.faq-item').forEach(other => { if (other !== item) other.classList.remove('active'); });\r\n            item.classList.toggle('active');\r\n            const a = item.querySelector('.faq-a');\r\n            a.style.maxHeight = item.classList.contains('active') ? a.scrollHeight + 'px' : null;\r\n            setTimeout(() => ScrollTrigger.refresh(), 500);\r\n        });\r\n    });\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\n<script type=\"application\/ld+json\">{\"@context\":\"https:\/\/schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"Can the learning experience match the standard of our brand?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes: that is the point of bespoke. We build the visual and experiential quality premium brands require, so the training reflects the brand rather than diluting it.\"}},{\"@type\":\"Question\",\"name\":\"Can you deliver in the languages our teams and guests speak?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes: the same interactive module in Arabic, English, and other languages from a single production process.\"}},{\"@type\":\"Question\",\"name\":\"Do modules work on mobile for frontline staff?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes: every module is mobile-responsive and completable on any device, ideal for a floor-based workforce.\"}},{\"@type\":\"Question\",\"name\":\"Can you handle onboarding across many properties or stores at once?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes: a scalable digital induction delivers one consistent standard to every site with tracked completion, whatever the intake volume.\"}},{\"@type\":\"Question\",\"name\":\"Can you include food-safety or compliance where we need it?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes: we build regulatory content (e.g. food safety \/ HACCP, responsible service) alongside brand and service training where your operation requires it.\"}},{\"@type\":\"Question\",\"name\":\"How quickly can you turn around a new module for a launch?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Our FastTrack service delivers a fully interactive module in as little as 4 working days, built for season launches and new-collection rollouts.\"}}]}<\/script>\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>Service &#038; Brand Standards Bespoke E-Learning forHospitality, Tourism &#038;Luxury Retail Training that reflects the calibre of your brand, and the standard your guests expect. Book a Demo For premium organisations, the quality of the learning experience has to match the quality of the brand. The Gulf&#8217;s tourism and luxury economy runs on people. Saudi Vision 2030&#8217;s giga-tourism, Dubai&#8217;s record visitor &#8230; <\/p>\n<div><a href=\"https:\/\/capytech.com\/en\/hospitality-luxury-retail\/\" class=\"more-link\">Read More<\/a><\/div>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-64902","page","type-page","status-publish","hentry","no-post-thumbnail"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.1 (Yoast SEO v24.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Hospitality and Luxury Retail E-Learning, GCC | Capytech<\/title>\n<meta name=\"description\" content=\"Brand standards, service and product knowledge e-learning for GCC hotels, tourism and luxury retail, bilingual and built mobile first.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/capytech.com\/en\/hospitality-luxury-retail\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hospitality and Luxury Retail E-Learning, GCC | Capytech\" \/>\n<meta property=\"og:description\" content=\"Brand standards, service and product knowledge e-learning for GCC hotels, tourism and luxury retail, bilingual and built mobile first.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/capytech.com\/en\/hospitality-luxury-retail\/\" \/>\n<meta property=\"og:site_name\" content=\"Capytech\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/capytech\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-27T10:39:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/images.unsplash.com\/photo-1445019980597-93fa8acb246c?w=1800\" \/>\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=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/capytech.com\/en\/hospitality-luxury-retail\/\",\"url\":\"https:\/\/capytech.com\/en\/hospitality-luxury-retail\/\",\"name\":\"Hospitality and Luxury Retail E-Learning, GCC | Capytech\",\"isPartOf\":{\"@id\":\"https:\/\/capytech.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/capytech.com\/en\/hospitality-luxury-retail\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/capytech.com\/en\/hospitality-luxury-retail\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/images.unsplash.com\/photo-1445019980597-93fa8acb246c?w=1800\",\"datePublished\":\"2026-08-04T09:46:48+00:00\",\"dateModified\":\"2026-10-27T10:39:08+00:00\",\"description\":\"Brand standards, service and product knowledge e-learning for GCC hotels, tourism and luxury retail, bilingual and built mobile first.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/capytech.com\/en\/hospitality-luxury-retail\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/capytech.com\/en\/hospitality-luxury-retail\/#primaryimage\",\"url\":\"https:\/\/images.unsplash.com\/photo-1445019980597-93fa8acb246c?w=1800\",\"contentUrl\":\"https:\/\/images.unsplash.com\/photo-1445019980597-93fa8acb246c?w=1800\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/capytech.com\/en\/#website\",\"url\":\"https:\/\/capytech.com\/en\/\",\"name\":\"Capytech\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/capytech.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/capytech.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/capytech.com\/en\/#organization\",\"name\":\"Capytech\",\"url\":\"https:\/\/capytech.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/capytech.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/capytech.com\/wp-content\/uploads\/2021\/10\/CapytechLogo_V2_2020.png\",\"contentUrl\":\"https:\/\/capytech.com\/wp-content\/uploads\/2021\/10\/CapytechLogo_V2_2020.png\",\"width\":2443,\"height\":629,\"caption\":\"Capytech\"},\"image\":{\"@id\":\"https:\/\/capytech.com\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/capytech\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Hospitality and Luxury Retail E-Learning, GCC | Capytech","description":"Brand standards, service and product knowledge e-learning for GCC hotels, tourism and luxury retail, bilingual and built mobile first.","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:\/\/capytech.com\/en\/hospitality-luxury-retail\/","og_locale":"en_US","og_type":"article","og_title":"Hospitality and Luxury Retail E-Learning, GCC | Capytech","og_description":"Brand standards, service and product knowledge e-learning for GCC hotels, tourism and luxury retail, bilingual and built mobile first.","og_url":"https:\/\/capytech.com\/en\/hospitality-luxury-retail\/","og_site_name":"Capytech","article_publisher":"https:\/\/www.facebook.com\/capytech","article_modified_time":"2026-10-27T10:39:08+00:00","og_image":[{"url":"https:\/\/images.unsplash.com\/photo-1445019980597-93fa8acb246c?w=1800","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/capytech.com\/en\/hospitality-luxury-retail\/","url":"https:\/\/capytech.com\/en\/hospitality-luxury-retail\/","name":"Hospitality and Luxury Retail E-Learning, GCC | Capytech","isPartOf":{"@id":"https:\/\/capytech.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/capytech.com\/en\/hospitality-luxury-retail\/#primaryimage"},"image":{"@id":"https:\/\/capytech.com\/en\/hospitality-luxury-retail\/#primaryimage"},"thumbnailUrl":"https:\/\/images.unsplash.com\/photo-1445019980597-93fa8acb246c?w=1800","datePublished":"2026-08-04T09:46:48+00:00","dateModified":"2026-10-27T10:39:08+00:00","description":"Brand standards, service and product knowledge e-learning for GCC hotels, tourism and luxury retail, bilingual and built mobile first.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/capytech.com\/en\/hospitality-luxury-retail\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/capytech.com\/en\/hospitality-luxury-retail\/#primaryimage","url":"https:\/\/images.unsplash.com\/photo-1445019980597-93fa8acb246c?w=1800","contentUrl":"https:\/\/images.unsplash.com\/photo-1445019980597-93fa8acb246c?w=1800"},{"@type":"WebSite","@id":"https:\/\/capytech.com\/en\/#website","url":"https:\/\/capytech.com\/en\/","name":"Capytech","description":"","publisher":{"@id":"https:\/\/capytech.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/capytech.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/capytech.com\/en\/#organization","name":"Capytech","url":"https:\/\/capytech.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/capytech.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/capytech.com\/wp-content\/uploads\/2021\/10\/CapytechLogo_V2_2020.png","contentUrl":"https:\/\/capytech.com\/wp-content\/uploads\/2021\/10\/CapytechLogo_V2_2020.png","width":2443,"height":629,"caption":"Capytech"},"image":{"@id":"https:\/\/capytech.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/capytech"]}]}},"_links":{"self":[{"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/pages\/64902","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/comments?post=64902"}],"version-history":[{"count":34,"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/pages\/64902\/revisions"}],"predecessor-version":[{"id":65619,"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/pages\/64902\/revisions\/65619"}],"wp:attachment":[{"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/media?parent=64902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}