{"id":4075,"date":"2026-03-11T15:02:02","date_gmt":"2026-03-11T15:02:02","guid":{"rendered":"https:\/\/3vfltd.com\/?page_id=4075"},"modified":"2026-10-01T14:10:31","modified_gmt":"2026-10-01T14:10:31","slug":"about-us","status":"publish","type":"page","link":"https:\/\/3vfltd.com\/about-us\/","title":{"rendered":"About Us"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n
\r\n
\r\n
\t\r\n
<\/div>\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n READ MORE <\/i>\r\n <\/a>\r\n <\/div>\r\n
\r\n
\r\n \r\n <\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n
\n\t\t\t\t
\n\t\t\t\t\t\n\n3VF About Page<\/title>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&family=Allura&display=swap\" rel=\"stylesheet\">\n\n<style>\n \/* =====================================================================\n 3VF LTD \u2014 About page\n Every rule is scoped under .vf-about so nothing leaks into the theme's\n header, footer or other blocks. Paste into a full-width Custom HTML\n block (Elementor: HTML widget inside a full-width section).\n ===================================================================== *\/\n\n \/* Only when this file is opened on its own (the block is then the page's\n first element): drop the browser's default 8px page margin, which showed\n as a white line above the hero. Inside WordPress this never matches. *\/\n body:has(> .vf-about:first-child){ margin:0; }\n\n .vf-about{\n --orange:#ff7a00;\n --orange-hover:#ff8d24;\n --orange-ink:#a84d00; \/* orange for small text on light backgrounds (AA) *\/\n --orange-lite:#ffab5e; \/* orange for small text on teal (AA) *\/\n --on-orange:#1b0d00;\n --teal:#0b4f6c;\n --teal-2:#094660;\n --teal-deep:#073a50;\n --teal-night:#052b3c;\n --teal-soft:#7fb0c3;\n --teal-pale:#a9cddb;\n --teal-mist:#e3eef2;\n --cream:#f6f2ea;\n --cream-2:#efe8dc;\n --ink:#0e2733;\n --ink-soft:#4d6571;\n --line:rgba(11,79,108,.14);\n --line-strong:rgba(11,79,108,.28);\n --font:-apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"SF Pro Text\", \"Inter\", \"Helvetica Neue\", Arial, sans-serif;\n --font-script:\"Allura\", \"Brush Script MT\", cursive;\n --font-mono:ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n --ease:cubic-bezier(.22,.61,.36,1);\n --ease-expo:cubic-bezier(.16,1,.3,1);\n --ease-io:cubic-bezier(.65,0,.35,1);\n \/* Screen-size scale: 1px on screens up to 1440px wide (laptops, tablets,\n phones look exactly as designed). On wider monitors it grows with the\n screen, so the whole page keeps the same proportions on 14\" or 24\"\n (capped at 1.5x for very large displays). Every size below uses it. *\/\n --u:clamp(1px, calc(100vw \/ 1440), 1.5px);\n --max:calc(1200 * var(--u));\n --slope:clamp(calc(40 * var(--u)), 6.5vw, calc(110 * var(--u)));\n --stick:104px; \/* clearance for the theme's sticky header, which doesn't scale *\/\n --sec:clamp(calc(56 * var(--u)), 7vw, calc(96 * var(--u))); \/* space between sections *\/\n --sec-sm:clamp(calc(36 * var(--u)), 4.5vw, calc(60 * var(--u))); \/* space between blocks inside a section *\/\n\n position:relative;\n width:100%;\n max-width:100%;\n margin:0;\n padding:0;\n \/* Paint edge-to-edge, even inside a narrow theme container,\n without widening the page or causing a side scrollbar *\/\n background:var(--cream);\n box-shadow:0 0 0 100vmax var(--cream);\n clip-path:inset(0 -100vmax);\n color:var(--ink);\n font-family:var(--font);\n font-size:calc(17 * var(--u));\n line-height:1.55;\n letter-spacing:-.005em;\n -webkit-font-smoothing:antialiased;\n -moz-osx-font-smoothing:grayscale;\n text-rendering:optimizeLegibility;\n }\n .vf-about *, .vf-about *::before, .vf-about *::after{ box-sizing:border-box; }\n .vf-about img{ display:block; max-width:100%; }\n .vf-about h1, .vf-about h2, .vf-about h3, .vf-about h4, .vf-about p,\n .vf-about ol, .vf-about ul, .vf-about li, .vf-about figure{ margin:0; padding:0; }\n .vf-about h1, .vf-about h2, .vf-about h3, .vf-about h4{\n font-family:var(--font); color:inherit; text-transform:none; font-weight:700; text-wrap:balance;\n }\n .vf-about p{ text-wrap:pretty; }\n .vf-about ol, .vf-about ul{ list-style:none; }\n .vf-about a{ color:inherit; text-decoration:none; }\n .vf-about button{\n font:inherit; color:inherit; background:none; border:0; padding:0; margin:0;\n cursor:pointer; box-shadow:none; text-transform:none; letter-spacing:inherit;\n line-height:inherit; border-radius:0; min-height:0; width:auto; height:auto;\n }\n .vf-about :focus-visible{ outline:calc(3 * var(--u)) solid var(--orange); outline-offset:calc(3 * var(--u)); border-radius:calc(10 * var(--u)); }\n .vf-about [hidden]{ display:none !important; }\n .vf-about .vf-sr{\n position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;\n overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;\n }\n\n .vf-about .vf-sec{ position:relative; }\n .vf-about .vf-wrap{ position:relative; z-index:2; width:100%; max-width:var(--max); margin:0 auto; padding:0 calc(24 * var(--u)); }\n .vf-about .vf-dark{ color:#fff; }\n\n \/* Full-bleed band behind dark sections: the box-shadow paints past the\n container, clip-path cuts the diagonal edges across the viewport. *\/\n .vf-about .vf-band{\n position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;\n background:var(--teal);\n box-shadow:0 0 0 100vmax var(--band-edge, var(--teal));\n }\n\n \/* ---------- Shared type ---------- *\/\n .vf-about .vf-eyebrow{\n display:inline-flex; align-items:center; gap:calc(12 * var(--u));\n font-size:calc(13 * var(--u)); font-weight:600; letter-spacing:.14em; text-transform:uppercase;\n color:var(--orange-ink);\n }\n .vf-about .vf-eyebrow::before{ content:''; width:calc(24 * var(--u)); height:2px; border-radius:2px; background:var(--orange); }\n .vf-about .vf-dark .vf-eyebrow{ color:var(--orange-lite); }\n\n .vf-about .vf-h2{\n font-size:clamp(calc(38 * var(--u)), 5.4vw, calc(72 * var(--u))); line-height:1.02; letter-spacing:-.04em;\n font-weight:700; color:var(--ink); margin-top:calc(18 * var(--u));\n }\n .vf-about .vf-dark .vf-h2{ color:#fff; }\n\n .vf-about .vf-script{\n position:relative; display:inline-block;\n font-family:var(--font-script); font-weight:400; font-style:normal;\n font-size:1.38em; line-height:.7; letter-spacing:0;\n padding:0 .1em 0 .02em;\n color:var(--teal);\n }\n .vf-about .vf-dark .vf-script{ color:var(--orange); }\n .vf-about .vf-swash{ position:absolute; left:0; bottom:-.2em; width:104%; height:auto; overflow:visible; pointer-events:none; }\n .vf-about .vf-swash path{ fill:none; stroke:var(--orange); stroke-width:5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; }\n .vf-about.vf-js .vf-swash path{ stroke-dashoffset:1; transition:stroke-dashoffset 1.3s var(--ease-io) .9s; }\n .vf-about.vf-js .is-in .vf-swash path{ stroke-dashoffset:0; }\n\n \/* ---------- Buttons ---------- *\/\n .vf-about .vf-actions{ display:flex; flex-wrap:wrap; gap:calc(14 * var(--u)); }\n .vf-about .vf-btn{\n position:relative; display:inline-flex; align-items:center; gap:calc(12 * var(--u));\n height:calc(54 * var(--u)); padding:0 calc(10 * var(--u)) 0 calc(26 * var(--u)); border-radius:calc(999 * var(--u));\n font-size:calc(15.5 * var(--u)); font-weight:600; letter-spacing:-.01em; white-space:nowrap;\n transition:transform .6s var(--ease-expo), background-color .3s, color .3s, border-color .3s, box-shadow .3s;\n will-change:transform;\n }\n .vf-about .vf-btn-label{ display:inline-block; transition:transform .6s var(--ease-expo); }\n .vf-about .vf-btn-icon{\n width:calc(36 * var(--u)); height:calc(36 * var(--u)); border-radius:50%; flex:none;\n display:grid; place-items:center; transition:transform .5s var(--ease-expo);\n }\n .vf-about .vf-btn-icon svg{ width:calc(15 * var(--u)); height:calc(15 * var(--u)); }\n .vf-about .vf-btn:hover .vf-btn-icon{ transform:rotate(-45deg); }\n .vf-about .vf-btn:hover .vf-btn-icon--play{ transform:scale(1.1); }\n .vf-about .vf-btn--primary{ background:var(--orange); color:var(--on-orange); box-shadow:0 calc(14 * var(--u)) calc(34 * var(--u)) calc(-14 * var(--u)) rgba(255,122,0,.8); }\n .vf-about .vf-btn--primary .vf-btn-icon{ background:var(--on-orange); color:var(--orange); }\n .vf-about .vf-btn--primary:hover{ background:var(--orange-hover); }\n .vf-about .vf-btn--ghost{\n background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.24);\n -webkit-backdrop-filter:blur(calc(12 * var(--u))); backdrop-filter:blur(calc(12 * var(--u)));\n }\n .vf-about .vf-btn--ghost .vf-btn-icon{ background:rgba(255,255,255,.14); }\n .vf-about .vf-btn--ghost:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); }\n\n \/* =====================================================================\n Floor indicator \u2014 a sticky lift display that tracks the section\n you're on and opens a button panel to jump between \"floors\".\n ===================================================================== *\/\n .vf-about .vf-floor-rail{ position:sticky; top:0; height:0; z-index:60; }\n .vf-about .vf-floor{\n position:absolute; right:clamp(calc(14 * var(--u)), 2vw, calc(28 * var(--u))); top:calc(100vh - calc(88 * var(--u)));\n transition:opacity .4s, transform .5s var(--ease-expo), visibility 0s;\n }\n \/* Hidden in the lobby so it never sits on top of the lift photos *\/\n .vf-about .vf-floor.is-away{ opacity:0; visibility:hidden; transform:translateY(calc(14 * var(--u))); transition:opacity .4s, transform .5s var(--ease-expo), visibility 0s .4s; }\n .vf-about .vf-floor-display{\n display:flex; align-items:center; gap:calc(10 * var(--u)); height:calc(54 * var(--u)); padding:0 calc(18 * var(--u)) 0 calc(14 * var(--u));\n border-radius:calc(18 * var(--u)); color:#fff;\n background:rgba(5,24,33,.88);\n -webkit-backdrop-filter:blur(calc(14 * var(--u))) saturate(1.4); backdrop-filter:blur(calc(14 * var(--u))) saturate(1.4);\n box-shadow:0 calc(18 * var(--u)) calc(40 * var(--u)) calc(-16 * var(--u)) rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08);\n transition:transform .5s var(--ease-expo);\n }\n .vf-about .vf-floor-display:hover{ transform:translateY(calc(-3 * var(--u))); }\n .vf-about .vf-floor-arrow{ width:calc(14 * var(--u)); height:calc(14 * var(--u)); color:var(--orange); opacity:.35; transition:transform .45s var(--ease-expo), opacity .3s; }\n .vf-about .vf-floor-arrow.is-moving{ opacity:1; }\n .vf-about .vf-floor-arrow[data-dir=\"down\"]{ transform:rotate(180deg); }\n .vf-about .vf-floor-num{\n position:relative; width:calc(34 * var(--u)); height:calc(30 * var(--u)); overflow:hidden;\n font-family:var(--font-mono); font-weight:700; font-size:calc(22 * var(--u)); color:var(--orange);\n text-shadow:0 0 calc(14 * var(--u)) rgba(255,122,0,.6);\n }\n .vf-about .vf-floor-num span{ position:absolute; inset:0; display:grid; place-items:center; }\n .vf-about .vf-floor-name{\n min-width:calc(84 * var(--u)); text-align:left; font-size:calc(11.5 * var(--u)); font-weight:600;\n letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.78);\n }\n .vf-about .vf-floor-panel{\n position:absolute; right:0; bottom:calc(66 * var(--u));\n display:grid; grid-template-columns:repeat(2, calc(48 * var(--u))); gap:calc(12 * var(--u));\n padding:calc(18 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); border-radius:calc(26 * var(--u));\n background:linear-gradient(160deg, #f3f5f6, #cdd4d9);\n box-shadow:0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-24 * var(--u)) rgba(0,0,0,.55), inset 0 1px 0 #fff;\n transform-origin:bottom right;\n animation:vf-pop .45s var(--ease-expo);\n }\n .vf-about .vf-floor-panel-title{\n grid-column:1 \/ -1; text-align:center; font-size:calc(10.5 * var(--u)); font-weight:700;\n letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:2px;\n }\n .vf-about .vf-floor-btn{\n width:calc(48 * var(--u)); height:calc(48 * var(--u)); border-radius:50%;\n background:radial-gradient(circle at 35% 30%, #ffffff, #d5dbdf 70%);\n box-shadow:inset 0 0 0 2px #b4bec4, 0 calc(3 * var(--u)) calc(7 * var(--u)) rgba(0,0,0,.18);\n font-weight:700; font-size:calc(14 * var(--u)); color:var(--ink);\n transition:box-shadow .3s, color .3s, transform .2s;\n }\n .vf-about .vf-floor-btn:active{ transform:scale(.94); }\n .vf-about .vf-floor-btn.is-current,\n .vf-about .vf-floor-btn.is-lit{\n color:var(--orange-ink);\n box-shadow:inset 0 0 0 2px var(--orange), 0 0 0 calc(4 * var(--u)) rgba(255,122,0,.2), 0 0 calc(20 * var(--u)) rgba(255,122,0,.55);\n }\n @keyframes vf-pop{ from{ opacity:0; transform:scale(.85) translateY(calc(10 * var(--u))); } to{ opacity:1; transform:none; } }\n @keyframes vf-in-up{ from{ transform:translateY(100%); opacity:0; } to{ transform:none; opacity:1; } }\n @keyframes vf-in-down{ from{ transform:translateY(-100%); opacity:0; } to{ transform:none; opacity:1; } }\n @keyframes vf-out-up{ to{ transform:translateY(-100%); opacity:0; } }\n @keyframes vf-out-down{ to{ transform:translateY(100%); opacity:0; } }\n .vf-about .vf-in-up{ animation:vf-in-up .45s var(--ease-expo) both; }\n .vf-about .vf-in-down{ animation:vf-in-down .45s var(--ease-expo) both; }\n .vf-about .vf-out-up{ animation:vf-out-up .45s var(--ease-expo) both; }\n .vf-about .vf-out-down{ animation:vf-out-down .45s var(--ease-expo) both; }\n\n \/* =====================================================================\n G \u00b7 Lobby \u2014 hero\n ===================================================================== *\/\n .vf-about .vf-hero > .vf-band{\n --band-edge:#094660;\n background:\n radial-gradient(55% 60% at 82% 30%, rgba(127,176,195,.30), rgba(127,176,195,0) 70%),\n radial-gradient(45% 55% at 0% 100%, rgba(255,122,0,.18), rgba(255,122,0,0) 70%),\n linear-gradient(170deg, #0b4f6c 0%, #094660 60%, #073a50 100%);\n clip-path:polygon(-100vmax 0, calc(100% + 100vmax) 0, calc(100% + 100vmax) calc(100% - var(--slope)),\n calc(50% + 50vw) calc(100% - var(--slope)), calc(50% - 50vw) 100%, -100vmax 100%);\n }\n .vf-about .vf-hero > .vf-band::before{\n content:''; position:absolute; inset:0;\n background-image:linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);\n background-size:calc(72 * var(--u)) calc(72 * var(--u));\n -webkit-mask-image:radial-gradient(70% 65% at 70% 40%, #000 15%, transparent 75%);\n mask-image:radial-gradient(70% 65% at 70% 40%, #000 15%, transparent 75%);\n }\n .vf-about .vf-hero-inner{\n position:relative; z-index:2;\n padding:clamp(calc(64 * var(--u)), 8vw, calc(120 * var(--u))) 0 calc(var(--slope) + clamp(calc(150 * var(--u)), 14vw, calc(190 * var(--u))));\n overflow:hidden; overflow:clip;\n }\n .vf-about .vf-hero-grid{\n display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);\n gap:clamp(calc(40 * var(--u)), 6vw, calc(88 * var(--u))); align-items:center;\n }\n .vf-about .vf-hero-copy, .vf-about .vf-hero-visual{ will-change:transform; }\n .vf-about .vf-defs{ position:absolute; width:0; height:0; overflow:hidden; }\n \/* Logo banner, cropped to the artwork; #vfOnDark removes its white background *\/\n .vf-about .vf-brand{ position:relative; display:block; width:min(100%, calc(520 * var(--u))); aspect-ratio:1456 \/ 165; overflow:hidden; }\n .vf-about .vf-brand img{\n position:absolute; left:50%; top:50%; width:109.9%; max-width:none; height:auto;\n transform:translate(-51%, -48.5%); filter:url(#vfOnDark);\n }\n .vf-about .vf-scramble{\n margin-top:calc(30 * var(--u)); min-height:1.5em;\n font-family:var(--font-mono); font-size:calc(12.5 * var(--u)); font-weight:500;\n letter-spacing:.3em; color:var(--teal-pale); white-space:nowrap;\n }\n .vf-about .vf-h1{\n font-size:clamp(calc(44 * var(--u)), 6.4vw, calc(80 * var(--u))); line-height:1; letter-spacing:-.045em;\n font-weight:700; color:#fff; margin:calc(14 * var(--u)) 0 calc(26 * var(--u));\n }\n .vf-about .vf-hero-lead{\n max-width:34em; font-size:clamp(calc(17 * var(--u)), 1.4vw, calc(20 * var(--u))); line-height:1.6;\n color:rgba(255,255,255,.8);\n }\n .vf-about .vf-hero .vf-actions{ margin-top:calc(36 * var(--u)); }\n .vf-about .vf-hero-standards{\n display:flex; flex-wrap:wrap; gap:calc(8 * var(--u)) calc(18 * var(--u)); margin-top:calc(30 * var(--u));\n font-size:calc(12.5 * var(--u)); font-weight:600; letter-spacing:.08em; text-transform:uppercase;\n color:var(--teal-pale);\n }\n .vf-about .vf-hero-standards span{ display:inline-flex; align-items:center; gap:calc(8 * var(--u)); }\n .vf-about .vf-hero-standards span::before{ content:''; width:calc(5 * var(--u)); height:calc(5 * var(--u)); border-radius:50%; background:var(--orange); }\n\n \/* Mouse-depth layers (hero) *\/\n .vf-about .vf-depth{\n transform:translate3d(calc(var(--hx, 0) * var(--d, 0) * 1px), calc(var(--hy, 0) * var(--d, 0) * 1px), 0);\n transition:transform .9s var(--ease-expo);\n }\n\n \/* ---------- The lift: doors open onto the films ---------- *\/\n .vf-about .vf-lift-wrap{ position:relative; width:min(100%, calc(420 * var(--u))); margin-inline:auto; }\n .vf-about .vf-shape{ position:absolute; pointer-events:none; z-index:0; }\n .vf-about .vf-shape--pill{\n right:-16%; top:-8%; width:66%; height:58%; border-radius:calc(48 * var(--u));\n background:linear-gradient(160deg, rgba(127,176,195,.55), rgba(127,176,195,.12));\n }\n .vf-about .vf-shape--arc{\n left:-16%; bottom:4%; width:44%; aspect-ratio:1; border-radius:50%;\n border:calc(16 * var(--u)) solid transparent; border-top-color:var(--orange); border-left-color:var(--orange);\n rotate:-18deg; opacity:.95;\n }\n .vf-about .vf-shape--dots{ right:-10%; bottom:-6%; width:calc(92 * var(--u)); height:calc(92 * var(--u)); opacity:.9; }\n\n .vf-about .vf-lift{\n position:relative; z-index:1;\n aspect-ratio:4 \/ 5.1; border-radius:calc(30 * var(--u)); padding:calc(14 * var(--u));\n background:linear-gradient(160deg, #f5f7f8 0%, #d3d9dd 50%, #b7c0c6 100%);\n box-shadow:0 calc(60 * var(--u)) calc(100 * var(--u)) calc(-45 * var(--u)) rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.4);\n }\n .vf-about .vf-lift-head{ position:relative; height:calc(54 * var(--u)); display:flex; align-items:center; justify-content:center; }\n .vf-about .vf-lift-sound{\n position:absolute; left:calc(4 * var(--u)); top:50%; margin-top:calc(-16 * var(--u));\n min-width:calc(32 * var(--u)); height:calc(32 * var(--u)); border-radius:999px;\n display:flex; align-items:center; justify-content:center; gap:calc(6 * var(--u)); padding:0 calc(8 * var(--u));\n background:radial-gradient(circle at 35% 30%, #fff, #d2d8dc 70%);\n box-shadow:inset 0 0 0 2px #b3bdc3, 0 2px calc(5 * var(--u)) rgba(0,0,0,.18);\n color:var(--teal); transition:color .3s, box-shadow .3s;\n }\n .vf-about .vf-lift-sound:hover{ color:var(--orange-ink); box-shadow:inset 0 0 0 2px var(--orange), 0 2px calc(5 * var(--u)) rgba(0,0,0,.18); }\n .vf-about .vf-lift-sound svg{ flex:none; width:calc(16 * var(--u)); height:calc(16 * var(--u)); }\n \/* Sound is on but the browser is still holding it back: invite a tap *\/\n .vf-about .vf-lift-sound-label{ display:none; font-size:calc(11 * var(--u)); font-weight:700; letter-spacing:.02em; white-space:nowrap; }\n .vf-about .vf-lift-sound.is-blocked{ padding:0 calc(12 * var(--u)) 0 calc(9 * var(--u)); color:var(--orange-ink); animation:vf-sound-pulse 1.8s var(--ease) infinite; }\n .vf-about .vf-lift-sound.is-blocked .vf-lift-sound-label{ display:inline; }\n @keyframes vf-sound-pulse{\n 0%, 100%{ box-shadow:inset 0 0 0 2px var(--orange), 0 0 0 0 rgba(255,122,0,.45); }\n 60%{ box-shadow:inset 0 0 0 2px var(--orange), 0 0 0 calc(9 * var(--u)) rgba(255,122,0,0); }\n }\n .vf-about .vf-lift-sound[aria-pressed=\"true\"] .vf-snd-off,\n .vf-about .vf-lift-sound[aria-pressed=\"false\"] .vf-snd-on{ display:none; }\n .vf-about .vf-lift-display{\n display:flex; align-items:center; gap:calc(10 * var(--u)); height:calc(38 * var(--u)); padding:0 calc(16 * var(--u));\n border-radius:calc(10 * var(--u)); background:#061218;\n box-shadow:inset 0 0 calc(14 * var(--u)) rgba(255,122,0,.18), 0 1px 0 rgba(255,255,255,.8);\n color:var(--orange); font-family:var(--font-mono); font-weight:700; font-size:calc(21 * var(--u));\n transition:box-shadow .3s;\n }\n .vf-about .vf-lift-arrow{ width:calc(13 * var(--u)); height:calc(13 * var(--u)); transition:transform .4s var(--ease-expo), opacity .3s; opacity:.35; }\n .vf-about .vf-lift-arrow[data-dir=\"down\"]{ transform:rotate(180deg); }\n .vf-about .vf-lift.is-moving .vf-lift-arrow{ opacity:1; animation:vf-blink .56s steps(2, jump-none) infinite; }\n @keyframes vf-blink{ 50%{ opacity:.25; } }\n .vf-about .vf-lift-num{ min-width:1.3ch; text-align:center; text-shadow:0 0 calc(12 * var(--u)) rgba(255,122,0,.65); display:inline-block; }\n .vf-about .vf-lift-num.is-tick{ animation:vf-in-up .4s var(--ease-expo); }\n .vf-about .vf-lift.is-ding .vf-lift-display{ box-shadow:inset 0 0 calc(18 * var(--u)) rgba(255,122,0,.5), 0 0 0 calc(3 * var(--u)) rgba(255,122,0,.35), 0 0 calc(26 * var(--u)) rgba(255,122,0,.6); }\n .vf-about .vf-lift-cab{\n position:absolute; left:calc(14 * var(--u)); right:calc(14 * var(--u)); top:calc(68 * var(--u)); bottom:calc(14 * var(--u));\n border-radius:calc(18 * var(--u)); overflow:hidden; background:#07161d;\n box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);\n }\n \/* The whole photo is shown (contain); a blurred copy fills the space around it *\/\n .vf-about .vf-lift-bg{\n position:absolute; inset:0; width:100%; height:100%; object-fit:cover;\n filter:blur(calc(22 * var(--u))) saturate(1.1) brightness(.6); transform:scale(1.25);\n }\n .vf-about .vf-lift-img{\n position:absolute; inset:0; z-index:1; width:100%; height:100%;\n object-fit:contain; object-position:50% 40%;\n transform:scale(1); transition:transform 2.6s var(--ease-expo), opacity .4s;\n }\n .vf-about.vf-js .vf-lift:not(.is-open) .vf-lift-img{ transform:scale(1.08); }\n .vf-about .vf-lift-shade{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(7,22,29,0) 72%, rgba(7,22,29,.55)); }\n .vf-about .vf-lift-cap{\n position:absolute; left:calc(12 * var(--u)); bottom:calc(12 * var(--u)); z-index:2; max-width:calc(100% - calc(24 * var(--u)));\n padding:calc(11 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)); border-radius:calc(14 * var(--u));\n background:rgba(6,31,43,.55); color:#fff;\n -webkit-backdrop-filter:blur(calc(14 * var(--u))); backdrop-filter:blur(calc(14 * var(--u)));\n border:1px solid rgba(255,255,255,.14);\n transition:opacity .6s var(--ease) .35s, transform .8s var(--ease-expo) .35s;\n }\n .vf-about .vf-lift-cap small{ display:block; font-size:calc(11 * var(--u)); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-lite); }\n .vf-about .vf-lift-captitle{ display:block; font-size:calc(14 * var(--u)); font-weight:600; line-height:1.3; margin-top:calc(3 * var(--u)); }\n .vf-about.vf-js .vf-lift:not(.is-open) .vf-lift-cap{ opacity:0; transform:translateY(calc(12 * var(--u))); transition-delay:0s; }\n .vf-about .vf-lift-door{\n position:absolute; top:0; bottom:0; width:50%; z-index:3;\n background:\n repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 calc(3 * var(--u)), rgba(255,255,255,.08) calc(3 * var(--u)) calc(4 * var(--u))),\n linear-gradient(90deg, #a9b3b9, #e7ebed 42%, #c4ccd1 68%, #dfe4e7);\n transition:transform 1.25s cubic-bezier(.7,0,.2,1);\n }\n .vf-about .vf-lift-door--l{ left:0; transform:translateX(-101%); box-shadow:inset -1px 0 0 rgba(0,0,0,.28); }\n .vf-about .vf-lift-door--r{ right:0; transform:translateX(101%); box-shadow:inset 1px 0 0 rgba(255,255,255,.6); }\n \/* Logo on the left door; multiply drops its white background into the steel *\/\n .vf-about .vf-lift-door-logo{\n position:absolute; left:50%; top:50%; width:80%; height:auto;\n transform:translate(-50%, -50%); mix-blend-mode:multiply; pointer-events:none;\n }\n .vf-about.vf-js .vf-lift:not(.is-open) .vf-lift-door{ transform:none; }\n .vf-about .vf-lift-call{\n position:absolute; right:calc(-26 * var(--u)); top:50%; z-index:3; transform:translateY(-50%);\n display:grid; gap:calc(10 * var(--u)); padding:calc(12 * var(--u)) calc(8 * var(--u)); border-radius:calc(30 * var(--u));\n background:linear-gradient(180deg, #eef1f3, #c3cbd0);\n box-shadow:0 calc(20 * var(--u)) calc(40 * var(--u)) calc(-16 * var(--u)) rgba(0,0,0,.55), inset 0 1px 0 #fff;\n }\n .vf-about .vf-call{\n width:calc(38 * var(--u)); height:calc(38 * var(--u)); border-radius:50%; display:grid; place-items:center;\n background:radial-gradient(circle at 35% 30%, #fff, #d2d8dc 70%);\n box-shadow:inset 0 0 0 2px #b3bdc3, 0 2px calc(5 * var(--u)) rgba(0,0,0,.2);\n color:var(--teal); transition:box-shadow .3s, color .3s, opacity .3s, transform .2s;\n }\n .vf-about .vf-call svg{ width:calc(15 * var(--u)); height:calc(15 * var(--u)); }\n .vf-about .vf-call:hover:not(:disabled){ color:var(--orange-ink); box-shadow:inset 0 0 0 2px var(--orange), 0 2px calc(5 * var(--u)) rgba(0,0,0,.2); }\n .vf-about .vf-call:active:not(:disabled){ transform:scale(.92); }\n .vf-about .vf-call.is-lit{ color:var(--orange-ink); box-shadow:inset 0 0 0 2px var(--orange), 0 0 0 calc(4 * var(--u)) rgba(255,122,0,.22), 0 0 calc(18 * var(--u)) rgba(255,122,0,.65); }\n .vf-about .vf-call:disabled{ cursor:default; opacity:.45; }\n .vf-about .vf-call.is-lit:disabled{ opacity:1; }\n\n \/* =====================================================================\n 1 \u00b7 Our story \u2014 overlapping stats card + editorial layout\n ===================================================================== *\/\n .vf-about .vf-story{ z-index:3; }\n .vf-about .vf-stats{\n position:relative; overflow:hidden;\n margin-top:calc(-1 * clamp(calc(120 * var(--u)), 12vw, calc(160 * var(--u))));\n display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));\n padding:calc(34 * var(--u)) calc(10 * var(--u)); border-radius:calc(26 * var(--u)); background:#fff;\n box-shadow:0 calc(40 * var(--u)) calc(80 * var(--u)) calc(-40 * var(--u)) rgba(6,47,65,.45), 0 0 0 1px rgba(11,79,108,.05);\n }\n .vf-about .vf-stat{ position:relative; z-index:1; padding:calc(6 * var(--u)) calc(26 * var(--u)); border-left:1px solid var(--line); transition:transform .4s var(--ease-expo); }\n .vf-about .vf-stat:first-child{ border-left:0; }\n .vf-about .vf-stat:hover{ transform:translateY(calc(-4 * var(--u))); }\n .vf-about .vf-stat-icon{\n width:calc(46 * var(--u)); height:calc(46 * var(--u)); border-radius:calc(14 * var(--u)); display:grid; place-items:center;\n background:var(--teal-mist); color:var(--teal); margin-bottom:calc(18 * var(--u));\n transition:transform .5s var(--ease-expo), background .3s;\n }\n .vf-about .vf-stat:hover .vf-stat-icon{ transform:rotate(-8deg) scale(1.06); background:#fff1e3; }\n .vf-about .vf-stat-icon svg{ width:calc(24 * var(--u)); height:calc(24 * var(--u)); fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }\n .vf-about .vf-stat b{\n display:block; font-size:clamp(calc(32 * var(--u)), 3.2vw, calc(44 * var(--u))); line-height:1; font-weight:700;\n letter-spacing:-.04em; color:var(--teal); font-variant-numeric:tabular-nums;\n transition:color .3s;\n }\n .vf-about .vf-stat:hover b{ color:var(--orange-ink); }\n .vf-about .vf-stat > span:last-child{ display:block; margin-top:calc(8 * var(--u)); font-size:calc(14 * var(--u)); line-height:1.4; color:var(--ink-soft); max-width:15em; }\n\n \/* Cursor spotlight *\/\n .vf-about [data-vf-spot]::before{\n content:''; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none;\n background:radial-gradient(calc(420 * var(--u)) circle at var(--sx, 50%) var(--sy, 50%), rgba(255,122,0,.13), transparent 65%);\n opacity:0; transition:opacity .4s;\n }\n .vf-about [data-vf-spot]:hover::before{ opacity:1; }\n\n .vf-about .vf-story-head{\n display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);\n gap:clamp(calc(32 * var(--u)), 6vw, calc(96 * var(--u))); align-items:end;\n margin-top:var(--sec);\n }\n .vf-about .vf-lead{ font-size:clamp(calc(20 * var(--u)), 1.9vw, calc(26 * var(--u))); line-height:1.4; letter-spacing:-.02em; font-weight:600; color:var(--ink); }\n .vf-about .vf-story-intro p + p{ margin-top:calc(16 * var(--u)); color:var(--ink-soft); font-size:calc(17 * var(--u)); }\n\n .vf-about .vf-story-cols{\n display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));\n gap:clamp(calc(28 * var(--u)), 5vw, calc(72 * var(--u))); margin-top:var(--sec-sm);\n padding-top:calc(32 * var(--u)); border-top:1px solid var(--line);\n }\n .vf-about .vf-col-label{ display:flex; align-items:baseline; gap:calc(14 * var(--u)); margin-bottom:calc(14 * var(--u)); }\n .vf-about .vf-col-label b{ font-size:calc(13 * var(--u)); font-weight:700; color:var(--orange-ink); font-variant-numeric:tabular-nums; }\n .vf-about .vf-col-label h3{ font-size:calc(22 * var(--u)); letter-spacing:-.02em; color:var(--ink); }\n .vf-about .vf-story-cols p{ color:var(--ink-soft); font-size:calc(17 * var(--u)); line-height:1.65; }\n\n .vf-about .vf-objective{ margin-top:var(--sec); }\n .vf-about .vf-highlight{\n margin-top:calc(22 * var(--u)); max-width:21em;\n font-size:clamp(calc(30 * var(--u)), 3.9vw, calc(54 * var(--u))); line-height:1.16; letter-spacing:-.035em; font-weight:600;\n color:var(--ink);\n }\n .vf-about .vf-highlight mark{ background:none; color:var(--teal); }\n .vf-about .vf-highlight .vf-w{ display:inline; }\n .vf-about.vf-js .vf-highlight .vf-wi{\n opacity:clamp(.14, calc(var(--prog, 0) * (var(--n) + 6) - var(--i)), 1);\n transition:opacity .25s linear;\n }\n\n \/* =====================================================================\n 2 \u00b7 In motion \u2014 coverflow video carousel\n ===================================================================== *\/\n .vf-about .vf-motion{ margin-top:var(--sec-sm); color:#fff; isolation:isolate; }\n .vf-about .vf-motion > .vf-band{\n --band-edge:#083f57;\n background:\n radial-gradient(55% 45% at 50% 58%, rgba(127,176,195,.24), rgba(127,176,195,0) 70%),\n linear-gradient(180deg, #073a50 0%, #0b4f6c 50%, #073a50 100%);\n clip-path:polygon(-100vmax var(--slope), calc(50% - 50vw) var(--slope), calc(50% + 50vw) 0,\n calc(100% + 100vmax) 0, calc(100% + 100vmax) calc(100% - var(--slope)),\n calc(50% + 50vw) calc(100% - var(--slope)), calc(50% - 50vw) 100%, -100vmax 100%);\n }\n .vf-about .vf-outline{\n position:absolute; white-space:nowrap; user-select:none;\n font-weight:800; line-height:.8; letter-spacing:-.05em;\n color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.17);\n will-change:transform;\n }\n .vf-about .vf-motion .vf-outline--h{ top:calc(var(--slope) + calc(8 * var(--u))); left:-2%; font-size:clamp(calc(120 * var(--u)), 21vw, calc(330 * var(--u))); }\n .vf-about .vf-motion .vf-outline--v{\n right:-.08em; top:34%; writing-mode:vertical-rl;\n font-size:clamp(calc(90 * var(--u)), 11vw, calc(180 * var(--u))); -webkit-text-stroke-color:rgba(255,255,255,.13);\n }\n .vf-about .vf-motion-inner{ position:relative; z-index:2; padding:calc(var(--slope) + var(--sec-sm)) 0 calc(var(--slope) + var(--sec-sm)); }\n .vf-about .vf-motion-head{ text-align:center; }\n .vf-about .vf-motion-head p{ max-width:32em; margin:calc(20 * var(--u)) auto 0; font-size:clamp(calc(17 * var(--u)), 1.4vw, calc(19 * var(--u))); color:rgba(255,255,255,.8); }\n\n .vf-about .vf-flow{ position:relative; margin-top:clamp(calc(44 * var(--u)), 6vw, calc(72 * var(--u))); outline:none; }\n .vf-about .vf-flow-viewport{ overflow:hidden; padding:calc(50 * var(--u)) 0 calc(40 * var(--u)); margin:calc(-50 * var(--u)) 0 calc(-40 * var(--u)); }\n .vf-about .vf-flow-scaler{\n transform:translate3d(0, calc((1 - var(--enter, 1)) * calc(70 * var(--u))), 0) scale(calc(.86 + var(--enter, 1) * .14));\n transform-origin:50% 30%;\n }\n .vf-about .vf-flow-stage{\n position:relative;\n --w:min(64vw, calc(880 * var(--u)));\n --gap:clamp(calc(14 * var(--u)), 2vw, calc(28 * var(--u)));\n height:calc(var(--w) * .5625);\n touch-action:pan-y; user-select:none; -webkit-user-select:none;\n }\n .vf-about .vf-flow-blob{ position:absolute; z-index:0; pointer-events:none; background:rgba(127,176,195,.4); will-change:transform; }\n .vf-about .vf-flow-blob--a{ left:calc(50% - var(--w) \/ 2 - calc(56 * var(--u))); top:calc(-54 * var(--u)); width:clamp(calc(120 * var(--u)), 16vw, calc(230 * var(--u))); height:clamp(calc(90 * var(--u)), 12vw, calc(170 * var(--u))); border-radius:calc(44 * var(--u)); }\n .vf-about .vf-flow-blob--b{ right:calc(50% - var(--w) \/ 2 - calc(60 * var(--u))); bottom:calc(-60 * var(--u)); width:clamp(calc(110 * var(--u)), 14vw, calc(210 * var(--u))); aspect-ratio:1; border-radius:50% 50% 50% 18%; background:rgba(127,176,195,.32); }\n .vf-about .vf-slide{\n position:absolute; top:0; left:50%; z-index:2;\n width:var(--w); height:calc(var(--w) * .5625); margin-left:calc(var(--w) \/ -2);\n border-radius:clamp(calc(14 * var(--u)), 1.8vw, calc(24 * var(--u))); overflow:hidden; background:#06202c;\n box-shadow:0 calc(50 * var(--u)) calc(90 * var(--u)) calc(-45 * var(--u)) rgba(0,0,0,.8);\n transform:translate3d(calc(var(--x, 0px) + var(--drag, 0px)), 0, 0) scale(var(--sc, 1));\n transition:transform 1s var(--ease-io);\n cursor:pointer;\n }\n .vf-about .vf-slide[data-pos=\"center\"]{ --x:0px; --sc:1; z-index:3; cursor:default; }\n .vf-about .vf-slide[data-pos=\"left\"]{ --x:calc(var(--w) * -.89 - var(--gap)); --sc:.78; }\n .vf-about .vf-slide[data-pos=\"right\"]{ --x:calc(var(--w) * .89 + var(--gap)); --sc:.78; }\n .vf-about .vf-slide.is-wrap{ z-index:1; animation:vf-wrap 1s var(--ease-io); }\n @keyframes vf-wrap{ 0%{ opacity:1; } 18%{ opacity:0; } 82%{ opacity:0; } 100%{ opacity:1; } }\n .vf-about .vf-flow-stage.is-dragging .vf-slide{ transition:transform .18s linear; }\n .vf-about .vf-slide-media{ position:absolute; inset:0; overflow:hidden; }\n .vf-about .vf-slide-media img{\n width:100%; height:100%; object-fit:cover; pointer-events:none;\n transform:translate3d(var(--ix, 0%), 0, 0) scale(1.18);\n transition:transform 1s var(--ease-io), filter 1s;\n }\n .vf-about .vf-slide[data-pos=\"left\"] .vf-slide-media img{ --ix:9%; filter:grayscale(.4); }\n .vf-about .vf-slide[data-pos=\"right\"] .vf-slide-media img{ --ix:-9%; filter:grayscale(.4); }\n .vf-about .vf-slide-shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,32,44,0) 55%, rgba(5,32,44,.55)); transition:background-color 1s; }\n .vf-about .vf-slide:not([data-pos=\"center\"]) .vf-slide-shade{ background-color:rgba(5,32,44,.62); }\n .vf-about .vf-slide-tag{\n position:absolute; left:calc(18 * var(--u)); top:calc(18 * var(--u)); z-index:3;\n padding:calc(7 * var(--u)) calc(13 * var(--u)); border-radius:calc(999 * var(--u)); font-size:calc(12 * var(--u)); font-weight:600; letter-spacing:.04em;\n background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.26); color:#fff;\n -webkit-backdrop-filter:blur(calc(10 * var(--u))); backdrop-filter:blur(calc(10 * var(--u)));\n transition:opacity .5s;\n }\n .vf-about .vf-slide:not([data-pos=\"center\"]) .vf-slide-tag{ opacity:0; }\n\n \/* The diamond play control from the reference *\/\n .vf-about .vf-diamond{\n position:absolute; left:50%; top:50%; z-index:4;\n width:calc(130 * var(--u)); height:calc(130 * var(--u)); margin:calc(-65 * var(--u)) 0 0 calc(-65 * var(--u));\n display:grid; place-items:center; color:#fff;\n transition:opacity .5s, transform .7s var(--ease-expo);\n }\n .vf-about .vf-diamond-outer, .vf-about .vf-diamond-inner, .vf-about .vf-diamond-pulse{\n position:absolute; left:50%; top:50%; border-radius:calc(10 * var(--u));\n transform:translate(-50%, -50%) rotate(45deg);\n }\n .vf-about .vf-diamond-outer{\n width:calc(112 * var(--u)); height:calc(112 * var(--u));\n background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.38);\n -webkit-backdrop-filter:blur(calc(6 * var(--u))); backdrop-filter:blur(calc(6 * var(--u)));\n transition:transform .8s var(--ease-expo), background .4s;\n }\n .vf-about .vf-diamond-inner{\n width:calc(66 * var(--u)); height:calc(66 * var(--u));\n background:rgba(255,255,255,.34); border:1px solid rgba(255,255,255,.7);\n transition:transform .6s var(--ease-expo), background .4s, border-color .4s;\n }\n .vf-about .vf-diamond-pulse{ width:calc(112 * var(--u)); height:calc(112 * var(--u)); border:1.5px solid rgba(255,255,255,.55); animation:vf-diamond 2.8s var(--ease) infinite; }\n @keyframes vf-diamond{\n 0%{ transform:translate(-50%, -50%) rotate(45deg) scale(.7); opacity:.9; }\n 70%, 100%{ transform:translate(-50%, -50%) rotate(45deg) scale(1.35); opacity:0; }\n }\n .vf-about .vf-diamond svg{ position:relative; width:calc(24 * var(--u)); height:calc(24 * var(--u)); margin-left:calc(3 * var(--u)); transition:color .3s, transform .5s var(--ease-expo); }\n .vf-about .vf-diamond:hover .vf-diamond-outer{ transform:translate(-50%, -50%) rotate(135deg) scale(1.06); background:rgba(255,255,255,.2); }\n .vf-about .vf-diamond:hover .vf-diamond-inner{ transform:translate(-50%, -50%) rotate(45deg) scale(1.12); background:var(--orange); border-color:var(--orange); }\n .vf-about .vf-diamond:hover svg{ color:var(--on-orange); transform:scale(1.1); }\n .vf-about .vf-slide:not([data-pos=\"center\"]) .vf-diamond{ opacity:0; transform:scale(.6); pointer-events:none; }\n .vf-about .vf-slide.is-playing .vf-diamond,\n .vf-about .vf-slide.is-playing .vf-slide-tag{ opacity:0; pointer-events:none; }\n .vf-about .vf-slide-iframe{ position:absolute; inset:0; z-index:6; width:100%; height:100%; border:0; }\n\n .vf-about .vf-flow-arrow{\n position:absolute; top:50%; z-index:5;\n width:calc(72 * var(--u)); height:calc(52 * var(--u)); margin-top:calc(-26 * var(--u));\n display:grid; place-items:center;\n color:#fff; border:1px solid rgba(255,255,255,.75);\n background:rgba(6,31,43,.18);\n -webkit-backdrop-filter:blur(calc(6 * var(--u))); backdrop-filter:blur(calc(6 * var(--u)));\n transition:background .3s, border-color .3s, color .3s;\n }\n .vf-about .vf-flow-arrow--prev{ left:calc(50% - var(--w) \/ 2 - var(--gap) - calc(100 * var(--u))); }\n .vf-about .vf-flow-arrow--next{ right:calc(50% - var(--w) \/ 2 - var(--gap) - calc(100 * var(--u))); }\n .vf-about .vf-flow-arrow svg{ width:calc(22 * var(--u)); height:calc(22 * var(--u)); transition:transform .4s var(--ease-expo); }\n .vf-about .vf-flow-arrow:hover{ background:var(--orange); border-color:var(--orange); color:var(--on-orange); }\n .vf-about .vf-flow-arrow--prev:hover svg{ transform:translateX(calc(-4 * var(--u))); }\n .vf-about .vf-flow-arrow--next:hover svg{ transform:translateX(calc(4 * var(--u))); }\n\n .vf-about .vf-flow-meta{\n display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:clamp(calc(18 * var(--u)), 3vw, calc(36 * var(--u))); align-items:center;\n width:min(calc(880 * var(--u)), 64vw); margin:calc(40 * var(--u)) auto 0;\n }\n .vf-about .vf-flow-count{ font-family:var(--font-mono); font-size:calc(13 * var(--u)); color:var(--teal-pale); letter-spacing:.06em; white-space:nowrap; }\n .vf-about .vf-flow-count b{ font-size:calc(30 * var(--u)); font-weight:700; color:#fff; margin-right:calc(4 * var(--u)); }\n .vf-about .vf-flow-caption{ min-width:0; padding-left:clamp(calc(18 * var(--u)), 3vw, calc(36 * var(--u))); border-left:1px solid rgba(255,255,255,.18); }\n .vf-about .vf-flow-caption > *{ transition:opacity .35s, transform .6s var(--ease-expo); }\n .vf-about .vf-flow-caption.is-out > *{ opacity:0; transform:translateY(calc(-10 * var(--u))); }\n .vf-about .vf-flow-title{ font-size:clamp(calc(19 * var(--u)), 1.8vw, calc(24 * var(--u))); font-weight:650; letter-spacing:-.02em; line-height:1.25; color:#fff; }\n .vf-about .vf-flow-sub{ margin-top:calc(4 * var(--u)); font-size:calc(14 * var(--u)); color:rgba(255,255,255,.72); }\n .vf-about .vf-flow-side{ display:flex; flex-direction:column; align-items:flex-end; gap:calc(14 * var(--u)); }\n .vf-about .vf-flow-dots{ display:flex; gap:calc(8 * var(--u)); }\n .vf-about .vf-flow-dot{ width:calc(28 * var(--u)); height:calc(4 * var(--u)); border-radius:calc(4 * var(--u)); background:rgba(255,255,255,.28); transition:width .5s var(--ease-expo), background .3s; }\n .vf-about .vf-flow-dot:hover{ background:rgba(255,255,255,.55); }\n .vf-about .vf-flow-dot.is-active{ width:calc(48 * var(--u)); background:var(--orange); }\n .vf-about .vf-flow-yt{\n display:inline-flex; align-items:center; gap:calc(8 * var(--u)); font-size:calc(13 * var(--u)); font-weight:600;\n color:rgba(255,255,255,.88); white-space:nowrap;\n }\n .vf-about .vf-flow-yt:hover{ color:#fff; }\n .vf-about .vf-flow-yt svg{ width:calc(18 * var(--u)); height:calc(13 * var(--u)); }\n\n \/* =====================================================================\n 3 \u00b7 Values \u2014 mission + stacking cards\n ===================================================================== *\/\n .vf-about .vf-values{ padding:var(--sec) 0 0; }\n .vf-about .vf-mission{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:clamp(calc(32 * var(--u)), 6vw, calc(96 * var(--u))); align-items:center; }\n .vf-about .vf-mission-text{\n margin-top:calc(30 * var(--u)); max-width:23em;\n font-size:clamp(calc(24 * var(--u)), 2.7vw, calc(36 * var(--u))); line-height:1.25; letter-spacing:-.025em; font-weight:600; color:var(--ink);\n }\n .vf-about .vf-mission-text strong{ color:var(--teal); font-weight:700; }\n .vf-about .vf-mission-sub{ margin-top:calc(18 * var(--u)); max-width:36em; font-size:calc(17.5 * var(--u)); line-height:1.65; color:var(--ink-soft); }\n .vf-about .vf-rotor{ position:relative; width:clamp(calc(150 * var(--u)), 16vw, calc(210 * var(--u))); aspect-ratio:1; }\n .vf-about .vf-rotor > svg{ width:100%; height:100%; transform:rotate(var(--rot, 0deg)); }\n .vf-about .vf-rotor text{ font-family:var(--font); font-size:calc(13 * var(--u)); font-weight:600; letter-spacing:.2em; fill:var(--teal); }\n .vf-about .vf-rotor-core{\n position:absolute; inset:28%; border-radius:50%; display:grid; place-items:center;\n background:var(--orange); color:var(--on-orange);\n box-shadow:0 calc(18 * var(--u)) calc(40 * var(--u)) calc(-14 * var(--u)) rgba(255,122,0,.85);\n }\n .vf-about .vf-rotor-core svg{ width:34%; height:34%; animation:vf-bob 2.4s var(--ease-io) infinite; }\n @keyframes vf-bob{ 50%{ transform:translateY(calc(-4 * var(--u))); } }\n\n .vf-about .vf-values-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:calc(20 * var(--u)); margin-top:var(--sec); }\n .vf-about .vf-values-title{ font-size:clamp(calc(30 * var(--u)), 3.6vw, calc(50 * var(--u))); line-height:1.08; letter-spacing:-.035em; color:var(--ink); }\n .vf-about .vf-values-title span{ color:var(--ink-soft); }\n .vf-about .vf-values-note{ font-size:calc(15 * var(--u)); color:var(--ink-soft); max-width:22em; }\n\n .vf-about .vf-stack{ margin-top:clamp(calc(36 * var(--u)), 5vw, calc(56 * var(--u))); }\n .vf-about .vf-vcard{\n position:sticky; top:calc(var(--stick) + var(--i) * calc(28 * var(--u)));\n display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(calc(24 * var(--u)), 4vw, calc(64 * var(--u)));\n min-height:clamp(calc(330 * var(--u)), 34vw, calc(430 * var(--u))); margin-bottom:12vh;\n padding:clamp(calc(28 * var(--u)), 4vw, calc(56 * var(--u))); border-radius:calc(36 * var(--u)); overflow:hidden;\n transform:scale(var(--s, 1)); transform-origin:50% 0;\n box-shadow:0 calc(-14 * var(--u)) calc(50 * var(--u)) calc(-30 * var(--u)) rgba(6,47,65,.45);\n }\n .vf-about .vf-vcard:last-child{ margin-bottom:0; }\n .vf-about .vf-vcard::after{\n content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;\n background:#052b3c; opacity:var(--dim, 0);\n }\n .vf-about .vf-vcard > *{ position:relative; z-index:1; }\n .vf-about .vf-vcard--light{ background:#fff; color:var(--ink); --acc:var(--orange); --stroke:rgba(11,79,108,.32); --soft:var(--ink-soft); --tagbg:var(--teal-mist); --tagc:var(--teal); }\n .vf-about .vf-vcard--teal{ background:linear-gradient(150deg, #0e5b7c, #0b4f6c 45%, #073a50); color:#fff; --acc:var(--orange); --stroke:rgba(255,255,255,.34); --soft:rgba(255,255,255,.8); --tagbg:rgba(255,255,255,.1); --tagc:#fff; }\n .vf-about .vf-vcard--orange{ background:linear-gradient(150deg, #ff8f26, #ff7a00 55%, #f06e00); color:var(--on-orange); --acc:#fff; --stroke:rgba(27,13,0,.3); --soft:rgba(27,13,0,.8); --tagbg:rgba(255,255,255,.3); --tagc:var(--on-orange); }\n .vf-about .vf-vcard-left{ display:flex; flex-direction:column; justify-content:space-between; gap:calc(24 * var(--u)); }\n .vf-about .vf-vcard-kicker{ font-size:calc(13 * var(--u)); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); }\n .vf-about .vf-vcard-num{\n font-size:clamp(calc(96 * var(--u)), 12vw, calc(184 * var(--u))); line-height:.8; font-weight:700; letter-spacing:-.06em;\n color:transparent; -webkit-text-stroke:1.5px var(--stroke);\n }\n .vf-about .vf-vcard-title{ font-size:clamp(calc(34 * var(--u)), 4.2vw, calc(60 * var(--u))); line-height:1; letter-spacing:-.04em; }\n .vf-about .vf-vcard-right{ display:flex; flex-direction:column; justify-content:space-between; gap:calc(26 * var(--u)); }\n .vf-about .vf-vcard-icon{\n width:calc(68 * var(--u)); height:calc(68 * var(--u)); border-radius:calc(20 * var(--u)); display:grid; place-items:center;\n background:var(--tagbg); transition:transform .6s var(--ease-expo);\n }\n .vf-about .vf-vcard:hover .vf-vcard-icon{ transform:rotate(-10deg) scale(1.06); }\n .vf-about .vf-vcard-icon svg{ width:calc(36 * var(--u)); height:calc(36 * var(--u)); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }\n .vf-about .vf-vcard-icon .acc{ stroke:var(--acc); }\n .vf-about .vf-vcard p{ font-size:clamp(calc(18 * var(--u)), 1.6vw, calc(22 * var(--u))); line-height:1.5; letter-spacing:-.012em; color:var(--soft); }\n .vf-about .vf-vcard-tags{ display:flex; flex-wrap:wrap; gap:calc(8 * var(--u)); }\n .vf-about .vf-vcard-tags li{ padding:calc(8 * var(--u)) calc(15 * var(--u)); border-radius:calc(999 * var(--u)); background:var(--tagbg); color:var(--tagc); font-size:calc(13 * var(--u)); font-weight:600; }\n\n \/* =====================================================================\n 4 \u00b7 Services \u2014 portrait cards + standards marquee\n ===================================================================== *\/\n .vf-about .vf-services{ padding:var(--sec) 0 0; }\n .vf-about .vf-services-head{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(calc(28 * var(--u)), 5vw, calc(80 * var(--u))); align-items:end; }\n .vf-about .vf-services-head p{ font-size:calc(17.5 * var(--u)); line-height:1.65; color:var(--ink-soft); }\n .vf-about .vf-svc-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:calc(22 * var(--u)); margin-top:var(--sec-sm); }\n .vf-about .vf-svc{ display:flex; flex-direction:column; gap:calc(14 * var(--u)); }\n .vf-about .vf-svc-art{\n position:relative; aspect-ratio:4 \/ 4.5; border-radius:calc(28 * var(--u)); overflow:hidden;\n background:linear-gradient(170deg, #0e5b7c, #073a50);\n box-shadow:0 calc(34 * var(--u)) calc(60 * var(--u)) calc(-36 * var(--u)) rgba(6,47,65,.7);\n transition:transform .6s var(--ease);\n }\n .vf-about .vf-svc-art.is-tilting{ transition:transform .1s linear; }\n .vf-about .vf-svc-art::before{\n content:''; position:absolute; inset:0; opacity:.9;\n background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='72' height='56'%3E%3Ctext x='10' y='36' font-family='Georgia,serif' font-size='22' font-weight='700' fill='%23ffffff' fill-opacity='.06'%3E3VF%3C\/text%3E%3C\/svg%3E\");\n }\n .vf-about .vf-svc-art--blue::before{\n background-image:linear-gradient(rgba(169,205,219,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(169,205,219,.1) 1px, transparent 1px);\n background-size:calc(18 * var(--u)) calc(18 * var(--u));\n }\n .vf-about .vf-svc-art > svg{ position:absolute; left:0; right:0; bottom:0; width:100%; height:80%; }\n .vf-about .vf-tag{\n position:absolute; z-index:3; padding:calc(6 * var(--u)) calc(11 * var(--u)); border-radius:calc(8 * var(--u));\n background:rgba(255,255,255,.9); color:var(--teal-deep);\n font-size:calc(11.5 * var(--u)); font-weight:600; line-height:1.2; white-space:nowrap;\n box-shadow:0 calc(10 * var(--u)) calc(20 * var(--u)) calc(-10 * var(--u)) rgba(0,0,0,.45);\n transform:rotate(var(--r, -8deg)); transition:transform .7s var(--ease-expo);\n }\n .vf-about .vf-svc:hover .vf-tag{ transform:rotate(0deg) translateY(calc(-3 * var(--u))); }\n .vf-about .vf-svc-title{ display:flex; align-items:center; gap:calc(10 * var(--u)); margin-top:calc(8 * var(--u)); font-size:calc(20 * var(--u)); letter-spacing:-.02em; color:var(--ink); }\n .vf-about .vf-svc-title::before{ content:''; width:calc(8 * var(--u)); height:calc(8 * var(--u)); flex:none; border-radius:50%; background:var(--orange); }\n .vf-about .vf-svc p{ font-size:calc(15.5 * var(--u)); line-height:1.6; color:var(--ink-soft); }\n\n @keyframes vf-car{ 0%, 100%{ transform:translateY(calc(22 * var(--u))); } 50%{ transform:translateY(calc(-26 * var(--u))); } }\n @keyframes vf-spin{ to{ transform:rotate(360deg); } }\n @keyframes vf-steps{ from{ transform:translate(0, 0); } to{ transform:translate(calc(18 * var(--u)), calc(-16 * var(--u))); } }\n .vf-about .vf-art-car{ animation:vf-car 6.5s var(--ease-io) infinite; }\n .vf-about .vf-art-gear{ transform-box:fill-box; transform-origin:center; animation:vf-spin 16s linear infinite; }\n .vf-about .vf-art-gear--sm{ animation-duration:10s; animation-direction:reverse; }\n .vf-about .vf-svc:hover .vf-art-gear{ animation-duration:5s; }\n .vf-about .vf-svc:hover .vf-art-gear--sm{ animation-duration:3s; }\n .vf-about .vf-art-steps{ animation:vf-steps 1.6s linear infinite; }\n .vf-about .vf-art-draw path{ stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset 2.4s var(--ease-io) .4s; }\n .vf-about.vf-js .vf-svc-grid:not(.is-in) .vf-art-draw path{ stroke-dashoffset:1; }\n\n .vf-about .vf-marquee-label{\n margin-top:var(--sec-sm); text-align:center;\n font-size:calc(12.5 * var(--u)); font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);\n }\n .vf-about .vf-marquee{\n margin-top:calc(20 * var(--u)); padding:calc(10 * var(--u)) 0 calc(28 * var(--u)); overflow:hidden;\n -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);\n mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);\n }\n \/* Client logos: identical tiles on one steady loop (the list is doubled by JS) *\/\n .vf-about .vf-logos{ display:flex; width:max-content; }\n .vf-about .vf-logos.is-running{ animation:vf-logos var(--dur, 55s) linear infinite; will-change:transform; }\n .vf-about .vf-marquee:hover .vf-logos{ animation-play-state:paused; }\n @keyframes vf-logos{ to{ transform:translate3d(-50%, 0, 0); } }\n .vf-about:not(.vf-js) .vf-logos{ width:auto; flex-wrap:wrap; justify-content:center; row-gap:calc(16 * var(--u)); padding:0 calc(24 * var(--u)); }\n .vf-about .vf-logo{\n flex:none; display:block; width:calc(200 * var(--u)); height:calc(104 * var(--u)); margin-right:calc(16 * var(--u)); padding:calc(22 * var(--u)) calc(24 * var(--u));\n overflow:hidden;\n border-radius:calc(20 * var(--u)); background:#fff;\n box-shadow:0 calc(16 * var(--u)) calc(34 * var(--u)) calc(-24 * var(--u)) rgba(6,47,65,.5), 0 0 0 1px rgba(11,79,108,.05);\n transition:transform .5s var(--ease-expo), box-shadow .5s;\n }\n .vf-about .vf-logo:hover{ transform:translateY(calc(-4 * var(--u))); box-shadow:0 calc(24 * var(--u)) calc(40 * var(--u)) calc(-24 * var(--u)) rgba(6,47,65,.55), 0 0 0 1px rgba(255,122,0,.25); }\n \/* --z enlarges a logo whose image has wide empty margins, so all read the same size *\/\n .vf-about .vf-logo img{ width:100%; height:100%; object-fit:contain; transform:scale(var(--z, 1)); }\n .vf-about .vf-logo--whiten img{ filter:brightness(1.06) contrast(1.06); }\n\n \/* =====================================================================\n 5 \u00b7 Journey \u2014 the lift shaft timeline\n ===================================================================== *\/\n .vf-about .vf-journey{ padding:calc(var(--sec) - calc(28 * var(--u))) 0 0; }\n .vf-about .vf-journey-head{ text-align:center; }\n .vf-about .vf-shaft{ position:relative; margin-top:var(--sec-sm); --p:0; }\n .vf-about .vf-shaft-track{ position:absolute; left:50%; top:0; bottom:0; width:calc(4 * var(--u)); margin-left:-2px; border-radius:calc(4 * var(--u)); background:var(--line); }\n .vf-about .vf-shaft-fill{ position:absolute; left:0; right:0; top:0; height:calc(var(--p) * 100%); border-radius:inherit; background:linear-gradient(180deg, var(--teal), var(--orange)); }\n .vf-about .vf-shaft-car{\n position:absolute; left:50%; top:calc(var(--p) * 100%); z-index:3;\n width:calc(30 * var(--u)); height:calc(40 * var(--u)); margin:calc(-20 * var(--u)) 0 0 calc(-15 * var(--u)); border-radius:calc(8 * var(--u));\n background:var(--orange);\n box-shadow:0 0 0 calc(6 * var(--u)) rgba(255,122,0,.18), 0 calc(14 * var(--u)) calc(26 * var(--u)) calc(-8 * var(--u)) rgba(255,122,0,.8);\n }\n .vf-about .vf-shaft-car::before{ content:''; position:absolute; left:50%; top:calc(7 * var(--u)); bottom:calc(7 * var(--u)); width:1.5px; margin-left:-.75px; background:rgba(27,13,0,.45); }\n .vf-about .vf-shaft-car::after{ content:''; position:absolute; left:50%; top:calc(-30 * var(--u)); height:calc(30 * var(--u)); width:1.5px; margin-left:-.75px; background:rgba(11,79,108,.35); }\n .vf-about .vf-stops{ position:relative; display:grid; gap:clamp(calc(36 * var(--u)), 5vw, calc(64 * var(--u))); padding:calc(20 * var(--u)) 0; }\n .vf-about .vf-stop{ position:relative; display:grid; grid-template-columns:minmax(0, 1fr) calc(120 * var(--u)) minmax(0, 1fr); align-items:center; }\n .vf-about .vf-stop-card{\n grid-column:1; grid-row:1;\n padding:calc(30 * var(--u)) calc(32 * var(--u)); border-radius:calc(26 * var(--u)); background:#fff;\n border:1px solid var(--line);\n box-shadow:0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-40 * var(--u)) rgba(6,47,65,.5);\n transition:border-color .5s, box-shadow .5s, transform .6s var(--ease-expo);\n }\n .vf-about .vf-stop-card:hover{ transform:translateY(calc(-4 * var(--u))); }\n .vf-about .vf-stop.is-active .vf-stop-card{ border-color:rgba(255,122,0,.4); box-shadow:0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-36 * var(--u)) rgba(255,122,0,.45); }\n .vf-about .vf-stop-dot{\n grid-column:2; grid-row:1; justify-self:center; z-index:2;\n width:calc(20 * var(--u)); height:calc(20 * var(--u)); border-radius:50%;\n background:var(--cream); border:calc(3 * var(--u)) solid var(--line-strong);\n transition:background .4s, border-color .4s, box-shadow .4s;\n }\n .vf-about .vf-stop.is-active .vf-stop-dot{ background:var(--orange); border-color:var(--orange); box-shadow:0 0 0 calc(7 * var(--u)) rgba(255,122,0,.18); }\n .vf-about .vf-stop-floor{\n grid-column:3; grid-row:1; justify-self:start;\n font-size:clamp(calc(70 * var(--u)), 9vw, calc(130 * var(--u))); line-height:1; font-weight:700; letter-spacing:-.06em;\n color:transparent; -webkit-text-stroke:1.5px var(--line-strong);\n transition:-webkit-text-stroke-color .5s;\n }\n .vf-about .vf-stop.is-active .vf-stop-floor{ -webkit-text-stroke-color:var(--orange); }\n .vf-about .vf-stop:nth-child(even) .vf-stop-card{ grid-column:3; }\n .vf-about .vf-stop:nth-child(even) .vf-stop-floor{ grid-column:1; justify-self:end; }\n .vf-about .vf-stop-kicker{ font-size:calc(12 * var(--u)); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-ink); }\n .vf-about .vf-stop-card h3{ margin:calc(10 * var(--u)) 0 calc(10 * var(--u)); font-size:clamp(calc(22 * var(--u)), 2.2vw, calc(28 * var(--u))); line-height:1.15; letter-spacing:-.025em; color:var(--ink); }\n .vf-about .vf-stop-card p{ font-size:calc(16 * var(--u)); line-height:1.62; color:var(--ink-soft); }\n\n \/* =====================================================================\n PH \u00b7 Penthouse \u2014 closing promise\n ===================================================================== *\/\n .vf-about .vf-cta{ margin-top:var(--sec-sm); color:#fff; text-align:center; isolation:isolate; }\n .vf-about .vf-cta > .vf-band{\n --band-edge:#083f57;\n background:\n radial-gradient(50% 60% at 50% 100%, rgba(255,122,0,.24), rgba(255,122,0,0) 70%),\n linear-gradient(180deg, #0b4f6c, #073a50);\n clip-path:polygon(-100vmax var(--slope), calc(50% - 50vw) var(--slope), calc(50% + 50vw) 0,\n calc(100% + 100vmax) 0, calc(100% + 100vmax) 100%, -100vmax 100%);\n }\n .vf-about .vf-cta .vf-outline{ left:0; right:0; bottom:-.1em; text-align:center; font-size:clamp(calc(140 * var(--u)), 26vw, calc(420 * var(--u))); -webkit-text-stroke-color:rgba(255,255,255,.08); }\n .vf-about .vf-cta-inner{ position:relative; z-index:2; padding:calc(var(--slope) + var(--sec)) 0 var(--sec); }\n .vf-about .vf-cta-title{ margin:calc(22 * var(--u)) 0 calc(26 * var(--u)); font-size:clamp(calc(52 * var(--u)), 9.4vw, calc(148 * var(--u))); line-height:.98; letter-spacing:-.055em; color:#fff; }\n .vf-about .vf-cta-lead{ max-width:34em; margin:0 auto; font-size:clamp(calc(17 * var(--u)), 1.5vw, calc(21 * var(--u))); line-height:1.6; color:rgba(255,255,255,.8); }\n .vf-about .vf-cta .vf-actions{ justify-content:center; margin-top:calc(40 * var(--u)); }\n\n \/* =====================================================================\n Scroll + text reveal system (only when JS runs and motion is allowed)\n ===================================================================== *\/\n .vf-about [data-vf-split] .vf-w{ display:inline-block; vertical-align:top; overflow:hidden; padding:.08em 0 .14em; margin:-.08em 0 -.14em; }\n .vf-about [data-vf-split] .vf-w--free{ overflow:visible; }\n .vf-about [data-vf-split] .vf-wi{ display:inline-block; }\n .vf-about .vf-word{ display:inline-block; white-space:nowrap; }\n .vf-about.vf-js [data-vf-split] .vf-wi{\n transform:translate3d(0, 108%, 0) rotate(3deg); opacity:0;\n transition:transform 1.1s var(--ease-expo), opacity .8s var(--ease);\n transition-delay:calc(var(--i) * var(--step, 55ms) + var(--sd, 0) * 1ms);\n }\n .vf-about.vf-js [data-vf-split].is-in .vf-wi{ transform:none; opacity:1; }\n .vf-about.vf-js [data-vf-split] .vf-w--free .vf-wi{\n transform:none; opacity:1;\n clip-path:inset(-50% 100% -50% -12%);\n transition:clip-path 1.25s var(--ease-io);\n transition-delay:calc(var(--i) * var(--step, 55ms) + var(--sd, 0) * 1ms + 150ms);\n }\n .vf-about.vf-js [data-vf-split].is-in .vf-w--free .vf-wi{ clip-path:inset(-50% -12% -50% -12%); }\n\n .vf-about.vf-js [data-vf-reveal]{\n opacity:0; transform:translate3d(0, calc(30 * var(--u)), 0);\n transition:opacity .9s var(--ease), transform 1.2s var(--ease-expo);\n transition-delay:calc(var(--d, 0) * 1ms);\n }\n .vf-about.vf-js [data-vf-reveal].is-in{ opacity:1; transform:none; }\n .vf-about.vf-js [data-vf-stagger] > *{\n opacity:0; transform:translate3d(0, calc(40 * var(--u)), 0) scale(.97);\n transition:opacity .9s var(--ease), transform 1.2s var(--ease-expo);\n transition-delay:calc(var(--i, 0) * 90ms + var(--d, 0) * 1ms);\n }\n .vf-about.vf-js [data-vf-stagger].is-in > *{ opacity:1; transform:none; }\n .vf-about.vf-js .vf-stats[data-vf-stagger] > *{ transform:translate3d(0, calc(24 * var(--u)), 0); }\n .vf-about.vf-js .vf-stats[data-vf-stagger].is-in > *{ transform:none; }\n .vf-about.vf-js .vf-stats[data-vf-stagger].is-in > .vf-stat:hover{ transform:translateY(calc(-4 * var(--u))); transition-delay:0s; }\n\n \/* ===== Responsive ===== *\/\n @media (max-width:1080px){\n .vf-about .vf-svc-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }\n .vf-about .vf-lift-call{ right:calc(-18 * var(--u)); }\n }\n @media (max-width:900px){\n .vf-about .vf-hero-grid{ grid-template-columns:minmax(0, 1fr); gap:calc(72 * var(--u)); }\n .vf-about .vf-lift-wrap{ width:min(100%, calc(360 * var(--u))); }\n .vf-about .vf-stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:calc(30 * var(--u)); }\n .vf-about .vf-stat:nth-child(3){ border-left:0; }\n .vf-about .vf-story-head, .vf-about .vf-services-head{ grid-template-columns:minmax(0, 1fr); }\n .vf-about .vf-mission{ grid-template-columns:minmax(0, 1fr); }\n .vf-about .vf-rotor{ order:-1; }\n .vf-about .vf-vcard{ grid-template-columns:minmax(0, 1fr); }\n }\n @media (max-width:760px){\n .vf-about .vf-floor-rail{ display:none; }\n .vf-about .vf-story-cols{ grid-template-columns:minmax(0, 1fr); }\n .vf-about .vf-shaft-track, .vf-about .vf-shaft-car{ left:calc(17 * var(--u)); }\n .vf-about .vf-stop{ grid-template-columns:minmax(0, 1fr); padding-left:calc(52 * var(--u)); }\n .vf-about .vf-stop-card, .vf-about .vf-stop:nth-child(even) .vf-stop-card{ grid-column:1; }\n .vf-about .vf-stop-dot{ position:absolute; left:calc(17 * var(--u)); top:calc(36 * var(--u)); margin-left:calc(-10 * var(--u)); grid-column:auto; grid-row:auto; justify-self:auto; }\n .vf-about .vf-stop-floor{ display:none; }\n .vf-about .vf-vcard{ position:relative; top:auto; margin-bottom:calc(18 * var(--u)); min-height:0; }\n .vf-about .vf-vcard-num{ font-size:calc(88 * var(--u)); }\n }\n @media (max-width:640px){\n .vf-about .vf-flow-stage{ --w:84vw; }\n .vf-about .vf-flow-arrow{ width:calc(44 * var(--u)); height:calc(44 * var(--u)); margin-top:calc(-22 * var(--u)); border-radius:50%; background:rgba(6,31,43,.5); }\n .vf-about .vf-flow-arrow--prev{ left:calc(50% - var(--w) \/ 2 + calc(10 * var(--u))); }\n .vf-about .vf-flow-arrow--next{ right:calc(50% - var(--w) \/ 2 + calc(10 * var(--u))); }\n .vf-about .vf-flow-arrow svg{ width:calc(18 * var(--u)); height:calc(18 * var(--u)); }\n .vf-about .vf-diamond{ transform:scale(.72); }\n .vf-about .vf-slide:not([data-pos=\"center\"]) .vf-diamond{ transform:scale(.5); }\n .vf-about .vf-flow-meta{ width:84vw; grid-template-columns:auto minmax(0, 1fr); }\n .vf-about .vf-flow-side{ grid-column:1 \/ -1; flex-direction:row; justify-content:space-between; align-items:center; }\n .vf-about .vf-flow-blob{ display:none; }\n .vf-about .vf-slide-tag{ left:calc(12 * var(--u)); top:calc(12 * var(--u)); }\n }\n @media (max-width:560px){\n .vf-about .vf-wrap{ padding:0 calc(16 * var(--u)); }\n .vf-about .vf-scramble{ font-size:calc(10.5 * var(--u)); letter-spacing:.22em; }\n .vf-about .vf-lift-call{ right:calc(-12 * var(--u)); }\n .vf-about .vf-shape--arc{ left:-10%; }\n .vf-about .vf-stats{ padding:calc(26 * var(--u)) calc(4 * var(--u)); }\n .vf-about .vf-stat{ padding:calc(4 * var(--u)) calc(16 * var(--u)); }\n .vf-about .vf-svc-grid{ grid-template-columns:minmax(0, 1fr); }\n .vf-about .vf-logo{ width:calc(150 * var(--u)); height:calc(80 * var(--u)); margin-right:calc(12 * var(--u)); padding:calc(17 * var(--u)) calc(18 * var(--u)); border-radius:calc(16 * var(--u)); }\n .vf-about .vf-btn{ height:calc(50 * var(--u)); padding-left:calc(22 * var(--u)); font-size:calc(15 * var(--u)); }\n .vf-about .vf-stop-card{ padding:calc(24 * var(--u)) calc(22 * var(--u)); }\n }\n\n @media (prefers-reduced-motion: reduce){\n .vf-about, .vf-about *, .vf-about *::before, .vf-about *::after{ transition:none !important; animation:none !important; }\n }\n<\/style>\n\n<div class=\"vf-about\" id=\"vfAbout\">\n\n <!-- Filter that drops the logo's white background and lightens its navy\n lettering, so it sits directly on the dark hero -->\n <svg class=\"vf-defs\" width=\"0\" height=\"0\" aria-hidden=\"true\" focusable=\"false\">\n <filter id=\"vfOnDark\" color-interpolation-filters=\"sRGB\">\n <feColorMatrix in=\"SourceGraphic\" type=\"matrix\" values=\"1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0\" result=\"red\"\/>\n <feComposite in=\"SourceGraphic\" in2=\"red\" operator=\"arithmetic\" k1=\"1\" k2=\"0\" k3=\"-1\" k4=\"1\" result=\"ink\"\/>\n <feColorMatrix in=\"SourceGraphic\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.7228 -2.4317 -0.2455 0 3.298\" result=\"mask\"\/>\n <feComposite in=\"ink\" in2=\"mask\" operator=\"in\"\/>\n <\/filter>\n <\/svg>\n\n <!-- Sticky lift display: shows the \"floor\" (section) you're on; click to jump -->\n <div class=\"vf-floor-rail\">\n <div class=\"vf-floor is-away\">\n <div class=\"vf-floor-panel\" id=\"vfFloorPanel\" hidden>\n <span class=\"vf-floor-panel-title\">Floors<\/span>\n <\/div>\n <button type=\"button\" class=\"vf-floor-display\" aria-expanded=\"false\" aria-controls=\"vfFloorPanel\" aria-label=\"Jump to a section of this page\">\n <svg class=\"vf-floor-arrow\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 4l9 14H3z\"\/><\/svg>\n <span class=\"vf-floor-num\" aria-hidden=\"true\"><span>G<\/span><\/span>\n <span class=\"vf-floor-name\">Lobby<\/span>\n <\/button>\n <\/div>\n <\/div>\n\n <!-- ============================== G \u00b7 LOBBY ============================== -->\n <section class=\"vf-sec vf-hero vf-dark\" data-floor=\"G\" data-floor-name=\"Lobby\" aria-label=\"About 3VF LTD\">\n <div class=\"vf-band\" aria-hidden=\"true\"><\/div>\n <div class=\"vf-hero-inner\">\n <div class=\"vf-wrap vf-hero-grid\">\n\n <div class=\"vf-hero-copy\" data-vf-speed=\"0.08\">\n <span class=\"vf-brand\" data-vf-reveal>\n <img fetchpriority=\"high\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"3VF LTD \u2014 Authorized Sole Distributor of OTIS in Ghana\" width=\"1600\" height=\"533\" class=\"lazyload\" data-src=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/09\/WhatsApp-Image-2026-09-25-at-10.33.55.jpeg\">\n <\/span>\n <p class=\"vf-scramble\" data-vf-scramble=\"ELEVATORS \u00b7 ESCALATORS \u00b7 DUMBWAITERS\">\n <span aria-hidden=\"true\">ELEVATORS \u00b7 ESCALATORS \u00b7 DUMBWAITERS<\/span><span class=\"vf-sr\">Elevators, escalators and dumbwaiters<\/span>\n <\/p>\n <h1 class=\"vf-h1\" data-vf-split style=\"--sd:150\">Ghana's <em class=\"vf-script\">trusted<svg class=\"vf-swash\" viewBox=\"0 0 300 26\" aria-hidden=\"true\"><path pathLength=\"1\" d=\"M5 19C80 7 180 4 295 13\"\/><\/svg><\/em> partner in vertical motion.<\/h1>\n <p class=\"vf-hero-lead\" data-vf-reveal style=\"--d:550\">\n Elevator, escalator and lift installation, maintenance and modernization —\n built on more than 30 years of the OTIS\/CFAO partnership in the Ghanaian market.\n <\/p>\n <div class=\"vf-actions\" data-vf-reveal style=\"--d:700\">\n <a class=\"vf-btn vf-btn--primary\" href=\"#vf-motion\" data-vf-magnetic>\n <span class=\"vf-btn-label\">Watch us in motion<\/span>\n <span class=\"vf-btn-icon vf-btn-icon--play\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5.5v13l10.5-6.5z\"\/><\/svg><\/span>\n <\/a>\n <a class=\"vf-btn vf-btn--ghost\" href=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/08\/3VF_LTD_Company_Profile.pdf\" target=\"_blank\" rel=\"noopener\" data-vf-magnetic>\n <span class=\"vf-btn-label\">Company profile<\/span>\n <span class=\"vf-btn-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/span>\n <\/a>\n <\/div>\n <p class=\"vf-hero-standards\" data-vf-reveal style=\"--d:850\">\n <span>Ghana Code<\/span><span>EN81<\/span><span>ASME A17.1<\/span><span>ASME A18.1<\/span>\n <\/p>\n <\/div>\n\n <div class=\"vf-hero-visual\" data-vf-speed=\"-0.05\">\n <div class=\"vf-lift-wrap\">\n <span class=\"vf-shape vf-shape--pill vf-depth\" style=\"--d:-28\" aria-hidden=\"true\"><\/span>\n <span class=\"vf-shape vf-shape--arc vf-depth\" style=\"--d:40\" aria-hidden=\"true\"><\/span>\n <svg class=\"vf-shape vf-shape--dots vf-depth\" style=\"--d:26\" viewBox=\"0 0 90 90\" aria-hidden=\"true\">\n <defs><pattern id=\"vfDots\" width=\"18\" height=\"18\" patternUnits=\"userSpaceOnUse\"><circle cx=\"9\" cy=\"9\" r=\"2.3\" fill=\"#ff7a00\"\/><\/pattern><\/defs>\n <rect width=\"90\" height=\"90\" fill=\"url(#vfDots)\"\/>\n <\/svg>\n\n <div class=\"vf-lift vf-depth\" style=\"--d:10\">\n <!-- One photo per floor (floor 1 first). To swap a photo, change its data-src. -->\n <ul class=\"vf-lift-floors\" hidden>\n <li data-src=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-08-19-at-15.59.11.jpeg\">Technicians on site<\/li>\n <li data-src=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/03\/CompressJPEG.Online_img1080x810-8.jpg\">Our crew on the job<\/li>\n <li data-src=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-08-27-at-11.53.20.jpeg\">Our people<\/li>\n <li data-src=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/03\/IMG_9813.jpg\">The 3VF team<\/li>\n <\/ul>\n <div class=\"vf-lift-head\">\n <button type=\"button\" class=\"vf-lift-sound\" aria-pressed=\"true\" aria-label=\"Lift sounds\">\n <svg class=\"vf-snd-on\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 9.5v5h3.5L12 19V5L7.5 9.5H4z\" fill=\"currentColor\"\/><path d=\"M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11\"\/><\/svg>\n <svg class=\"vf-snd-off\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 9.5v5h3.5L12 19V5L7.5 9.5H4z\" fill=\"currentColor\"\/><path d=\"M16 9.5l5 5M21 9.5l-5 5\"\/><\/svg>\n <span class=\"vf-lift-sound-label\" aria-hidden=\"true\">Tap for sound<\/span>\n <\/button>\n <div class=\"vf-lift-display\" aria-hidden=\"true\">\n <svg class=\"vf-lift-arrow\" data-dir=\"up\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 4l9 14H3z\"\/><\/svg>\n <span class=\"vf-lift-num\">4<\/span>\n <\/div>\n <\/div>\n <div class=\"vf-lift-cab\">\n <img decoding=\"async\" class=\"vf-lift-bg lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"\" aria-hidden=\"true\" draggable=\"false\" data-src=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/03\/IMG_9813.jpg\">\n <img decoding=\"async\" class=\"vf-lift-img lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"The 3VF team\" draggable=\"false\" data-src=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/03\/IMG_9813.jpg\">\n <div class=\"vf-lift-shade\" aria-hidden=\"true\"><\/div>\n <div class=\"vf-lift-cap\">\n <small>Floor <b class=\"vf-lift-capnum\">4<\/b><\/small>\n <span class=\"vf-lift-captitle\">The 3VF team<\/span>\n <\/div>\n <span class=\"vf-lift-door vf-lift-door--l\" aria-hidden=\"true\">\n <img decoding=\"async\" class=\"vf-lift-door-logo lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"\" draggable=\"false\" data-src=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/10\/7890992a-6c6b-4423-8cb2-e65d39953281.png\">\n <\/span>\n <span class=\"vf-lift-door vf-lift-door--r\" aria-hidden=\"true\"><\/span>\n <\/div>\n <div class=\"vf-lift-call\" role=\"group\" aria-label=\"Ride the lift between photos\">\n <button type=\"button\" class=\"vf-call vf-call--up\" aria-label=\"Up: next photo\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 14l6-6 6 6\"\/><\/svg><\/button>\n <button type=\"button\" class=\"vf-call vf-call--down\" aria-label=\"Down: previous photo\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 10l6 6 6-6\"\/><\/svg><\/button>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ============================== 1 \u00b7 OUR STORY ============================== -->\n <section class=\"vf-sec vf-story\" data-floor=\"1\" data-floor-name=\"Our story\">\n <div class=\"vf-wrap\">\n\n <div class=\"vf-stats\" data-vf-stagger data-vf-spot>\n <div class=\"vf-stat\">\n <span class=\"vf-stat-icon\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"9\" r=\"5.5\"\/><path d=\"M8.6 13.4 7.2 21l4.8-2.6 4.8 2.6-1.4-7.6\"\/><circle cx=\"12\" cy=\"9\" r=\"2\" fill=\"#ff7a00\" stroke=\"none\"\/><\/svg><\/span>\n <b data-vf-count=\"30\" data-suffix=\"+\">30+<\/b>\n <span>Years of combined industry legacy<\/span>\n <\/div>\n <div class=\"vf-stat\">\n <span class=\"vf-stat-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M3.5 20.5h17M5.5 20.5V9.5l6.5-4 6.5 4v11M10 20.5v-4h4v4\"\/><path d=\"M9 12h.01M12 12h.01M15 12h.01\" stroke-width=\"2.4\"\/><path d=\"M12 2.5v3\" stroke=\"#ff7a00\"\/><\/svg><\/span>\n <b data-vf-count=\"45\" data-suffix=\"+\">45+<\/b>\n <span>Landmark projects delivered<\/span>\n <\/div>\n <div class=\"vf-stat\">\n <span class=\"vf-stat-icon\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"8.5\"\/><path d=\"M12 7.5V12l3 2\"\/><circle cx=\"12\" cy=\"12\" r=\"1.3\" fill=\"#ff7a00\" stroke=\"none\"\/><\/svg><\/span>\n <b data-vf-count=\"24\" data-suffix=\"\/7\">24\/7<\/b>\n <span>Technician availability<\/span>\n <\/div>\n <div class=\"vf-stat\">\n <span class=\"vf-stat-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 3.2 19 6v5.4c0 4.3-2.9 8-7 9.4-4.1-1.4-7-5.1-7-9.4V6z\"\/><path d=\"m8.8 12.1 2.2 2.2 4.3-4.5\" stroke=\"#ff7a00\" stroke-width=\"2\"\/><\/svg><\/span>\n <b data-vf-count=\"100\" data-suffix=\"%\">100%<\/b>\n <span>Ghana Code & EN81 compliant<\/span>\n <\/div>\n <\/div>\n\n <div class=\"vf-story-head\">\n <div>\n <span class=\"vf-eyebrow\" data-vf-reveal>About 3VF LTD<\/span>\n <h2 class=\"vf-h2\" data-vf-split>Corporate <em class=\"vf-script\">background.<\/em><\/h2>\n <\/div>\n <div class=\"vf-story-intro\" data-vf-reveal style=\"--d:200\">\n <p class=\"vf-lead\">3VF LTD is duly registered in Ghana to provide elevator and lift services, alongside broader construction support activities.<\/p>\n <p>Here is a clear look at our vision, our capability, and the value we bring to every project.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"vf-story-cols\" data-vf-stagger>\n <div>\n <div class=\"vf-col-label\"><b>01<\/b><h3>Our legacy<\/h3><\/div>\n <p>\n 3VF LTD was incorporated in Ghana to take over the lift activity of the OTIS\/CFAO\n partnership, which spans more than 30 years in the Ghanaian market. We continue that\n legacy as part of the acquisition of the lift business activity by CFAO — giving\n clients a trusted elevator service company built on three decades of proven experience.\n <\/p>\n <\/div>\n <div>\n <div class=\"vf-col-label\"><b>02<\/b><h3>Our people<\/h3><\/div>\n <p>\n Our team is made up of individuals with proven experience and a deep understanding of\n the elevator, lift and building industry. We know how important reliable elevators and\n escalators are to keeping your occupants, tenants and customers satisfied.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"vf-objective\">\n <span class=\"vf-eyebrow\" data-vf-reveal>Our primary objective<\/span>\n <p class=\"vf-highlight\">\n To create <mark>peace of mind:<\/mark> safe, smooth vertical transportation, backed by\n proactive communication that keeps you informed and in tune with your building at every stage.\n <\/p>\n <\/div>\n\n <\/div>\n <\/section>\n\n <!-- ============================== 2 \u00b7 IN MOTION ============================== -->\n <section class=\"vf-sec vf-motion vf-dark\" data-floor=\"2\" data-floor-name=\"In motion\">\n <div class=\"vf-band\" aria-hidden=\"true\">\n <span class=\"vf-outline vf-outline--h\" data-vf-drift=\"-420\">in motion<\/span>\n <span class=\"vf-outline vf-outline--v\" data-vf-drift=\"260\" data-vf-axis=\"y\">3VF<\/span>\n <\/div>\n <div class=\"vf-motion-inner\">\n <div class=\"vf-wrap vf-motion-head\" id=\"vf-motion\">\n <span class=\"vf-eyebrow\" data-vf-reveal>Watch<\/span>\n <h2 class=\"vf-h2\" data-vf-split>See 3VF <em class=\"vf-script\">in motion.<\/em><\/h2>\n <p data-vf-reveal style=\"--d:250\">Meet the team carrying the OTIS standard across Ghana. Pick a film and it plays right here.<\/p>\n <\/div>\n\n <div class=\"vf-flow\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"3VF films\" tabindex=\"0\">\n <div class=\"vf-flow-viewport\">\n <div class=\"vf-flow-scaler\">\n <div class=\"vf-flow-stage\">\n <span class=\"vf-flow-blob vf-flow-blob--a\" data-vf-speed=\"0.14\" aria-hidden=\"true\"><\/span>\n <span class=\"vf-flow-blob vf-flow-blob--b\" data-vf-speed=\"-0.1\" aria-hidden=\"true\"><\/span>\n\n <article class=\"vf-slide\" data-pos=\"center\" data-id=\"jzaU9aeUBZs\" data-title=\"Welcome to 3VF\" data-meta=\"Team interview \u00b7 6 March 2026\" data-focus=\"50% 40%\" aria-roledescription=\"slide\" aria-label=\"Film 1 of 3\">\n <div class=\"vf-slide-media\"><img decoding=\"async\" data-yt=\"jzaU9aeUBZs\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"3VF team member speaking in front of a 3VF banner\" loading=\"lazy\" draggable=\"false\" class=\"lazyload\" data-src=\"https:\/\/i.ytimg.com\/vi\/jzaU9aeUBZs\/maxresdefault.jpg\"><\/div>\n <div class=\"vf-slide-shade\"><\/div>\n <span class=\"vf-slide-tag\">Film 01<\/span>\n <button type=\"button\" class=\"vf-diamond\" aria-label=\"Play film: Welcome to 3VF\">\n <span class=\"vf-diamond-pulse\"><\/span><span class=\"vf-diamond-outer\"><\/span><span class=\"vf-diamond-inner\"><\/span>\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M8 5.5v13l10.5-6.5z\"\/><\/svg>\n <\/button>\n <\/article>\n\n <article class=\"vf-slide\" data-pos=\"right\" data-id=\"v4eD14f89S8\" data-title=\"In conversation with our team\" data-meta=\"Team interview \u00b7 9 March 2026\" data-focus=\"50% 35%\" aria-roledescription=\"slide\" aria-label=\"Film 2 of 3\" aria-hidden=\"true\">\n <div class=\"vf-slide-media\"><img decoding=\"async\" data-yt=\"v4eD14f89S8\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"3VF team member speaking in an interview\" loading=\"lazy\" draggable=\"false\" class=\"lazyload\" data-src=\"https:\/\/i.ytimg.com\/vi\/v4eD14f89S8\/maxresdefault.jpg\"><\/div>\n <div class=\"vf-slide-shade\"><\/div>\n <span class=\"vf-slide-tag\">Film 02<\/span>\n <button type=\"button\" class=\"vf-diamond\" aria-label=\"Play film: In conversation with our team\" tabindex=\"-1\">\n <span class=\"vf-diamond-pulse\"><\/span><span class=\"vf-diamond-outer\"><\/span><span class=\"vf-diamond-inner\"><\/span>\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M8 5.5v13l10.5-6.5z\"\/><\/svg>\n <\/button>\n <\/article>\n\n <article class=\"vf-slide\" data-pos=\"left\" data-id=\"gb-UT87IOhc\" data-title=\"3VF LTD \u2014 OTIS Elevator's Distributor, Ghana\" data-meta=\"Company film\" data-focus=\"42% 50%\" aria-roledescription=\"slide\" aria-label=\"Film 3 of 3\" aria-hidden=\"true\">\n <div class=\"vf-slide-media\"><img decoding=\"async\" data-yt=\"gb-UT87IOhc\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"3VF team at work around a meeting table\" loading=\"lazy\" draggable=\"false\" class=\"lazyload\" data-src=\"https:\/\/i.ytimg.com\/vi\/gb-UT87IOhc\/maxresdefault.jpg\"><\/div>\n <div class=\"vf-slide-shade\"><\/div>\n <span class=\"vf-slide-tag\">Film 03<\/span>\n <button type=\"button\" class=\"vf-diamond\" aria-label=\"Play film: 3VF LTD, OTIS Elevator's Distributor, Ghana\" tabindex=\"-1\">\n <span class=\"vf-diamond-pulse\"><\/span><span class=\"vf-diamond-outer\"><\/span><span class=\"vf-diamond-inner\"><\/span>\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M8 5.5v13l10.5-6.5z\"\/><\/svg>\n <\/button>\n <\/article>\n\n <button type=\"button\" class=\"vf-flow-arrow vf-flow-arrow--prev\" aria-label=\"Previous film\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 12H4M10 6l-6 6 6 6\"\/><\/svg>\n <\/button>\n <button type=\"button\" class=\"vf-flow-arrow vf-flow-arrow--next\" aria-label=\"Next film\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 12h16M14 6l6 6-6 6\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"vf-flow-meta\">\n <div class=\"vf-flow-count\" aria-hidden=\"true\"><b class=\"vf-flow-cur\">01<\/b>\/ 03<\/div>\n <div class=\"vf-flow-caption\" aria-live=\"polite\">\n <h3 class=\"vf-flow-title\">Welcome to 3VF<\/h3>\n <p class=\"vf-flow-sub\">Team interview \u00b7 6 March 2026<\/p>\n <\/div>\n <div class=\"vf-flow-side\">\n <div class=\"vf-flow-dots\">\n <button type=\"button\" class=\"vf-flow-dot is-active\" aria-label=\"Show film 1\" aria-current=\"true\"><\/button>\n <button type=\"button\" class=\"vf-flow-dot\" aria-label=\"Show film 2\"><\/button>\n <button type=\"button\" class=\"vf-flow-dot\" aria-label=\"Show film 3\"><\/button>\n <\/div>\n <a class=\"vf-flow-yt\" href=\"https:\/\/www.youtube.com\/watch?v=jzaU9aeUBZs\" target=\"_blank\" rel=\"noopener\">\n <svg viewBox=\"0 0 28 20\" aria-hidden=\"true\"><rect width=\"28\" height=\"20\" rx=\"5\" fill=\"#FF0000\"\/><path d=\"M11 6l9 4-9 4z\" fill=\"#fff\"\/><\/svg>\n Watch on YouTube\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ============================== 3 \u00b7 VALUES ============================== -->\n <section class=\"vf-sec vf-values\" data-floor=\"3\" data-floor-name=\"Values\">\n <div class=\"vf-wrap\">\n <div class=\"vf-mission\">\n <div>\n <span class=\"vf-eyebrow\" data-vf-reveal>What drives us<\/span>\n <h2 class=\"vf-h2\" data-vf-split>Our <em class=\"vf-script\">mission.<\/em><\/h2>\n <p class=\"vf-mission-text\" data-vf-reveal style=\"--d:200\">\n At 3VF, our mission is to <strong>elevate people's lives<\/strong> by delivering safe,\n efficient, and sustainable vertical mobility solutions.\n <\/p>\n <p class=\"vf-mission-sub\" data-vf-reveal style=\"--d:320\">\n We aim to enhance the quality of life in urban and suburban environments through\n cutting-edge elevator technology and exceptional service.\n <\/p>\n <\/div>\n <div class=\"vf-rotor\" data-vf-reveal aria-hidden=\"true\">\n <svg viewBox=\"0 0 200 200\">\n <defs><path id=\"vfRotorPath\" d=\"M100,100 m-78,0 a78,78 0 1,1 156,0 a78,78 0 1,1 -156,0\"\/><\/defs>\n <text><textPath href=\"#vfRotorPath\" xlink:href=\"#vfRotorPath\" textLength=\"484\" lengthAdjust=\"spacing\">SAFETY \u2022 INNOVATION \u2022 CUSTOMER SATISFACTION \u2022<\/textPath><\/text>\n <\/svg>\n <span class=\"vf-rotor-core\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 19V5M6 11l6-6 6 6\"\/><\/svg><\/span>\n <\/div>\n <\/div>\n\n <div class=\"vf-values-head\">\n <h3 class=\"vf-values-title\" data-vf-split>Three core values. <span>One smooth ride.<\/span><\/h3>\n <p class=\"vf-values-note\" data-vf-reveal style=\"--d:200\">What each value means for the people who ride, and the technicians who keep them moving.<\/p>\n <\/div>\n\n <div class=\"vf-stack\">\n <article class=\"vf-vcard vf-vcard--light\" style=\"--i:0\" data-vf-spot>\n <div class=\"vf-vcard-left\">\n <span class=\"vf-vcard-kicker\">Value 01<\/span>\n <span class=\"vf-vcard-num\" aria-hidden=\"true\">01<\/span>\n <h4 class=\"vf-vcard-title\">Safety<\/h4>\n <\/div>\n <div class=\"vf-vcard-right\">\n <span class=\"vf-vcard-icon\"><svg viewBox=\"0 0 48 48\"><path d=\"M24 5l14 5.6v10.8c0 8.6-5.8 16-14 18.8-8.2-2.8-14-10.2-14-18.8V10.6z\"\/><path class=\"acc\" d=\"m17.5 24.2 4.4 4.4 8.6-9\"\/><\/svg><\/span>\n <p>Safety is our top priority. We adhere to the highest safety standards to protect both passengers and our technicians during installation and maintenance.<\/p>\n <ul class=\"vf-vcard-tags\"><li>Passengers<\/li><li>Technicians<\/li><li>Installation & maintenance<\/li><\/ul>\n <\/div>\n <\/article>\n <article class=\"vf-vcard vf-vcard--teal\" style=\"--i:1\" data-vf-spot>\n <div class=\"vf-vcard-left\">\n <span class=\"vf-vcard-kicker\">Value 02<\/span>\n <span class=\"vf-vcard-num\" aria-hidden=\"true\">02<\/span>\n <h4 class=\"vf-vcard-title\">Innovation<\/h4>\n <\/div>\n <div class=\"vf-vcard-right\">\n <span class=\"vf-vcard-icon\"><svg viewBox=\"0 0 48 48\"><path d=\"M24 9c-6.6 0-12 5.1-12 11.5 0 3.9 2 7.3 5 9.4 1.2.9 2 2.3 2 3.8V36h10v-2.3c0-1.5.8-2.9 2-3.8 3-2.1 5-5.5 5-9.4C36 14.1 30.6 9 24 9z\"\/><path d=\"M19.5 41h9\"\/><path class=\"acc\" d=\"M24 2.5v2.5M8.5 9l1.8 1.8M39.5 9l-1.8 1.8M4 22h2.5M41.5 22H44M21 22l3-4 3 4-3 4z\"\/><\/svg><\/span>\n <p>We continuously invest in research and development to bring clients the latest elevator technology, ensuring efficiency, sustainability, and cost-effectiveness.<\/p>\n <ul class=\"vf-vcard-tags\"><li>Efficiency<\/li><li>Sustainability<\/li><li>Cost-effectiveness<\/li><\/ul>\n <\/div>\n <\/article>\n <article class=\"vf-vcard vf-vcard--orange\" style=\"--i:2\" data-vf-spot>\n <div class=\"vf-vcard-left\">\n <span class=\"vf-vcard-kicker\">Value 03<\/span>\n <span class=\"vf-vcard-num\" aria-hidden=\"true\">03<\/span>\n <h4 class=\"vf-vcard-title\">Customer satisfaction<\/h4>\n <\/div>\n <div class=\"vf-vcard-right\">\n <span class=\"vf-vcard-icon\"><svg viewBox=\"0 0 48 48\"><circle cx=\"24\" cy=\"24\" r=\"17\"\/><path d=\"M18 20h.01M30 20h.01\" stroke-width=\"3.4\"\/><path class=\"acc\" d=\"M16.5 27.5c1.7 3.2 4.4 5 7.5 5s5.8-1.8 7.5-5\"\/><\/svg><\/span>\n <p>Client happiness is our goal. We strive to exceed expectations with prompt, reliable service and strong, lasting client relationships.<\/p>\n <ul class=\"vf-vcard-tags\"><li>Prompt<\/li><li>Reliable<\/li><li>Lasting relationships<\/li><\/ul>\n <\/div>\n <\/article>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ============================== 4 \u00b7 SERVICES ============================== -->\n <section class=\"vf-sec vf-services\" data-floor=\"4\" data-floor-name=\"Services\">\n <div class=\"vf-wrap\">\n <div class=\"vf-services-head\">\n <div>\n <span class=\"vf-eyebrow\" data-vf-reveal>Our services reach<\/span>\n <h2 class=\"vf-h2\" data-vf-split>New builds to <em class=\"vf-script\">modernization.<\/em><\/h2>\n <\/div>\n <p data-vf-reveal style=\"--d:200\">\n Our services span upgrades to existing equipment, unique design-build applications, and new\n installations for commercial buildings — delivered in line with Ghana building code\n requirements, EN81 standards, ASME A17.1 and ASME A18.1, and supported by a trusted team of\n local and partner mechanics.\n <\/p>\n <\/div>\n\n <div class=\"vf-svc-grid\" data-vf-stagger>\n <article class=\"vf-svc\">\n <div class=\"vf-svc-art\" data-vf-tilt>\n <span class=\"vf-tag\" style=\"--r:-9deg; left:calc(16 * var(--u)); top:calc(18 * var(--u))\">New builds<\/span>\n <span class=\"vf-tag\" style=\"--r:7deg; right:calc(16 * var(--u)); top:calc(52 * var(--u))\">Ghana Code<\/span>\n <svg viewBox=\"0 0 200 170\" aria-hidden=\"true\">\n <g stroke=\"rgba(169,205,219,.28)\" stroke-width=\"1.5\" fill=\"none\">\n <path d=\"M62 0v170M138 0v170\"\/>\n <path d=\"M30 44h140M30 104h140M30 164h140\" stroke-dasharray=\"3 5\"\/>\n <\/g>\n <g fill=\"#ff7a00\"><circle cx=\"152\" cy=\"36\" r=\"3\"\/><circle cx=\"152\" cy=\"96\" r=\"3\"\/><circle cx=\"152\" cy=\"156\" r=\"3\"\/><\/g>\n <g class=\"vf-art-car\">\n <path d=\"M100 -200V58\" stroke=\"#a9cddb\" stroke-width=\"1.4\"\/>\n <rect x=\"70\" y=\"58\" width=\"60\" height=\"80\" rx=\"7\" fill=\"#0e5b7c\" stroke=\"#a9cddb\" stroke-width=\"1.6\"\/>\n <path d=\"M100 74v58\" stroke=\"#a9cddb\" stroke-width=\"1.2\"\/>\n <rect x=\"92\" y=\"64\" width=\"16\" height=\"6\" rx=\"2\" fill=\"#ff7a00\"\/>\n <\/g>\n <\/svg>\n <\/div>\n <h3 class=\"vf-svc-title\">New installations<\/h3>\n <p>Elevators, escalators and lifts for new commercial buildings, installed to Ghana code and EN81.<\/p>\n <\/article>\n\n <article class=\"vf-svc\">\n <div class=\"vf-svc-art\" data-vf-tilt>\n <span class=\"vf-tag\" style=\"--r:8deg; left:calc(18 * var(--u)); top:calc(20 * var(--u))\">24\/7 technicians<\/span>\n <svg viewBox=\"0 0 200 170\" aria-hidden=\"true\">\n <g class=\"vf-art-gear\">\n <circle cx=\"86\" cy=\"100\" r=\"40\" fill=\"none\" stroke=\"#a9cddb\" stroke-width=\"13\" stroke-dasharray=\"9 6.7\"\/>\n <circle cx=\"86\" cy=\"100\" r=\"31\" fill=\"#0e5b7c\" stroke=\"#a9cddb\" stroke-width=\"1.6\"\/>\n <circle cx=\"86\" cy=\"100\" r=\"10\" fill=\"none\" stroke=\"#ff7a00\" stroke-width=\"3\"\/>\n <\/g>\n <g class=\"vf-art-gear vf-art-gear--sm\">\n <circle cx=\"146\" cy=\"52\" r=\"20\" fill=\"none\" stroke=\"#a9cddb\" stroke-width=\"9\" stroke-dasharray=\"6 5.4\"\/>\n <circle cx=\"146\" cy=\"52\" r=\"14\" fill=\"#0e5b7c\" stroke=\"#a9cddb\" stroke-width=\"1.4\"\/>\n <circle cx=\"146\" cy=\"52\" r=\"4\" fill=\"#ff7a00\"\/>\n <\/g>\n <\/svg>\n <\/div>\n <h3 class=\"vf-svc-title\">Maintenance<\/h3>\n <p>Proactive servicing with technicians available around the clock, and clear updates at every visit.<\/p>\n <\/article>\n\n <article class=\"vf-svc\">\n <div class=\"vf-svc-art\" data-vf-tilt>\n <span class=\"vf-tag\" style=\"--r:-7deg; right:calc(18 * var(--u)); top:calc(22 * var(--u))\">Upgrades<\/span>\n <svg viewBox=\"0 0 200 170\" aria-hidden=\"true\">\n <defs><clipPath id=\"vfEscClip\"><path d=\"M40 150 46 128 146 40 152 64z\"\/><\/clipPath><\/defs>\n <path d=\"M18 140h32l90-80h42v18h-36l-90 80H18z\" fill=\"rgba(169,205,219,.12)\"\/>\n <path d=\"M18 128h30l90-80h44\" fill=\"none\" stroke=\"#a9cddb\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/>\n <g clip-path=\"url(#vfEscClip)\">\n <path class=\"vf-art-steps\" d=\"M-4 188h18v-16h18v-16h18v-16h18v-16h18v-16h18v-16h18v-16h18v-16h18v-16h18v-16\" fill=\"none\" stroke=\"#a9cddb\" stroke-width=\"2\"\/>\n <\/g>\n <path d=\"M150 34 172 12M160 12h12v12\" fill=\"none\" stroke=\"#ff7a00\" stroke-width=\"3.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/div>\n <h3 class=\"vf-svc-title\">Modernization<\/h3>\n <p>Upgrades to existing equipment that bring older installations up to today's standards.<\/p>\n <\/article>\n\n <article class=\"vf-svc\">\n <div class=\"vf-svc-art vf-svc-art--blue\" data-vf-tilt>\n <span class=\"vf-tag\" style=\"--r:9deg; left:calc(16 * var(--u)); top:calc(20 * var(--u))\">Design-build<\/span>\n <svg viewBox=\"0 0 200 170\" aria-hidden=\"true\">\n <g class=\"vf-art-draw\" fill=\"none\" stroke=\"#a9cddb\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path pathLength=\"1\" d=\"M36 160V82l42-28 42 28v78M36 160h128M120 160V100h44v60\"\/>\n <path pathLength=\"1\" d=\"M62 160v-34h32v34M52 92h14M88 92h14M52 108h14M88 108h14M132 114h20M132 130h20M132 146h20\"\/>\n <\/g>\n <path d=\"M146 26h30l-30 30z\" fill=\"rgba(255,122,0,.18)\" stroke=\"#ff7a00\" stroke-width=\"2.4\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/div>\n <h3 class=\"vf-svc-title\">Design-build<\/h3>\n <p>Unique design-build applications, engineered around the building rather than squeezed into it.<\/p>\n <\/article>\n <\/div>\n <\/div>\n\n <p class=\"vf-marquee-label\" data-vf-reveal>Trusted to keep Ghana's leading organizations moving<\/p>\n <!-- Client logos. To add one, copy a line and change src and alt.\n --z enlarges a logo whose image has a lot of empty margin (1 = no change). -->\n <div class=\"vf-marquee\">\n <ul class=\"vf-logos\">\n <li class=\"vf-logo\" style=\"--z:1.22\"><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Parliament of Ghana\" decoding=\"async\" draggable=\"false\" class=\"lazyload\" data-src=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-11-at-10.37.32-1.jpeg\"><\/li>\n <li class=\"vf-logo\" style=\"--z:2.05\"><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Volta River Authority\" decoding=\"async\" draggable=\"false\" class=\"lazyload\" data-src=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-11-at-10.37.23-1.jpeg\"><\/li>\n <li class=\"vf-logo\" style=\"--z:1.05\"><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Ghana Cleft Foundation\" decoding=\"async\" draggable=\"false\" class=\"lazyload\" data-src=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-11-at-10.37.51.jpeg\"><\/li>\n <li class=\"vf-logo\" style=\"--z:.95\"><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"First Atlantic Bank\" decoding=\"async\" draggable=\"false\" class=\"lazyload\" data-src=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-11-at-10.37.21.jpeg\"><\/li>\n <li class=\"vf-logo\" style=\"--z:1.18\"><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Office of the Special Prosecutor, Ghana\" decoding=\"async\" draggable=\"false\" class=\"lazyload\" data-src=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-11-at-10.37.49.jpeg\"><\/li>\n <li class=\"vf-logo vf-logo--whiten\" style=\"--z:1.32\"><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Tamale Teaching Hospital\" decoding=\"async\" draggable=\"false\" class=\"lazyload\" data-src=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-11-at-10.37.30.jpeg\"><\/li>\n <li class=\"vf-logo\" style=\"--z:1.2\"><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Wisconsin International University College, Ghana\" decoding=\"async\" draggable=\"false\" class=\"lazyload\" data-src=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-11-at-10.37.50.jpeg\"><\/li>\n <li class=\"vf-logo\" style=\"--z:.97\"><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"MTN\" decoding=\"async\" draggable=\"false\" class=\"lazyload\" data-src=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-08-20-at-09.10.01.jpeg\"><\/li>\n <li class=\"vf-logo\" style=\"--z:1.25\"><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Toyota\" decoding=\"async\" draggable=\"false\" class=\"lazyload\" data-src=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-08-20-at-09.14.47.jpeg\"><\/li>\n <li class=\"vf-logo\" style=\"--z:.88\"><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Western Serene Atlantic Hotel\" decoding=\"async\" draggable=\"false\" class=\"lazyload\" data-src=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-08-20-at-09.14.47-2.jpeg\"><\/li>\n <li class=\"vf-logo\" style=\"--z:1\"><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"National Health Insurance Scheme (NHIS)\" decoding=\"async\" draggable=\"false\" class=\"lazyload\" data-src=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/09\/idNPzU5FID_logos.png\"><\/li>\n <\/ul>\n <\/div>\n <\/section>\n\n <!-- ============================== 5 \u00b7 JOURNEY ============================== -->\n <section class=\"vf-sec vf-journey\" data-floor=\"5\" data-floor-name=\"Journey\">\n <div class=\"vf-wrap\">\n <div class=\"vf-journey-head\">\n <span class=\"vf-eyebrow\" data-vf-reveal>Where we're headed<\/span>\n <h2 class=\"vf-h2\" data-vf-split>Built on a legacy. <em class=\"vf-script\">Rising higher.<\/em><\/h2>\n <\/div>\n\n <div class=\"vf-shaft\">\n <div class=\"vf-shaft-track\" aria-hidden=\"true\"><div class=\"vf-shaft-fill\"><\/div><\/div>\n <div class=\"vf-shaft-car\" aria-hidden=\"true\"><\/div>\n <ol class=\"vf-stops\">\n <li class=\"vf-stop\" data-vf-reveal>\n <div class=\"vf-stop-card\">\n <span class=\"vf-stop-kicker\">The legacy<\/span>\n <h3>Three decades of OTIS in Ghana<\/h3>\n <p>The OTIS\/CFAO partnership has served the Ghanaian market for more than 30 years — the experience our team carries into every building today.<\/p>\n <\/div>\n <span class=\"vf-stop-dot\" aria-hidden=\"true\"><\/span>\n <span class=\"vf-stop-floor\" aria-hidden=\"true\">01<\/span>\n <\/li>\n <li class=\"vf-stop\" data-vf-reveal>\n <div class=\"vf-stop-card\">\n <span class=\"vf-stop-kicker\">The handover<\/span>\n <h3>3VF LTD takes the lift<\/h3>\n <p>3VF LTD was incorporated in Ghana to take over the lift activity of the OTIS\/CFAO partnership, continuing that legacy as part of CFAO's acquisition of the lift business.<\/p>\n <\/div>\n <span class=\"vf-stop-dot\" aria-hidden=\"true\"><\/span>\n <span class=\"vf-stop-floor\" aria-hidden=\"true\">02<\/span>\n <\/li>\n <li class=\"vf-stop\" data-vf-reveal>\n <div class=\"vf-stop-card\">\n <span class=\"vf-stop-kicker\">Short-term goal<\/span>\n <h3>Solidify the gains<\/h3>\n <p>Solidify the gains made through the CFAO\/OTIS partnership in Ghana, working with our core team while introducing new strategies to keep customers satisfied.<\/p>\n <\/div>\n <span class=\"vf-stop-dot\" aria-hidden=\"true\"><\/span>\n <span class=\"vf-stop-floor\" aria-hidden=\"true\">03<\/span>\n <\/li>\n <li class=\"vf-stop\" data-vf-reveal>\n <div class=\"vf-stop-card\">\n <span class=\"vf-stop-kicker\">Long-term goal<\/span>\n <h3>Ghana's reference point<\/h3>\n <p>Become the preferred elevator service company and the reference point for new elevator and maintenance services in Ghana.<\/p>\n <\/div>\n <span class=\"vf-stop-dot\" aria-hidden=\"true\"><\/span>\n <span class=\"vf-stop-floor\" aria-hidden=\"true\">04<\/span>\n <\/li>\n <\/ol>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ============================== PH \u00b7 PENTHOUSE ============================== -->\n <section class=\"vf-sec vf-cta vf-dark\" data-floor=\"PH\" data-floor-name=\"Our promise\">\n <div class=\"vf-band\" aria-hidden=\"true\">\n <span class=\"vf-outline\" data-vf-drift=\"-300\">3VF LTD<\/span>\n <\/div>\n <div class=\"vf-cta-inner\">\n <div class=\"vf-wrap\">\n <span class=\"vf-eyebrow\" data-vf-reveal>Our promise<\/span>\n <h2 class=\"vf-cta-title\" data-vf-split=\"chars\" style=\"--step:28ms\">Safe and smooth <em class=\"vf-script\">ride.<\/em><\/h2>\n <p class=\"vf-cta-lead\" data-vf-reveal style=\"--d:400\">\n Peace of mind for every building we serve — OTIS engineering, delivered by a local\n team that keeps you informed at every stage.\n <\/p>\n <div class=\"vf-actions\" data-vf-reveal style=\"--d:550\">\n <a class=\"vf-btn vf-btn--primary\" href=\"https:\/\/3vfltd.com\/wp-content\/uploads\/2026\/08\/3VF_LTD_Company_Profile.pdf\" target=\"_blank\" rel=\"noopener\" data-vf-magnetic>\n <span class=\"vf-btn-label\">Read the company profile<\/span>\n <span class=\"vf-btn-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/span>\n <\/a>\n <a class=\"vf-btn vf-btn--ghost\" href=\"#vf-motion\" data-vf-magnetic>\n <span class=\"vf-btn-label\">View more<\/span>\n <span class=\"vf-btn-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n<\/div>\n\n<script>\n(function () {\n var root = document.getElementById('vfAbout');\n if (!root || root.getAttribute('data-vf-ready')) return;\n root.setAttribute('data-vf-ready', '1');\n\n function mq(q) { return !!(window.matchMedia && window.matchMedia(q).matches); }\n var reduce = mq('(prefers-reduced-motion: reduce)');\n var fine = mq('(hover: hover) and (pointer: fine)');\n if (!reduce) root.classList.add('vf-js');\n\n function $(s, c) { return (c || root).querySelector(s); }\n function $$(s, c) { return Array.prototype.slice.call((c || root).querySelectorAll(s)); }\n function clamp(v, a, b) { return v < a ? a : (v > b ? b : v); }\n function pad(n) { return (n < 10 ? '0' : '') + n; }\n function smoothTo(y) { window.scrollTo({ top: Math.max(0, y), behavior: reduce ? 'auto' : 'smooth' }); }\n function scrollToEl(el) { smoothTo(el.getBoundingClientRect().top + window.pageYOffset - 90); }\n\n \/* ---------- Films: the carousel slides are the single source ---------- *\/\n var slides = $$('.vf-slide');\n var films = slides.map(function (s) {\n return { id: s.getAttribute('data-id'), title: s.getAttribute('data-title'), meta: s.getAttribute('data-meta'), focus: s.getAttribute('data-focus') || '50% 50%' };\n });\n slides.forEach(function (s, i) { var im = $('.vf-slide-media img', s); if (im) im.style.objectPosition = films[i].focus; });\n function thumb(id, q) { return 'https:\/\/i.ytimg.com\/vi\/' + id + '\/' + (q || 'maxresdefault') + '.jpg'; }\n\n \/* YouTube thumbnails: maxres -> hq -> hidden. maxres can come back as a\n 120px grey placeholder instead of a 404, so check the size too. *\/\n function guard(img) {\n function fallback() {\n var id = img.getAttribute('data-yt');\n if (!id || img.getAttribute('data-fallback')) { img.style.visibility = 'hidden'; return; }\n img.setAttribute('data-fallback', '1');\n img.src = thumb(id, 'hqdefault');\n }\n img.addEventListener('error', fallback);\n img.addEventListener('load', function () {\n if (img.naturalWidth > 0 && img.naturalWidth <= 120 && !img.getAttribute('data-fallback')) fallback();\n });\n if (img.complete && img.naturalWidth > 0 && img.naturalWidth <= 120) fallback();\n }\n $$('img[data-yt]').forEach(guard);\n\n \/* ---------- Text splitting (words, or chars for the closing line) ---------- *\/\n function unit(content, i, free) {\n var w = document.createElement('span');\n w.className = 'vf-w' + (free ? ' vf-w--free' : '');\n var inner = document.createElement('span');\n inner.className = 'vf-wi';\n inner.style.setProperty('--i', i);\n if (typeof content === 'string') inner.textContent = content; else inner.appendChild(content);\n w.appendChild(inner);\n return w;\n }\n function split(el) {\n var chars = el.getAttribute('data-vf-split') === 'chars', i = 0;\n if (chars) el.setAttribute('aria-label', el.textContent.replace(\/\\s+\/g, ' ').trim());\n (function walk(node) {\n Array.prototype.slice.call(node.childNodes).forEach(function (child) {\n if (child.nodeType === 3) {\n var frag = document.createDocumentFragment();\n child.textContent.split(\/(\\s+)\/).forEach(function (part) {\n if (!part) return;\n if (!part.trim()) { frag.appendChild(document.createTextNode(' ')); return; }\n if (chars) {\n var word = document.createElement('span');\n word.className = 'vf-word';\n word.setAttribute('aria-hidden', 'true');\n part.split('').forEach(function (ch) { word.appendChild(unit(ch, i++)); });\n frag.appendChild(word);\n } else {\n frag.appendChild(unit(part, i++));\n }\n });\n node.replaceChild(frag, child);\n } else if (child.nodeType === 1 && child.tagName !== 'BR' && child.tagName.toLowerCase() !== 'svg') {\n if (child.classList.contains('vf-script')) {\n var holder = document.createElement('span');\n node.replaceChild(holder, child);\n var u = unit(child, i++, true);\n if (chars) u.setAttribute('aria-hidden', 'true');\n node.replaceChild(u, holder);\n } else {\n walk(child);\n }\n }\n });\n })(el);\n el.style.setProperty('--n', i);\n }\n $$('[data-vf-split], .vf-highlight').forEach(split);\n\n $$('[data-vf-stagger]').forEach(function (g) {\n Array.prototype.forEach.call(g.children, function (c, i) { c.style.setProperty('--i', i); });\n });\n\n \/* ---------- Scramble + count-up ---------- *\/\n function scramble(el) {\n var tgt = el.querySelector('[aria-hidden]') || el;\n var finalText = el.getAttribute('data-vf-scramble');\n var pool = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';\n var t0 = null, dur = 1500;\n function f(t) {\n if (t0 === null) t0 = t;\n var p = Math.min(1, (t - t0) \/ dur), shown = Math.floor(p * finalText.length), out = '';\n for (var k = 0; k < finalText.length; k++) {\n var ch = finalText.charAt(k);\n out += (k < shown || ch === ' ' || ch === '\u00b7') ? ch : pool.charAt((Math.random() * pool.length) | 0);\n }\n tgt.textContent = out;\n if (p < 1) requestAnimationFrame(f);\n }\n requestAnimationFrame(f);\n }\n function countUp(el) {\n var to = parseFloat(el.getAttribute('data-vf-count')) || 0, suf = el.getAttribute('data-suffix') || '';\n var t0 = null, dur = 1700;\n function f(t) {\n if (t0 === null) t0 = t;\n var p = Math.min(1, (t - t0) \/ dur), e = p === 1 ? 1 : 1 - Math.pow(2, -10 * p);\n el.textContent = Math.round(to * e) + suf;\n if (p < 1) requestAnimationFrame(f);\n }\n requestAnimationFrame(f);\n }\n if (!reduce) $$('[data-vf-count]').forEach(function (el) { el.textContent = '0' + (el.getAttribute('data-suffix') || ''); });\n\n \/* ---------- Reveal on scroll ---------- *\/\n var revealTargets = $$('[data-vf-reveal], [data-vf-split], [data-vf-stagger], [data-vf-scramble], [data-vf-count]');\n function reveal(el) {\n el.classList.add('is-in');\n if (el.hasAttribute('data-vf-scramble')) scramble(el);\n if (el.hasAttribute('data-vf-count')) countUp(el);\n }\n if (reduce || !('IntersectionObserver' in window)) {\n revealTargets.forEach(function (el) { el.classList.add('is-in'); });\n } else {\n var io = new IntersectionObserver(function (entries) {\n entries.forEach(function (e) {\n if (e.isIntersecting) { reveal(e.target); io.unobserve(e.target); }\n });\n }, { threshold: 0.15, rootMargin: '0px 0px -6% 0px' });\n revealTargets.forEach(function (el) { io.observe(el); });\n }\n\n \/* ---------- Floor indicator ---------- *\/\n var floorEls = $$('[data-floor]');\n var floorWrap = $('.vf-floor'), floorBtn = $('.vf-floor-display'), floorPanel = $('.vf-floor-panel');\n var floorNum = $('.vf-floor-num'), floorName = $('.vf-floor-name'), floorArrow = $('.vf-floor-arrow');\n var floorBtns = [], curFloor = 0, idleTimer = null;\n\n function jumpToFloor(i) {\n var sec = floorEls[i];\n var target = i === 0 ? root : (sec.querySelector('.vf-motion-head, .vf-story-head, .vf-mission, .vf-services-head, .vf-journey-head, .vf-cta-inner .vf-wrap') || sec);\n if (i === 0) smoothTo(root.getBoundingClientRect().top + window.pageYOffset - 80); else scrollToEl(target);\n }\n function setFloor(i) {\n if (i === curFloor || !floorNum) return;\n var up = i > curFloor, label = floorEls[i].getAttribute('data-floor');\n \/* drop any number still animating out, so only the current one remains *\/\n while (floorNum.children.length > 1) floorNum.removeChild(floorNum.firstElementChild);\n var old = floorNum.lastElementChild, s = document.createElement('span');\n s.textContent = label;\n if (old && !reduce) {\n s.className = up ? 'vf-in-up' : 'vf-in-down';\n old.className = up ? 'vf-out-up' : 'vf-out-down';\n setTimeout(function () { if (old.parentNode) old.parentNode.removeChild(old); }, 480);\n } else if (old) {\n old.parentNode.removeChild(old);\n }\n floorNum.appendChild(s);\n floorName.textContent = floorEls[i].getAttribute('data-floor-name');\n floorBtns.forEach(function (b) { b.classList.toggle('is-current', +b.getAttribute('data-i') === i); });\n if (floorWrap) floorWrap.classList.toggle('is-away', i === 0);\n if (i === 0) closePanel();\n curFloor = i;\n }\n function closePanel() { if (floorPanel && !floorPanel.hidden) { floorPanel.hidden = true; floorBtn.setAttribute('aria-expanded', 'false'); } }\n if (floorBtn && floorPanel) {\n for (var fi = floorEls.length - 1; fi >= 0; fi--) {\n (function (i) {\n var b = document.createElement('button');\n b.type = 'button';\n b.className = 'vf-floor-btn' + (i === 0 ? ' is-current' : '');\n b.setAttribute('data-i', i);\n b.textContent = floorEls[i].getAttribute('data-floor');\n b.setAttribute('aria-label', 'Go to ' + floorEls[i].getAttribute('data-floor-name'));\n b.addEventListener('click', function () {\n b.classList.add('is-lit');\n setTimeout(function () { b.classList.remove('is-lit'); }, 1200);\n setTimeout(closePanel, reduce ? 0 : 260);\n jumpToFloor(i);\n });\n floorPanel.appendChild(b);\n floorBtns.push(b);\n })(fi);\n }\n floorBtn.addEventListener('click', function () {\n var open = floorPanel.hidden;\n floorPanel.hidden = !open;\n floorBtn.setAttribute('aria-expanded', open ? 'true' : 'false');\n });\n document.addEventListener('click', function (e) { if (!e.target.closest || !e.target.closest('.vf-floor')) closePanel(); });\n document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closePanel(); });\n }\n\n \/* ---------- In-page links (offset for sticky theme headers) ---------- *\/\n $$('a[href^=\"#vf-\"]').forEach(function (a) {\n a.addEventListener('click', function (e) {\n var t = document.getElementById(a.getAttribute('href').slice(1));\n if (!t) return;\n e.preventDefault();\n scrollToEl(t);\n });\n });\n\n \/* ---------- Coverflow carousel ---------- *\/\n var flow = $('.vf-flow'), stage = $('.vf-flow-stage');\n var dots = $$('.vf-flow-dot'), cap = $('.vf-flow-caption');\n var capTitle = $('.vf-flow-title'), capSub = $('.vf-flow-sub'), capCur = $('.vf-flow-cur'), ytLink = $('.vf-flow-yt');\n var cur = 0, n = slides.length, capTimer = null;\n\n function place() {\n slides.forEach(function (s, i) {\n var rel = (i - cur + n) % n;\n var pos = rel === 0 ? 'center' : (rel === 1 ? 'right' : (rel === n - 1 ? 'left' : 'back'));\n var old = s.getAttribute('data-pos');\n if ((old === 'left' && pos === 'right') || (old === 'right' && pos === 'left')) {\n s.classList.remove('is-wrap'); void s.offsetWidth; s.classList.add('is-wrap');\n }\n s.setAttribute('data-pos', pos);\n s.setAttribute('aria-hidden', pos === 'center' ? 'false' : 'true');\n var d = $('.vf-diamond', s);\n if (d) d.tabIndex = pos === 'center' ? 0 : -1;\n });\n dots.forEach(function (d, i) {\n d.classList.toggle('is-active', i === cur);\n if (i === cur) d.setAttribute('aria-current', 'true'); else d.removeAttribute('aria-current');\n });\n }\n function caption() {\n var f = films[cur];\n cap.classList.add('is-out');\n clearTimeout(capTimer);\n capTimer = setTimeout(function () {\n capTitle.textContent = f.title;\n capSub.textContent = f.meta;\n capCur.textContent = pad(cur + 1);\n ytLink.href = 'https:\/\/www.youtube.com\/watch?v=' + f.id;\n cap.classList.remove('is-out');\n }, reduce ? 0 : 280);\n }\n function stopVideo() {\n slides.forEach(function (s) {\n var f = $('iframe', s);\n if (f) f.parentNode.removeChild(f);\n s.classList.remove('is-playing');\n });\n }\n function go(i) {\n i = (i + n) % n;\n if (i === cur) return;\n stopVideo();\n cur = i;\n place();\n caption();\n }\n function playCurrent() {\n var s = slides[cur];\n if (s.classList.contains('is-playing')) return;\n var origin = window.location.origin && window.location.origin !== 'null' ? '&origin=' + encodeURIComponent(window.location.origin) : '';\n var f = document.createElement('iframe');\n f.className = 'vf-slide-iframe';\n f.src = 'https:\/\/www.youtube.com\/embed\/' + films[cur].id + '?autoplay=1&rel=0&playsinline=1' + origin;\n f.title = films[cur].title;\n f.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';\n f.referrerPolicy = 'strict-origin-when-cross-origin';\n f.allowFullscreen = true;\n s.appendChild(f);\n s.classList.add('is-playing');\n }\n if (flow && stage) {\n var startX = null, moved = false;\n $('.vf-flow-arrow--prev').addEventListener('click', function () { go(cur - 1); });\n $('.vf-flow-arrow--next').addEventListener('click', function () { go(cur + 1); });\n dots.forEach(function (d, i) { d.addEventListener('click', function () { go(i); }); });\n stage.addEventListener('click', function (e) {\n if (moved) { moved = false; return; }\n var s = e.target.closest('.vf-slide');\n if (!s) return;\n var i = slides.indexOf(s);\n if (i !== cur) go(i); else playCurrent();\n });\n flow.addEventListener('keydown', function (e) {\n if (e.key === 'ArrowLeft') { e.preventDefault(); go(cur - 1); }\n if (e.key === 'ArrowRight') { e.preventDefault(); go(cur + 1); }\n });\n \/* Swipe \/ drag *\/\n stage.addEventListener('pointerdown', function (e) {\n if (e.pointerType === 'mouse' && e.button !== 0) return;\n if (e.target.closest('.vf-flow-arrow')) return;\n startX = e.clientX; moved = false;\n });\n stage.addEventListener('pointermove', function (e) {\n if (startX === null) return;\n var dx = e.clientX - startX;\n if (Math.abs(dx) > 8) {\n moved = true;\n stage.classList.add('is-dragging');\n stage.style.setProperty('--drag', (dx * 0.4).toFixed(1) + 'px');\n }\n });\n function endDrag(e) {\n if (startX === null) return;\n var dx = e.clientX - startX;\n startX = null;\n stage.classList.remove('is-dragging');\n stage.style.setProperty('--drag', '0px');\n if (dx < -60) go(cur + 1);\n else if (dx > 60) go(cur - 1);\n }\n stage.addEventListener('pointerup', endDrag);\n stage.addEventListener('pointerleave', endDrag);\n stage.addEventListener('pointercancel', function () { startX = null; stage.classList.remove('is-dragging'); stage.style.setProperty('--drag', '0px'); });\n }\n\n \/* ---------- Lift sounds: synthesised with Web Audio, so there are no files to host.\n Sound starts as soon as the page opens wherever the browser allows it. Browsers\n that hold page sound back until the visitor first clicks, taps or presses a key\n get it switched on silently at that first interaction. While the lift section is\n scrolled past, all lift sound fades out; it comes back when the section returns. ---------- *\/\n var sound = (function () {\n var ctx = null, out = null, noiseBuf = null, hum = null, on = true, active = true, listeners = [];\n var LEVEL = 0.5;\n try { on = window.localStorage.getItem('vfLiftSound') !== 'off'; } catch (e) {}\n function notify() { listeners.forEach(function (fn) { fn(); }); }\n function unlock() {\n var AC = window.AudioContext || window.webkitAudioContext;\n if (!AC) return;\n if (!ctx) {\n try { ctx = new AC(); } catch (e) { return; }\n out = ctx.createGain();\n out.gain.value = active ? LEVEL : 0;\n out.connect(ctx.destination);\n ctx.onstatechange = notify;\n }\n if (ctx.state !== 'running') {\n var p = ctx.resume();\n if (p && p.then) p.then(notify, notify);\n }\n notify();\n }\n function ready() { return on && active && ctx && ctx.state === 'running'; }\n \/* Section on screen: full level. Scrolled past: fade everything out, including a chime still ringing. *\/\n function setActive(v) {\n active = v;\n if (!ctx) return;\n var t = ctx.currentTime;\n out.gain.cancelScheduledValues(t);\n out.gain.setValueAtTime(out.gain.value, t);\n out.gain.linearRampToValueAtTime(v ? LEVEL : 0, t + (v ? 0.2 : 0.35));\n if (!v) stopTravel();\n }\n function env(g, at, peak, attack, end) {\n g.gain.setValueAtTime(0.0001, at);\n g.gain.exponentialRampToValueAtTime(peak, at + attack);\n g.gain.exponentialRampToValueAtTime(0.0001, end);\n }\n \/* Bell: a fundamental plus two inharmonic partials that die away faster *\/\n function bell(freq, at, dur, vol) {\n [[1, 1, 1], [2.76, 0.32, 0.45], [5.4, 0.1, 0.25]].forEach(function (p) {\n var o = ctx.createOscillator(), g = ctx.createGain();\n o.type = 'sine';\n o.frequency.value = freq * p[0];\n env(g, at, vol * p[1], 0.01, at + dur * p[2]);\n o.connect(g); g.connect(out);\n o.start(at); o.stop(at + dur + 0.05);\n });\n }\n \/* Door glide: swept band-passed noise over a low motor hum *\/\n function glide(at, dur, closing) {\n if (!noiseBuf) {\n noiseBuf = ctx.createBuffer(1, ctx.sampleRate * 2, ctx.sampleRate);\n var data = noiseBuf.getChannelData(0);\n for (var i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1;\n }\n var n = ctx.createBufferSource(), bp = ctx.createBiquadFilter(), ng = ctx.createGain();\n n.buffer = noiseBuf;\n bp.type = 'bandpass'; bp.Q.value = 0.9;\n bp.frequency.setValueAtTime(closing ? 950 : 480, at);\n bp.frequency.linearRampToValueAtTime(closing ? 480 : 950, at + dur);\n ng.gain.setValueAtTime(0.0001, at);\n ng.gain.linearRampToValueAtTime(0.12, at + dur * 0.3);\n ng.gain.linearRampToValueAtTime(0.0001, at + dur);\n n.connect(bp); bp.connect(ng); ng.connect(out);\n n.start(at); n.stop(at + dur + 0.05);\n\n var m = ctx.createOscillator(), lp = ctx.createBiquadFilter(), mg = ctx.createGain();\n m.type = 'sawtooth'; m.frequency.value = 68;\n lp.type = 'lowpass'; lp.frequency.value = 170;\n mg.gain.setValueAtTime(0.0001, at);\n mg.gain.linearRampToValueAtTime(0.05, at + 0.15);\n mg.gain.setValueAtTime(0.05, at + dur - 0.25);\n mg.gain.linearRampToValueAtTime(0.0001, at + dur);\n m.connect(lp); lp.connect(mg); mg.connect(out);\n m.start(at); m.stop(at + dur + 0.05);\n\n if (closing) {\n \/* the soft thunk of the doors meeting *\/\n var t = ctx.createOscillator(), tg = ctx.createGain(), te = at + dur - 0.05;\n t.type = 'sine';\n t.frequency.setValueAtTime(95, te);\n t.frequency.exponentialRampToValueAtTime(42, te + 0.2);\n env(tg, te, 0.35, 0.008, te + 0.22);\n t.connect(tg); tg.connect(out);\n t.start(te); t.stop(te + 0.25);\n }\n }\n \/* Motor hum while the car travels, rising going up and falling going down *\/\n function travel(dur, up) {\n stopTravel();\n var at = ctx.currentTime + 0.02;\n var o = ctx.createOscillator(), lp = ctx.createBiquadFilter(), g = ctx.createGain();\n o.type = 'triangle';\n o.frequency.setValueAtTime(up ? 104 : 124, at);\n o.frequency.linearRampToValueAtTime(up ? 124 : 104, at + dur);\n lp.type = 'lowpass'; lp.frequency.value = 320;\n g.gain.setValueAtTime(0.0001, at);\n g.gain.linearRampToValueAtTime(0.07, at + 0.25);\n g.gain.setValueAtTime(0.07, at + Math.max(0.3, dur - 0.3));\n g.gain.linearRampToValueAtTime(0.0001, at + dur);\n o.connect(lp); lp.connect(g); g.connect(out);\n o.start(at); o.stop(at + dur + 0.05);\n hum = { o: o, g: g };\n }\n function stopTravel() {\n if (!hum || !ctx) return;\n var t = ctx.currentTime;\n try {\n hum.g.gain.cancelScheduledValues(t);\n hum.g.gain.setValueAtTime(hum.g.gain.value, t);\n hum.g.gain.linearRampToValueAtTime(0.0001, t + 0.12);\n hum.o.stop(t + 0.15);\n } catch (e) {}\n hum = null;\n }\n return {\n unlock: unlock,\n setActive: setActive,\n isOn: function () { return on; },\n \/* sound is switched on but the browser hasn't allowed it to play yet *\/\n blocked: function () { return on && !!ctx && ctx.state !== 'running'; },\n onChange: function (fn) { listeners.push(fn); },\n setOn: function (v) {\n on = v;\n if (!v) stopTravel();\n try { window.localStorage.setItem('vfLiftSound', v ? 'on' : 'off'); } catch (e) {}\n notify();\n },\n \/* one chime going up, two going down \u2014 like a real lift *\/\n ding: function (down) {\n if (!ready()) return;\n var t = ctx.currentTime + 0.02;\n bell(1318.5, t, 1.6, 0.2);\n if (down) bell(1046.5, t + 0.42, 1.8, 0.2);\n },\n \/* soft blip as each floor number goes by *\/\n tick: function () {\n if (!ready()) return;\n var t = ctx.currentTime + 0.01, o = ctx.createOscillator(), g = ctx.createGain();\n o.type = 'sine'; o.frequency.value = 1760;\n env(g, t, 0.05, 0.005, t + 0.09);\n o.connect(g); g.connect(out);\n o.start(t); o.stop(t + 0.12);\n },\n travel: function (dur, up) { if (ready()) travel(dur, up); },\n stopTravel: stopTravel,\n open: function () { if (ready()) glide(ctx.currentTime + 0.02, 1.2, false); },\n close: function () { if (ready()) glide(ctx.currentTime + 0.02, 1.2, true); }\n };\n })();\n \/* Start straight away; where the browser waits for the visitor, every kind of\n first interaction it accepts (mouse, touch, pen, keyboard) switches sound on *\/\n sound.unlock();\n ['pointerdown', 'pointerup', 'mousedown', 'touchstart', 'touchend', 'click', 'keydown'].forEach(function (type) {\n document.addEventListener(type, sound.unlock, { passive: true, capture: true });\n });\n\n \/* ---------- The lift: one photo per floor, doors open onto each one ---------- *\/\n var lift = $('.vf-lift');\n var photos = $$('.vf-lift-floors li', lift || root).map(function (li) {\n return { src: li.getAttribute('data-src'), title: li.textContent.trim() };\n });\n if (lift && photos.length) {\n var lImg = $('.vf-lift-img', lift), lBg = $('.vf-lift-bg', lift);\n var lNum = $('.vf-lift-num', lift), lArrow = $('.vf-lift-arrow', lift);\n var lCapNum = $('.vf-lift-capnum', lift), lCapTitle = $('.vf-lift-captitle', lift);\n var lUp = $('.vf-call--up', lift), lDown = $('.vf-call--down', lift), lSound = $('.vf-lift-sound', lift);\n var lTop = photos.length, lFloor = lTop, lBusy = false;\n \/* It rides between floors on its own. Pressing a button takes over for a\n few seconds, then it carries on by itself. *\/\n var auto = !reduce, autoDir = -1, autoTimer = null, resumeTimer = null;\n var inView = false, parked = null;\n\n \/* Every timed step goes through wait(). If the lift has been scrolled out of\n view when a step is due, the step is parked and picked up again the moment\n the lift is back on screen, so it carries on exactly where it stopped. *\/\n function wait(fn, ms, kind) {\n return setTimeout(function () {\n if (inView || reduce) fn();\n else parked = { fn: fn, kind: kind || 'ride' };\n }, ms);\n }\n\n lImg.addEventListener('error', function () { lImg.style.visibility = 'hidden'; lBg.style.visibility = 'hidden'; });\n photos.forEach(function (p) { var im = new Image(); im.src = p.src; });\n\n function lSet(floor) {\n var p = photos[floor - 1];\n lImg.style.visibility = '';\n lBg.style.visibility = '';\n lImg.src = p.src;\n lBg.src = p.src;\n lImg.alt = p.title;\n lCapNum.textContent = floor;\n lCapTitle.textContent = p.title;\n }\n\n if (lSound) {\n \/* \"Tap for sound\" shows only while the browser is holding sound back *\/\n var syncSound = function () {\n var blocked = sound.blocked();\n lSound.setAttribute('aria-pressed', sound.isOn() ? 'true' : 'false');\n lSound.classList.toggle('is-blocked', blocked);\n lSound.setAttribute('aria-label', blocked ? 'Tap to turn on lift sounds' : 'Lift sounds');\n };\n sound.onChange(syncSound);\n syncSound();\n lSound.addEventListener('click', function () {\n \/* sound is on but the browser was still holding it back: just let it play *\/\n if (sound.blocked()) { sound.unlock(); setTimeout(function () { sound.ding(false); }, 80); return; }\n var v = !sound.isOn();\n sound.setOn(v);\n if (v) { sound.unlock(); setTimeout(function () { sound.ding(false); }, 80); }\n });\n }\n function lShow(v) {\n lNum.textContent = v;\n lNum.classList.remove('is-tick'); void lNum.offsetWidth; lNum.classList.add('is-tick');\n }\n function lButtons() {\n lUp.disabled = lBusy || lFloor >= lTop;\n lDown.disabled = lBusy || lFloor <= 1;\n }\n function scheduleAuto(ms) {\n clearTimeout(autoTimer);\n if (!auto) return;\n autoTimer = wait(function () {\n if (!auto || lBusy) return;\n if (lFloor + autoDir < 1 || lFloor + autoDir > lTop) autoDir = -autoDir;\n liftTo(lFloor + autoDir);\n }, ms == null ? 4500 : ms, 'auto');\n }\n \/* One ride, in the same order as a real lift \u2014 each sound is fired by the\n very step it belongs to, so picture and sound always stay together:\n doors close (glide + thunk) > travel (motor hum, a tick per floor)\n > arrive (chime: one going up, two going down) > doors open (glide). *\/\n function liftTo(target) {\n if (lBusy || target === lFloor || target < 1 || target > lTop) return;\n var dirn = target > lFloor ? 1 : -1, wasOpen = lift.classList.contains('is-open');\n var btn = dirn > 0 ? lUp : lDown;\n lBusy = true;\n btn.classList.add('is-lit');\n lButtons();\n lArrow.setAttribute('data-dir', dirn > 0 ? 'up' : 'down');\n lift.classList.remove('is-open');\n if (reduce) {\n lFloor = target; lSet(target); lShow(target);\n lift.classList.add('is-open'); btn.classList.remove('is-lit');\n sound.ding(dirn < 0);\n lBusy = false; lButtons();\n return;\n }\n if (wasOpen) sound.close();\n wait(function () {\n lift.classList.add('is-moving');\n lSet(target);\n sound.travel((Math.abs(target - lFloor) - 1) * 0.56 + 0.4, dirn > 0);\n (function step() {\n lFloor += dirn;\n lShow(lFloor === 0 ? 'G' : lFloor);\n if (lFloor !== target) { sound.tick(); wait(step, 560); return; }\n wait(function () {\n lift.classList.remove('is-moving'); lift.classList.add('is-ding');\n btn.classList.remove('is-lit');\n sound.ding(dirn < 0);\n wait(function () {\n lift.classList.remove('is-ding'); lift.classList.add('is-open');\n sound.open();\n lBusy = false; lButtons(); scheduleAuto();\n }, 400);\n }, 380);\n })();\n }, wasOpen ? 1150 : 250);\n }\n\n function userRide(target) {\n auto = false;\n clearTimeout(autoTimer);\n if (parked && parked.kind === 'auto') parked = null;\n liftTo(target);\n \/* hand control back to the automatic ride after 10 quiet seconds *\/\n clearTimeout(resumeTimer);\n resumeTimer = setTimeout(function () { auto = !reduce; if (!lBusy) scheduleAuto(1500); }, 10000);\n }\n lUp.addEventListener('click', function () { userRide(lFloor + 1); });\n lDown.addEventListener('click', function () { userRide(lFloor - 1); });\n\n if (reduce || !('IntersectionObserver' in window)) {\n lift.classList.add('is-open');\n lButtons();\n } else {\n \/* Start closed on the ground floor, then ride up to the top floor when seen *\/\n lFloor = 0;\n lNum.textContent = 'G';\n lButtons();\n var firstRide = true;\n new IntersectionObserver(function (entries) {\n var e = entries[0];\n inView = e.isIntersecting && e.intersectionRatio >= 0.25;\n sound.setActive(inView);\n if (!inView) return;\n sound.unlock();\n if (firstRide) { firstRide = false; wait(function () { liftTo(lTop); }, 650); return; }\n if (parked) {\n var p = parked;\n parked = null;\n \/* mid-ride: carry straight on; waiting between floors: short pause, then go *\/\n if (p.kind === 'auto') scheduleAuto(1500); else p.fn();\n }\n }, { threshold: [0, 0.25, 0.5, 1] }).observe(lift);\n }\n }\n\n \/* ---------- Client logos: a second copy makes the CSS loop seamless ---------- *\/\n var logoRow = $('.vf-logos');\n if (logoRow && !reduce) {\n Array.prototype.slice.call(logoRow.children).forEach(function (li) {\n var k = li.cloneNode(true);\n k.setAttribute('aria-hidden', 'true');\n var im = $('img', k);\n if (im) im.alt = '';\n logoRow.appendChild(k);\n });\n \/* about 5 seconds per logo, whatever the number of logos *\/\n logoRow.style.setProperty('--dur', (logoRow.children.length \/ 2 * 5) + 's');\n logoRow.classList.add('is-running');\n }\n\n var dir = 1;\n\n \/* ---------- Scroll engine: parallax, drift, highlight, stack, shaft, floor ---------- *\/\n var vh = window.innerHeight, lastY = window.pageYOffset, ticking = false;\n var par = $$('[data-vf-speed]').map(function (el) { return { el: el, s: parseFloat(el.getAttribute('data-vf-speed')) || 0 }; });\n var drift = $$('[data-vf-drift]').map(function (el) { return { el: el, a: parseFloat(el.getAttribute('data-vf-drift')) || 0, y: el.getAttribute('data-vf-axis') === 'y' }; });\n var hls = $$('.vf-highlight'), motionSec = $('.vf-motion'), scaler = $('.vf-flow-scaler');\n var cards = $$('.vf-vcard'), shaft = $('.vf-shaft'), stops = $$('.vf-stop'), rotor = $('.vf-rotor');\n\n function update() {\n ticking = false;\n var y = window.pageYOffset, d = y - lastY;\n if (d) {\n dir = d > 0 ? 1 : -1;\n if (floorArrow) {\n floorArrow.setAttribute('data-dir', dir > 0 ? 'up' : 'down');\n floorArrow.classList.add('is-moving');\n clearTimeout(idleTimer);\n idleTimer = setTimeout(function () { floorArrow.classList.remove('is-moving'); }, 650);\n }\n }\n lastY = y;\n\n if (!reduce) {\n par.forEach(function (p) {\n var r = p.el.parentNode.getBoundingClientRect();\n if (r.bottom < -200 || r.top > vh + 200) return;\n var c = r.top + r.height \/ 2 - vh \/ 2;\n p.el.style.transform = 'translate3d(0,' + (-c * p.s).toFixed(1) + 'px,0)';\n });\n drift.forEach(function (p) {\n var r = p.el.parentNode.getBoundingClientRect();\n if (r.bottom < 0 || r.top > vh) return;\n var v = ((vh - r.top) \/ (vh + r.height) - 0.5) * p.a;\n p.el.style.transform = p.y ? 'translate3d(0,' + v.toFixed(1) + 'px,0)' : 'translate3d(' + v.toFixed(1) + 'px,0,0)';\n });\n hls.forEach(function (el) {\n var r = el.getBoundingClientRect();\n el.style.setProperty('--prog', clamp((vh * 0.82 - r.top) \/ (r.height + vh * 0.32), 0, 1).toFixed(3));\n });\n if (scaler && motionSec) {\n var mr = motionSec.getBoundingClientRect();\n var e = clamp((vh - mr.top) \/ (vh * 0.8), 0, 1);\n scaler.style.setProperty('--enter', (1 - (1 - e) * (1 - e)).toFixed(3));\n }\n for (var k = 0; k < cards.length - 1; k++) {\n var ct = cards[k].getBoundingClientRect().top, nt = cards[k + 1].getBoundingClientRect().top, h = cards[k].offsetHeight;\n var cover = clamp((ct + h - nt) \/ h, 0, 1);\n cards[k].style.setProperty('--s', (1 - cover * 0.06).toFixed(4));\n cards[k].style.setProperty('--dim', (cover * 0.35).toFixed(3));\n }\n if (rotor) rotor.style.setProperty('--rot', (y * 0.12).toFixed(1) + 'deg');\n }\n\n if (shaft) {\n var sr = shaft.getBoundingClientRect();\n var sp = clamp((vh * 0.6 - sr.top) \/ sr.height, 0, 1);\n shaft.style.setProperty('--p', sp.toFixed(4));\n stops.forEach(function (s) {\n var dr = $('.vf-stop-dot', s).getBoundingClientRect();\n s.classList.toggle('is-active', dr.top + dr.height \/ 2 - sr.top <= sp * sr.height + 2);\n });\n }\n\n var fIdx = 0;\n floorEls.forEach(function (f, i) { if (f.getBoundingClientRect().top <= vh * 0.5) fIdx = i; });\n setFloor(fIdx);\n }\n function onScroll() { if (!ticking) { ticking = true; requestAnimationFrame(update); } }\n window.addEventListener('scroll', onScroll, { passive: true });\n window.addEventListener('resize', function () { vh = window.innerHeight; onScroll(); });\n window.addEventListener('load', onScroll);\n update();\n\n if (reduce) return;\n\n \/* ---------- Hero: layers drift with the cursor ---------- *\/\n var hero = $('.vf-hero');\n if (hero && fine) {\n hero.addEventListener('pointermove', function (e) {\n var r = hero.getBoundingClientRect();\n hero.style.setProperty('--hx', ((e.clientX - r.left) \/ r.width - 0.5).toFixed(3));\n hero.style.setProperty('--hy', ((e.clientY - r.top) \/ r.height - 0.5).toFixed(3));\n });\n hero.addEventListener('pointerleave', function () { hero.style.setProperty('--hx', 0); hero.style.setProperty('--hy', 0); });\n }\n\n if (!fine) return;\n\n \/* ---------- Hover: 3D tilt, magnetic buttons, spotlight ---------- *\/\n $$('[data-vf-tilt]').forEach(function (el) {\n var raf = null;\n el.addEventListener('pointerenter', function () { el.classList.add('is-tilting'); });\n el.addEventListener('pointermove', function (e) {\n var r = el.getBoundingClientRect();\n var px = (e.clientX - r.left) \/ r.width - 0.5, py = (e.clientY - r.top) \/ r.height - 0.5;\n if (raf) cancelAnimationFrame(raf);\n raf = requestAnimationFrame(function () {\n el.style.transform = 'perspective(800px) rotateY(' + (px * 9).toFixed(2) + 'deg) rotateX(' + (-py * 9).toFixed(2) + 'deg) scale3d(1.02,1.02,1.02)';\n });\n });\n el.addEventListener('pointerleave', function () {\n el.classList.remove('is-tilting');\n if (raf) cancelAnimationFrame(raf);\n el.style.transform = '';\n });\n });\n\n $$('[data-vf-magnetic]').forEach(function (el) {\n var label = $('.vf-btn-label', el);\n el.addEventListener('pointermove', function (e) {\n var r = el.getBoundingClientRect();\n var x = e.clientX - r.left - r.width \/ 2, y = e.clientY - r.top - r.height \/ 2;\n el.style.transform = 'translate3d(' + (x * 0.18).toFixed(1) + 'px,' + (y * 0.3).toFixed(1) + 'px,0)';\n if (label) label.style.transform = 'translate3d(' + (x * 0.08).toFixed(1) + 'px,' + (y * 0.1).toFixed(1) + 'px,0)';\n });\n el.addEventListener('pointerleave', function () {\n el.style.transform = '';\n if (label) label.style.transform = '';\n });\n });\n\n $$('[data-vf-spot]').forEach(function (el) {\n el.addEventListener('pointermove', function (e) {\n var r = el.getBoundingClientRect();\n el.style.setProperty('--sx', (e.clientX - r.left) + 'px');\n el.style.setProperty('--sy', (e.clientY - r.top) + 'px');\n });\n });\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>READ MORE 3VF About Page Floors G Lobby ELEVATORS \u00b7 ESCALATORS \u00b7 DUMBWAITERSElevators, escalators and dumbwaiters Ghana’s trusted partner in vertical motion. Elevator, escalator and lift installation, maintenance and modernization — built on more than 30 years of the OTIS\/CFAO partnership in the Ghanaian market. Watch us in motion Company profile Ghana CodeEN81ASME A17.1ASME A18.1 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_animmysite_disable_animation":false,"footnotes":""},"class_list":["post-4075","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/3vfltd.com\/index.php\/wp-json\/wp\/v2\/pages\/4075","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/3vfltd.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/3vfltd.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/3vfltd.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/3vfltd.com\/index.php\/wp-json\/wp\/v2\/comments?post=4075"}],"version-history":[{"count":0,"href":"https:\/\/3vfltd.com\/index.php\/wp-json\/wp\/v2\/pages\/4075\/revisions"}],"wp:attachment":[{"href":"https:\/\/3vfltd.com\/index.php\/wp-json\/wp\/v2\/media?parent=4075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}