{"id":1429,"date":"2026-07-01T04:43:17","date_gmt":"2026-07-01T04:43:17","guid":{"rendered":"https:\/\/quansel.com\/staging\/?page_id=1429"},"modified":"2026-07-02T08:33:47","modified_gmt":"2026-07-02T08:33:47","slug":"about-us","status":"publish","type":"page","link":"https:\/\/quansel.com\/staging\/en\/about-us\/","title":{"rendered":"About Us"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1429\" class=\"elementor elementor-1429\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3ca58b7 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"3ca58b7\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3bbf37b\" data-id=\"3bbf37b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b5d5a23 elementor-widget elementor-widget-html\" data-id=\"b5d5a23\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- IMPORT FONT & VARIABEL GLOBAL (Cukup di widget paling atas ini) -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@500;700&family=Work+Sans:wght@400;500&family=IBM+Plex+Mono:wght@500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n:root {\r\n    --q-blue: #0573e3;\r\n    --q-green: #6cffba;\r\n    --q-dark: #54565a;\r\n    --q-black: #0c1017;\r\n    --q-bg: #ffffff;\r\n    --q-border: rgba(12, 16, 23, 0.1);\r\n}\r\n\r\n.q-hero-intro * { box-sizing: border-box; margin: 0; padding: 0; }\r\n.q-hero-intro {\r\n    padding: 15vh 5vw 8vh 5vw;\r\n    background-color: var(--q-bg);\r\n    position: relative;\r\n    width: 100%;\r\n}\r\n.q-mono-tag-hero {\r\n    font-family: 'IBM Plex Mono', monospace;\r\n    font-size: 13px;\r\n    letter-spacing: 2px;\r\n    color: var(--q-blue);\r\n    display: block;\r\n    margin-bottom: 30px;\r\n    font-weight: 600;\r\n}\r\n.q-hero-headline {\r\n    font-family: 'Space Grotesk', sans-serif;\r\n    font-size: clamp(3rem, 6vw, 6rem);\r\n    font-weight: 700;\r\n    line-height: 1.05;\r\n    letter-spacing: -0.03em;\r\n    color: var(--q-black);\r\n}\r\n.q-text-blue { color: var(--q-blue); }\r\n.q-hero-line {\r\n    width: 100%;\r\n    height: 1px;\r\n    background-color: var(--q-border);\r\n    margin-top: 8vh;\r\n}\r\n<\/style>\r\n\r\n<section class=\"q-hero-intro\">\r\n    <div class=\"q-hero-content\">\r\n        <h1 class=\"q-hero-headline\">\r\n            Your Legal Partner.<br>\r\n            <span class=\"q-text-blue\">Guiding Every Step.<\/span>\r\n        <\/h1>\r\n    <\/div>\r\n    <div class=\"q-hero-line\"><\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d520251 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"d520251\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-36d1fe9\" data-id=\"36d1fe9\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d8593ee elementor-widget elementor-widget-html\" data-id=\"d8593ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;600;700&family=Work+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n.q-story-section * { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n.q-story-section {\r\n    --q-mint: #6cffba;\r\n    --q-blue: #0573e3;\r\n    --q-gray: #54565a;\r\n    --q-bg: #f7f7f7;\r\n    --q-black: #0a0a0a;\r\n    --q-border: #dcdcdc;\r\n\r\n    padding: 140px 6vw 160px;\r\n    background-color: var(--q-bg);\r\n    width: 100%;\r\n    position: relative;\r\n}\r\n\r\n.q-eyebrow {\r\n    font-family: 'IBM Plex Mono', monospace;\r\n    font-size: 13px;\r\n    font-weight: 500;\r\n    letter-spacing: 0.12em;\r\n    text-transform: uppercase;\r\n    color: var(--q-blue);\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    margin-bottom: 28px;\r\n}\r\n.q-eyebrow::before {\r\n    content: '';\r\n    width: 28px;\r\n    height: 1px;\r\n    background: var(--q-blue);\r\n}\r\n\r\n.q-story-grid {\r\n    display: grid;\r\n    grid-template-columns: 45% 62%; \/* Grid otomatis kurangin gap duluan, gak overflow kayak Flex *\/\r\n    gap: 0 100px;\r\n    align-items: start;\r\n    max-width: 1400px;\r\n    margin: 0 auto;\r\n    position: relative;\r\n}\r\n\r\n\/* \u2500\u2500\u2500 KOLOM KIRI: posisi diatur JS (lihat script di bawah) \u2500\u2500\u2500 *\/\r\n.q-story-left {\r\n    width: 38%; \/* nilai awal sebelum JS jalan, dioverride jadi px saat resize *\/\r\n    min-width: 0; \/* wajib di grid item biar boleh menyempit dari konten *\/\r\n}\r\n\r\n.q-story-right {\r\n    min-width: 0;\r\n}\r\n\r\n.q-sticky-heading h2 {\r\n    font-family: 'Space Grotesk', sans-serif;\r\n    font-size: clamp(2.2rem, 3.4vw, 3.4rem);\r\n    line-height: 1.08;\r\n    font-weight: 600;\r\n    letter-spacing: -0.02em;\r\n    color: var(--q-black);\r\n}\r\n\r\n.q-sticky-heading h2 em {\r\n    font-style: normal;\r\n    background: linear-gradient(180deg, transparent 62%, var(--q-mint) 62%);\r\n}\r\n\r\n.q-index-track {\r\n    margin-top: 56px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 0;\r\n    position: relative;\r\n}\r\n\r\n.q-index-track::before {\r\n    content: '';\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    bottom: 0;\r\n    width: 2px;\r\n    background: var(--q-border);\r\n}\r\n\r\n.q-index-indicator {\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    width: 2px;\r\n    height: 44px;\r\n    background: var(--q-blue);\r\n    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), height 0.45s ease;\r\n    transform: translateY(0px);\r\n}\r\n\r\n.q-index-row {\r\n    font-family: 'IBM Plex Mono', monospace;\r\n    font-size: 13px;\r\n    color: var(--q-border);\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 14px;\r\n    padding: 10px 0 10px 20px;\r\n    border-top: 1px solid var(--q-border);\r\n    transition: color 0.4s ease;\r\n}\r\n.q-index-row:last-child { border-bottom: 1px solid var(--q-border); }\r\n.q-index-row span.q-num { color: inherit; min-width: 26px; }\r\n.q-index-row span.q-label { color: var(--q-gray); transition: color 0.4s ease; }\r\n.q-index-row.active { color: var(--q-blue); }\r\n.q-index-row.active span.q-label { color: var(--q-black); }\r\n\r\n.q-story-right {\r\n    width: 62%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 64px;\r\n    min-height: 100vh; \/* ngasih \"ruang scroll\" biar kiri sempet nempel lama *\/\r\n}\r\n\r\n.q-paragraph-block {\r\n    position: relative;\r\n    padding-left: 44px;\r\n    border-left: 1px solid var(--q-border);\r\n    transition: border-color 0.4s ease;\r\n}\r\n.q-paragraph-block.active {\r\n    border-left: 1px solid var(--q-blue);\r\n}\r\n\r\n.q-para-num {\r\n    font-family: 'IBM Plex Mono', monospace;\r\n    font-size: 13px;\r\n    color: var(--q-blue);\r\n    letter-spacing: 0.05em;\r\n    display: block;\r\n    margin-bottom: 14px;\r\n}\r\n\r\n.q-lead-text {\r\n    font-family: 'Work Sans', sans-serif;\r\n    font-size: 1.55rem;\r\n    line-height: 1.5;\r\n    color: var(--q-black);\r\n    font-weight: 500;\r\n    letter-spacing: -0.01em;\r\n}\r\n\r\n.q-story-right p:not(.q-lead-text) {\r\n    font-family: 'Work Sans', sans-serif;\r\n    font-size: 1.08rem;\r\n    line-height: 1.85;\r\n    color: var(--q-gray);\r\n    font-weight: 300;\r\n}\r\n\r\n.q-story-right p:not(.q-lead-text) em {\r\n    font-style: normal;\r\n    font-weight: 500;\r\n    color: var(--q-black);\r\n    border-bottom: 1px solid var(--q-mint);\r\n}\r\n\r\n\/* --- RESPONSIVE MOBILE --- *\/\r\n@media (max-width: 992px) {\r\n    .q-story-section { padding: 90px 6vw 100px; }\r\n    .q-story-grid { grid-template-columns: 1fr; gap: 50px 0; }\r\n\r\n    .q-story-left, .q-story-right {\r\n        width: 100% !important;\r\n        min-height: 0 !important;\r\n    }\r\n\r\n    .q-story-left {\r\n        position: static !important;\r\n        top: auto !important;\r\n        left: auto !important;\r\n        bottom: auto !important;\r\n    }\r\n\r\n    .q-index-track { display: none; }\r\n\r\n    .q-sticky-heading h2 { font-size: 2.2rem; }\r\n    .q-lead-text { font-size: 1.35rem; }\r\n    .q-paragraph-block { padding-left: 24px; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"q-story-section\">\r\n    <div class=\"q-story-grid\">\r\n        <div class=\"q-story-left\">\r\n            <div class=\"q-sticky-heading\">\r\n                <div class=\"q-eyebrow\">About Quansel<\/div>\r\n                <h2>Focus on <em>Your Vision<\/em>.<br>We help your business stay compliant.<\/h2>\r\n                <div class=\"q-index-track\" id=\"qIndexTrack\">\r\n                    <div class=\"q-index-indicator\" id=\"qIndicator\"><\/div>\r\n                    <div class=\"q-index-row\" data-target=\"0\"><span class=\"q-num\">01<\/span><span class=\"q-label\">Reality on Business<\/span><\/div>\r\n                    <div class=\"q-index-row\" data-target=\"1\"><span class=\"q-num\">02<\/span><span class=\"q-label\">Your Focus<\/span><\/div>\r\n                    <div class=\"q-index-row\" data-target=\"2\"><span class=\"q-num\">03<\/span><span class=\"q-label\">Our Solution<\/span><\/div>\r\n                    <div class=\"q-index-row\" data-target=\"3\"><span class=\"q-num\">04<\/span><span class=\"q-label\">Our Experience<\/span><\/div>\r\n                    <div class=\"q-index-row\" data-target=\"4\"><span class=\"q-num\">05<\/span><span class=\"q-label\">Our Commitment<\/span><\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"q-story-right\" id=\"qStoryRight\">\r\n\r\n<div class=\"q-paragraph-block\" data-index=\"0\">\r\n    <span class=\"q-para-num\">01<\/span>\r\n    <p class=\"q-lead-text\">Every business faces legal matters from the moment it is established. Yet legal considerations are often overlooked or viewed as obstacles rather than as a foundation for sustainable growth.<\/p>\r\n<\/div>\r\n\r\n<div class=\"q-paragraph-block\" data-index=\"1\">\r\n    <span class=\"q-para-num\">02<\/span>\r\n    <p>At Quansel, we understand that business owners need to focus on strategic decisions and long-term growth. That is why having a strong legal foundation is essential to supporting your business with confidence.<\/p>\r\n<\/div>\r\n\r\n<div class=\"q-paragraph-block\" data-index=\"2\">\r\n    <span class=\"q-para-num\">03<\/span>\r\n    <p>Quansel provides comprehensive legal services tailored to your business needs. Our experienced legal professionals offer practical advice and reliable support, allowing you to focus on growing your business while remaining compliant with applicable laws and regulations.<\/p>\r\n<\/div>\r\n\r\n<div class=\"q-paragraph-block\" data-index=\"3\">\r\n    <span class=\"q-para-num\">04<\/span>\r\n    <p>With more than a decade of experience at leading <em>top-tier law firms<\/em>, our team brings deep legal knowledge across a wide range of industries. We are committed to delivering high-quality legal services at competitive fees without compromising professional standards.<\/p>\r\n<\/div>\r\n\r\n<div class=\"q-paragraph-block\" data-index=\"4\">\r\n    <span class=\"q-para-num\">05<\/span>\r\n    <p>Quansel is your trusted legal partner for every stage of your business journey. We provide comprehensive legal solutions designed to protect your interests, manage legal risks, and support sustainable business growth.<\/p>\r\n<\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n\/\/ Logic 2: Scroll-follow kolom kiri \u2014 dioptimasi biar gak jank.\r\n\/\/ Kuncinya: WIDTH cuma dihitung ulang pas resize, POSISI cuma dihitung pas scroll,\r\n\/\/ dan scroll di-throttle pakai requestAnimationFrame (max 1x hitung per frame).\r\n(function() {\r\n    const wrap = document.querySelector('.q-story-grid');\r\n    const left = document.querySelector('.q-story-left');\r\n    const right = document.querySelector('.q-story-right');\r\n    const header = document.querySelector('.q-site-header');\r\n    if (!wrap || !left || !right) return;\r\n\r\n    const spacer = document.createElement('div');\r\n    spacer.style.flexShrink = '0';\r\n    spacer.style.visibility = 'hidden';\r\n    spacer.style.display = 'none';\r\n    left.parentNode.insertBefore(spacer, left);\r\n\r\n    let leftW = 0;\r\n    let ticking = false;\r\n    const GAP = 30; \/\/ jarak ekstra di bawah header\r\n\r\n    function getTopOffset() {\r\n        \/\/ ngikutin tinggi header ASLI saat ini, bukan angka tetap\r\n        return (header ? header.offsetHeight : 70) + GAP;\r\n    }\r\n\r\n    const COLUMN_GAP = 100; \/\/ harus sama persis dengan gap di CSS .q-story-grid\r\n\r\n    function recalcWidth() {\r\n        if (window.innerWidth <= 992) return;\r\n        const wrapRect = wrap.getBoundingClientRect();\r\n        const availableWidth = wrapRect.width - COLUMN_GAP; \/\/ Grid ngurangin gap duluan sebelum dibagi persen\r\n        leftW = availableWidth * 0.38;\r\n        left.style.width = leftW + 'px';\r\n        spacer.style.width = leftW + 'px';\r\n    }\r\n\r\n    function updatePosition() {\r\n        if (window.innerWidth <= 992) {\r\n            left.style.position = '';\r\n            left.style.left = '';\r\n            left.style.top = '';\r\n            left.style.bottom = '';\r\n            spacer.style.display = 'none';\r\n            ticking = false;\r\n            return;\r\n        }\r\n\r\n        const wrapRect = wrap.getBoundingClientRect();\r\n        const rightRect = right.getBoundingClientRect();\r\n        const topOffset = getTopOffset();\r\n        const leftHeight = left.offsetHeight;\r\n\r\n        if (wrapRect.top > topOffset) {\r\n            left.style.position = '';\r\n            left.style.left = '';\r\n            left.style.top = '';\r\n            left.style.bottom = '';\r\n            spacer.style.display = 'none';\r\n        } else if (rightRect.bottom < topOffset + leftHeight) {\r\n            left.style.position = 'absolute';\r\n            left.style.left = '';\r\n            left.style.top = 'auto';\r\n            left.style.bottom = '0';\r\n            spacer.style.display = 'block';\r\n            spacer.style.height = leftHeight + 'px';\r\n        } else {\r\n            left.style.position = 'fixed';\r\n            left.style.left = wrapRect.left + 'px';\r\n            left.style.top = topOffset + 'px';\r\n            left.style.bottom = '';\r\n            spacer.style.display = 'block';\r\n            spacer.style.height = leftHeight + 'px';\r\n        }\r\n        ticking = false;\r\n    }\r\n\r\n    function onScroll() {\r\n        if (!ticking) {\r\n            requestAnimationFrame(updatePosition);\r\n            ticking = true;\r\n        }\r\n    }\r\n\r\n    function onResize() {\r\n        recalcWidth();\r\n        onScroll();\r\n    }\r\n\r\n    window.addEventListener('scroll', onScroll, { passive: true });\r\n    window.addEventListener('resize', onResize);\r\n\r\n    recalcWidth();\r\n    updatePosition();\r\n})();\r\n\r\n\/\/ Logic 1: highlight index aktif\r\n(function() {\r\n    const blocks = document.querySelectorAll('#qStoryRight .q-paragraph-block');\r\n    const indexRows = document.querySelectorAll('#qIndexTrack .q-index-row');\r\n    const indicator = document.getElementById('qIndicator');\r\n\r\n    if (!blocks.length || !('IntersectionObserver' in window)) return;\r\n\r\n    const setActive = (idx) => {\r\n        blocks.forEach(b => b.classList.toggle('active', b.dataset.index === String(idx)));\r\n        indexRows.forEach((r) => {\r\n            const isActive = r.dataset.target === String(idx);\r\n            r.classList.toggle('active', isActive);\r\n            if (isActive && indicator) {\r\n                indicator.style.transform = `translateY(${r.offsetTop}px)`;\r\n                indicator.style.height = r.offsetHeight + 'px';\r\n            }\r\n        });\r\n    };\r\n\r\n    const observer = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                setActive(entry.target.dataset.index);\r\n            }\r\n        });\r\n    }, { rootMargin: '-40% 0px -40% 0px', threshold: 0 });\r\n\r\n    blocks.forEach(b => observer.observe(b));\r\n    setActive('0');\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5076d8d elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"5076d8d\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3b0a2cf\" data-id=\"3b0a2cf\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1f9e236 elementor-widget elementor-widget-html\" data-id=\"1f9e236\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\/* --- VARIABEL LIGHT MODE --- *\/\r\n:root {\r\n    --q-blue: #0573e3;\r\n    --q-green: #6cffba;\r\n    --q-dark: #54565a;\r\n    --q-light: #f7f7f7;\r\n    --q-black: #0c1017;\r\n    --q-bg: #ffffff;\r\n    --q-border: rgba(12, 16, 23, 0.1);\r\n}\r\n\r\n.q-stats-section * { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n.q-stats-section {\r\n    padding: 80px 5vw 120px 5vw;\r\n    background-color: var(--q-bg); \/* Background putih bersih *\/\r\n    color: var(--q-black); \/* Teks utama jadi hitam *\/\r\n    width: 100%;\r\n}\r\n\r\n.q-stats-grid {\r\n    display: flex;\r\n    justify-content: space-around;\r\n    align-items: center;\r\n    border-top: 1px solid var(--q-border); \/* Border tipis abu-abu *\/\r\n    border-bottom: 1px solid var(--q-border);\r\n    padding: 60px 0;\r\n}\r\n\r\n.q-stat-item {\r\n    text-align: center;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 10px;\r\n}\r\n\r\n.q-stat-number {\r\n    font-family: 'Space Grotesk', sans-serif;\r\n    font-size: clamp(5rem, 10vw, 10rem);\r\n    font-weight: 700;\r\n    line-height: 1;\r\n    letter-spacing: -0.04em;\r\n    color: var(--q-black); \/* Angka menjadi hitam *\/\r\n}\r\n\r\n.q-text-green { color: var(--q-blue); } \/* Saya ganti ke Blue agar lebih kontras di background putih *\/\r\n\r\n.q-stat-label {\r\n    font-family: 'IBM Plex Mono', monospace;\r\n    font-size: 14px;\r\n    letter-spacing: 3px;\r\n    color: var(--q-dark); \/* Label abu-abu gelap agar tidak terlalu mencolok *\/\r\n}\r\n\r\n.q-stat-divider {\r\n    width: 1px;\r\n    height: 150px;\r\n    background-color: var(--q-border); \/* Divider abu-abu tipis *\/\r\n}\r\n\r\n@media (max-width: 992px) {\r\n    .q-stats-grid { flex-direction: column; gap: 60px; padding: 40px 0; }\r\n    .q-stat-divider { width: 100px; height: 1px; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"q-stats-section\">\r\n    <div class=\"q-stats-grid\">\r\n        <div class=\"q-stat-item\">\r\n            <div class=\"q-stat-number\">40<span class=\"q-text-green\">+<\/span><\/div>\r\n            <div class=\"q-stat-label\">SATISFIED CLIENTS<\/div>\r\n        <\/div>\r\n        <div class=\"q-stat-divider\"><\/div>\r\n        <div class=\"q-stat-item\">\r\n            <div class=\"q-stat-number\">12<\/div>\r\n            <div class=\"q-stat-label\">YEARS OF EXPERIENCES<\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8573458 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"8573458\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e2a32b9\" data-id=\"e2a32b9\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-10b64aa elementor-widget elementor-widget-html\" data-id=\"10b64aa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"q-elite-team-section\">\r\n    <div class=\"q-elite-header\">\r\n        <h2 class=\"q-elite-title\">The Expertise Behind Quansel.<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"q-accordion-container\">\r\n        <!-- PERSONIL 1 -->\r\n        <div class=\"q-panel active\" data-index=\"0\">\r\n            <div class=\"q-panel-bg\">\r\n                <img decoding=\"async\" src=\"https:\/\/quansel.com\/staging\/wp-content\/uploads\/2025\/02\/ADP-8-scaled.jpg\" alt=\"Aditya Prio Prabowo\">\r\n                <div class=\"q-panel-overlay\"><\/div>\r\n            <\/div>\r\n            <div class=\"q-panel-spine\"><h3>ADITYA PRIO PRABOWO<\/h3><\/div>\r\n            <div class=\"q-panel-details\">\r\n                <div class=\"q-details-head\">\r\n                    <span class=\"q-role-tag\">Director<\/span>\r\n                    <h3 class=\"q-name-large\">Aditya Prio Prabowo<\/h3>\r\n                    <p class=\"q-credentials\">S.H., LL.M., C.L.A., C.C.D.<\/p>\r\n                <\/div>\r\n                <div class=\"q-bio-scroll\">\r\n                    <p>Aditya is a skilled and registered Indonesian advocate with a decade of experience, specializing in corporate law, capital markets, shariah financing, foreign direct investment, and mergers & acquisitions transactions.\r\n                    <\/p>\r\n                    <p>Before founding Quansel in 2022, he worked at one of Indonesia\u2019s largest and most established law firms and briefly at an internationally affiliated Indonesian law firm. Throughout his career, he has been involved in numerous high-profile transactions across various sectors.<\/p>\r\n                    <p>Aditya holds an advanced LL.M. in International Civil and Commercial Law from Leiden University, earned through a prestigious LPDP scholarship. He has also obtained professional certifications, including the Capital Markets Legal Consultant Course (2022), Legal Auditor (2023), and Contract Drafter (2024).<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- PERSONIL 2 -->\r\n        <div class=\"q-panel\" data-index=\"1\">\r\n            <div class=\"q-panel-bg\">\r\n                <img decoding=\"async\" src=\"https:\/\/quansel.com\/staging\/wp-content\/uploads\/2025\/02\/RR-5-scaled.jpg\" alt=\"Reiner Razi\">\r\n                <div class=\"q-panel-overlay\"><\/div>\r\n            <\/div>\r\n            <div class=\"q-panel-spine\"><h3>REINER RAZI<\/h3><\/div>\r\n            <div class=\"q-panel-details\">\r\n                <div class=\"q-details-head\">\r\n                    <span class=\"q-role-tag\">Associate<\/span>\r\n                    <h3 class=\"q-name-large\">Reiner Razi<\/h3>\r\n                    <p class=\"q-credentials\">S.H., M.H.<\/p>\r\n                <\/div>\r\n                <div class=\"q-bio-scroll\">\r\n                    <p>Reiner is a skilled and dedicated lawyer with experience in business law. He has a strong foundation in legal analysis and problem-solving, making him a valuable asset in handling corporate and commercial legal matters.<\/p>\r\n                    <p>Before joining Quansel in 2023, Reiner gained experience as a legal intern at the Regional Government of DKI Jakarta, where he was exposed to various aspects of public and administrative law. During his academic years, he actively participated in numerous committees, honing his organizational, leadership, and teamwork skills.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- PERSONIL 3 -->\r\n        <div class=\"q-panel\" data-index=\"2\">\r\n            <div class=\"q-panel-bg\">\r\n                <img decoding=\"async\" src=\"https:\/\/quansel.com\/staging\/wp-content\/uploads\/2025\/02\/NMG-3-scaled.jpg\" alt=\"Ngurah Muhammad Guntur\">\r\n                <div class=\"q-panel-overlay\"><\/div>\r\n            <\/div>\r\n            <div class=\"q-panel-spine\"><h3>NGURAH M. GUNTUR<\/h3><\/div>\r\n            <div class=\"q-panel-details\">\r\n                <div class=\"q-details-head\">\r\n                    <span class=\"q-role-tag\">Associate<\/span>\r\n                    <h3 class=\"q-name-large\">Ngurah Muhammad Guntur<\/h3>\r\n                    <p class=\"q-credentials\">S.H.<\/p>\r\n                <\/div>\r\n                <div class=\"q-bio-scroll\">\r\n                    <p>Ngurah is a talented lawyer with expertise in business law. Before joining Quansel in 2024, he gained experience as a legal staff in a company based in Jakarta.<\/p>\r\n                    <p>A passionate and dedicated professional, Ngurah possesses a diverse skill set, including contract drafting, negotiation, and communication. Additionally, he has a background in software development and a strong ability to design innovative solutions, manage teams, and enhance operational efficiency. Adaptable and quick to learn, he thrives in dynamic environments.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<style>\r\n:root {\r\n    --q-blue: #0573e3;\r\n    --q-green: #6cffba;\r\n    --q-dark: #54565a;\r\n    --q-light: #f7f7f7;\r\n    --q-black: #0c1017;\r\n}\r\n\r\n.q-elite-team-section { \r\n    background-color: var(--q-blue); \/* Background Biru Quansel *\/\r\n    width: 100%; padding: 100px 5vw; color: white; \r\n}\r\n.q-elite-header { margin-bottom: 60px; }\r\n.q-mono-tag { font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 3px; color: var(--q-green); display: block; margin-bottom: 20px; font-weight: 600; }\r\n.q-elite-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; color: white; letter-spacing: -0.02em; }\r\n\r\n.q-accordion-container { display: flex; width: 100%; height: 700px; gap: 15px; }\r\n.q-panel { position: relative; flex: 1; border-radius: 0; overflow: hidden; cursor: pointer; transition: flex 0.8s cubic-bezier(0.25, 1, 0.4, 1); background: var(--q-blue); }\r\n.q-panel.active { flex: 4; cursor: default; }\r\n\r\n.q-panel-bg { position: absolute; inset: 0; }\r\n.q-panel-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(100%) brightness(0.6); transition: all 1s ease; }\r\n.q-panel-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, var(--q-blue) 0%, rgba(5,115,227,0.2) 100%); transition: opacity 0.8s ease; }\r\n\r\n.q-panel.active .q-panel-bg img { filter: grayscale(0%) brightness(0.9); transform: scale(1.05); }\r\n.q-panel.active .q-panel-overlay { background: linear-gradient(90deg, var(--q-blue) 0%, rgba(5,115,227,0.4) 100%); }\r\n\r\n.q-panel-spine { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.4s ease; }\r\n.q-panel-spine h3 { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; color: white; writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 5px; text-transform: uppercase; white-space: nowrap; }\r\n.q-panel.active .q-panel-spine { opacity: 0; }\r\n\r\n.q-panel-details { position: absolute; left: 60px; bottom: 60px; max-width: 500px; opacity: 0; transform: translateX(-40px); pointer-events: none; transition: all 0.6s cubic-bezier(0.25, 1, 0.4, 1); }\r\n.q-panel.active .q-panel-details { opacity: 1; transform: translateX(0); pointer-events: auto; transition-delay: 0.3s; }\r\n\r\n.q-role-tag { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: white; background-color: var(--q-green); padding: 5px 10px; text-transform: uppercase; display: inline-block; margin-bottom: 15px; color: var(--q-blue); font-weight: 700; }\r\n.q-name-large { font-family: 'Space Grotesk', sans-serif; font-size: 3rem; margin: 15px 0 10px 0; color: white; }\r\n.q-credentials { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--q-green); }\r\n.q-bio-scroll { display: flex; flex-direction: column; gap: 15px; max-height: 250px; overflow-y: auto; padding-right: 20px; }\r\n.q-bio-scroll::-webkit-scrollbar { width: 4px; }\r\n.q-bio-scroll::-webkit-scrollbar-thumb { background: var(--q-green); }\r\n.q-bio-scroll p { font-family: 'Work Sans', sans-serif; font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,0.9); }\r\n\r\n@media (max-width: 992px) {\r\n    .q-accordion-container { flex-direction: column; height: 1000px; }\r\n    .q-panel-spine h3 { writing-mode: horizontal-tb; transform: none; font-size: 1.5rem; }\r\n    .q-panel-details { left: 20px; right: 20px; bottom: 30px; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    const panels = document.querySelectorAll('.q-panel');\r\n    panels.forEach(panel => {\r\n        panel.addEventListener('click', () => {\r\n            panels.forEach(p => p.classList.remove('active'));\r\n            panel.classList.add('active');\r\n        });\r\n    });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-028c9ff elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"028c9ff\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6edfa8d\" data-id=\"6edfa8d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-dc88eed elementor-widget elementor-widget-html\" data-id=\"dc88eed\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"q-cta-luxury\">\r\n    <!-- Background elemen dekoratif tipis -->\r\n    <div class=\"q-accent-line\"><\/div>\r\n\r\n    <div class=\"q-cta-container\">\r\n        <div class=\"q-cta-text-wrapper\">\r\n            <h2 class=\"q-cta-headline\">\r\n                \r\n                <span class=\"q-line\">Ready for your next<\/span>\r\n<span class=\"q-line\">strategic move?<\/span>\r\n<\/h2>\r\n\r\n<div class=\"q-cta-footer\">\r\n    <p class=\"q-cta-sub\">Practical legal advice tailored to your business needs.<\/p>\r\n                \r\n                <!-- Tombol Hover-Magnetic -->\r\n                <a href=\"\/staging\/en\/contact\/\" class=\"q-magnetic-btn\" style=\"text-decoration: none;\">\r\n                    <span class=\"q-btn-text\">GET IN TOUCH<\/span>\r\n                    <div class=\"q-btn-circle\"><\/div>\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<style>\r\n.q-cta-luxury {\r\n    padding: 200px 5vw;\r\n    background-color: #ffffff;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.q-accent-line {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 5vw;\r\n    width: 1px;\r\n    height: 100%;\r\n    background-color: var(--q-border);\r\n}\r\n\r\n.q-cta-container {\r\n    max-width: 1000px;\r\n    margin: 0 auto;\r\n}\r\n\r\n.q-cta-headline {\r\n    font-family: 'Space Grotesk', sans-serif;\r\n    font-size: clamp(3.5rem, 8vw, 7rem);\r\n    font-weight: 700;\r\n    line-height: 0.9;\r\n    letter-spacing: -0.05em;\r\n    color: var(--q-black);\r\n    margin-bottom: 80px;\r\n    margin-left: 20px;\r\n}\r\n\r\n.q-cta-footer {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-end;\r\n    border-top: 1px solid var(--q-black);\r\n    padding-top: 40px;\r\n}\r\n\r\n.q-cta-sub {\r\n    font-family: 'Work Sans', sans-serif;\r\n    font-size: 1.5rem;\r\n    color: var(--q-dark);\r\n    max-width: 400px;\r\n    margin-left: 20px;\r\n}\r\n\r\n\/* Tombol Magnetik *\/\r\n.q-magnetic-btn {\r\n    position: relative;\r\n    padding: 25px 50px;\r\n    background: transparent;\r\n    border: 1px solid var(--q-black);\r\n    font-family: 'IBM Plex Mono', monospace;\r\n    font-size: 14px;\r\n    text-decoration: none;\r\n    color: var(--q-black);\r\n    display: flex;\r\n    align-items: center;\r\n    overflow: hidden;\r\n    transition: 0.5s;\r\n    margin-left: 20px;\r\n}\r\n\r\n.q-magnetic-btn:hover {\r\n    color: white;\r\n    border-color: var(--q-blue);\r\n}\r\n\r\n.q-btn-circle {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 0;\r\n    height: 0;\r\n    background: var(--q-blue);\r\n    border-radius: 50%;\r\n    transform: translate(-50%, -50%);\r\n    transition: 0.6s cubic-bezier(0.25, 1, 0.4, 1);\r\n    z-index: -1;\r\n}\r\n\r\n.q-magnetic-btn:hover .q-btn-circle {\r\n    width: 300%;\r\n    height: 400%;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .q-cta-footer { flex-direction: column; align-items: flex-start; gap: 40px; }\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Your Legal Partner. Guiding Every Step. About Quansel Focus on Your Vision.We help your business stay compliant. 01Reality on Business 02Your Focus 03Our Solution 04Our Experience 05Our Commitment 01 Every business faces legal matters from the moment it is established. Yet legal considerations are often overlooked or viewed as obstacles rather than as a foundation [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"slim_seo":{"title":"Quansel | Business Law Firm","description":"Get to know Quansel, a business law firm that helps companies navigate legal challenges through practical advice and trusted legal support."},"footnotes":""},"class_list":["post-1429","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/quansel.com\/staging\/wp-json\/wp\/v2\/pages\/1429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quansel.com\/staging\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/quansel.com\/staging\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/quansel.com\/staging\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/quansel.com\/staging\/wp-json\/wp\/v2\/comments?post=1429"}],"version-history":[{"count":16,"href":"https:\/\/quansel.com\/staging\/wp-json\/wp\/v2\/pages\/1429\/revisions"}],"predecessor-version":[{"id":1786,"href":"https:\/\/quansel.com\/staging\/wp-json\/wp\/v2\/pages\/1429\/revisions\/1786"}],"wp:attachment":[{"href":"https:\/\/quansel.com\/staging\/wp-json\/wp\/v2\/media?parent=1429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}