{"id":8,"date":"2026-07-01T02:51:02","date_gmt":"2026-07-01T02:51:02","guid":{"rendered":"https:\/\/helensmusiccentre.com.my\/?page_id=8"},"modified":"2026-07-17T02:53:24","modified_gmt":"2026-07-17T02:53:24","slug":"home","status":"publish","type":"page","link":"https:\/\/helensmusiccentre.com.my\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8\" class=\"elementor elementor-8\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4037832 e-con-full elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"4037832\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d2ab62 elementor-widget elementor-widget-html\" data-id=\"8d2ab62\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Helen's Music Centre: Kawai Archive Showcase -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');\n\n.hmc-archive,\n.hmc-archive * {\n    box-sizing: border-box;\n}\n\n\/* Keep Elementor's default pink focus\/active styles out of this section *\/\n.hmc-archive button,\n.hmc-archive button:hover,\n.hmc-archive button:focus,\n.hmc-archive button:focus-visible,\n.hmc-archive button:active {\n    font-family: inherit !important;\n    text-decoration: none !important;\n    text-shadow: none !important;\n    box-shadow: none !important;\n    -webkit-tap-highlight-color: transparent !important;\n}\n\n.hmc-archive ::selection {\n    color: #050505;\n    background: #c5a880;\n}\n\n.hmc-archive {\n    --archive-ink: #f1eee8;\n    --archive-muted: #9b958b;\n    --archive-gold: #c5a880;\n    --archive-line: rgba(197, 168, 128, 0.22);\n    --archive-panel: #0b0b0a;\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n    padding: clamp(76px, 9vw, 140px) 5%;\n    color: var(--archive-ink);\n    background:\n        radial-gradient(circle at 80% 15%, rgba(197, 168, 128, 0.08), transparent 30%),\n        #050505;\n    font-family: 'Inter', sans-serif;\n}\n\n.hmc-archive::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    opacity: 0.045;\n    background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'\/%3E%3C\/svg%3E\");\n}\n\n.hmc-archive__inner {\n    position: relative;\n    z-index: 1;\n    width: min(1200px, 100%);\n    margin: 0 auto;\n}\n\n.hmc-archive__heading {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(260px, 430px);\n    gap: 48px;\n    align-items: end;\n    margin-bottom: clamp(38px, 5vw, 68px);\n}\n\n.hmc-archive__eyebrow {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin: 0 0 15px;\n    color: var(--archive-gold);\n    font-size: 10px;\n    font-weight: 600;\n    letter-spacing: 2.7px;\n    text-transform: uppercase;\n}\n\n.hmc-archive__eyebrow::before {\n    content: '';\n    width: 32px;\n    height: 1px;\n    background: var(--archive-gold);\n}\n\n.hmc-archive h2 {\n    max-width: 720px;\n    margin: 0;\n    font-family: 'Playfair Display', serif;\n    font-size: clamp(42px, 6vw, 76px);\n    font-weight: 400;\n    line-height: 0.98;\n    letter-spacing: -0.035em;\n}\n\n.hmc-archive h2 em {\n    color: var(--archive-gold);\n    font-weight: 400;\n}\n\n.hmc-archive__intro {\n    margin: 0;\n    color: var(--archive-muted);\n    font-size: 13px;\n    line-height: 1.85;\n}\n\n.hmc-archive__stage {\n    display: grid;\n    grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.65fr);\n    min-height: 550px;\n    border: 1px solid var(--archive-line);\n    background: var(--archive-panel);\n}\n\n.hmc-archive__visual {\n    position: relative;\n    min-width: 0;\n    min-height: 550px;\n    overflow: hidden;\n    background: #10100f;\n    touch-action: pan-y;\n}\n\n.hmc-archive__visual::before {\n    content: '';\n    position: absolute;\n    inset: -28px;\n    z-index: 0;\n    background-image: var(--archive-active-image);\n    background-position: center;\n    background-size: cover;\n    filter: blur(28px) brightness(0.36) saturate(0.65);\n    transform: scale(1.08);\n    opacity: 0.85;\n    transition: background-image 0.4s ease;\n}\n\n.hmc-archive__visual::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    pointer-events: none;\n    background: linear-gradient(90deg, rgba(4, 4, 4, 0.12), transparent 55%, rgba(4, 4, 4, 0.28));\n}\n\n.hmc-archive__main-image {\n    position: absolute;\n    inset: 26px;\n    z-index: 1;\n    width: calc(100% - 52px);\n    height: calc(100% - 52px);\n    object-fit: contain;\n    filter: sepia(0.08) contrast(1.02);\n    transition: opacity 0.24s ease, transform 0.55s cubic-bezier(.2,.7,.2,1);\n}\n\n.hmc-archive__visual.is-changing .hmc-archive__main-image {\n    opacity: 0;\n    transform: scale(0.985);\n}\n\n.hmc-archive__stamp {\n    position: absolute;\n    top: 45px;\n    left: 45px;\n    z-index: 3;\n    padding: 9px 12px;\n    border: 1px solid rgba(255, 255, 255, 0.46);\n    color: #fff;\n    background: rgba(5, 5, 5, 0.46);\n    backdrop-filter: blur(8px);\n    font-size: 9px;\n    font-weight: 600;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n}\n\n.hmc-archive__story {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    min-width: 0;\n    padding: clamp(30px, 4vw, 52px);\n    border-left: 1px solid var(--archive-line);\n}\n\n.hmc-archive__index {\n    margin-bottom: 34px;\n    color: var(--archive-gold);\n    font-family: 'Playfair Display', serif;\n    font-size: 18px;\n    letter-spacing: 0.06em;\n}\n\n.hmc-archive__title {\n    margin: 0 0 20px;\n    font-family: 'Playfair Display', serif;\n    font-size: clamp(30px, 3vw, 45px);\n    font-weight: 400;\n    line-height: 1.08;\n}\n\n.hmc-archive__copy {\n    margin: 0;\n    color: var(--archive-muted);\n    font-size: 12px;\n    line-height: 1.8;\n}\n\n.hmc-archive__controls {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 18px;\n    margin-top: 42px;\n    padding-top: 24px;\n    border-top: 1px solid var(--archive-line);\n}\n\n.hmc-archive__arrow {\n    display: grid;\n    place-items: center;\n    width: 44px;\n    height: 44px;\n    padding: 0 !important;\n    border: 1px solid var(--archive-line) !important;\n    border-radius: 50% !important;\n    color: var(--archive-ink) !important;\n    background: transparent !important;\n    outline: none !important;\n    cursor: pointer;\n    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;\n}\n\n.hmc-archive__arrow:hover,\n.hmc-archive__arrow:focus,\n.hmc-archive__arrow:focus-visible,\n.hmc-archive__arrow:active {\n    border-color: var(--archive-gold) !important;\n    color: #050505 !important;\n    background: var(--archive-gold) !important;\n    outline: none !important;\n}\n\n.hmc-archive__progress {\n    flex: 1;\n    height: 1px;\n    overflow: hidden;\n    background: rgba(255, 255, 255, 0.12);\n}\n\n.hmc-archive__progress span {\n    display: block;\n    width: 10%;\n    height: 100%;\n    background: var(--archive-gold);\n    transition: transform 0.45s cubic-bezier(.2,.7,.2,1);\n    transform-origin: left;\n}\n\n.hmc-archive__rail {\n    display: grid;\n    grid-auto-flow: column;\n    grid-auto-columns: minmax(150px, 1fr);\n    gap: 12px;\n    margin-top: 18px;\n    padding: 0 0 14px;\n    overflow-x: auto;\n    overscroll-behavior-inline: contain;\n    scrollbar-width: thin;\n    scrollbar-color: var(--archive-gold) rgba(255, 255, 255, 0.08);\n}\n\n.hmc-archive__thumb {\n    position: relative;\n    min-height: 112px;\n    padding: 6px !important;\n    overflow: hidden;\n    border: 1px solid transparent !important;\n    border-radius: 0 !important;\n    background: #111 !important;\n    outline: none !important;\n    cursor: pointer;\n    opacity: 0.54;\n    transition: opacity 0.25s ease, border-color 0.25s ease, transform 0.25s ease;\n}\n\n.hmc-archive__thumb:hover,\n.hmc-archive__thumb:focus,\n.hmc-archive__thumb:focus-visible,\n.hmc-archive__thumb:active,\n.hmc-archive__thumb.is-active,\n.hmc-archive__thumb[aria-current=\"true\"] {\n    border-color: var(--archive-gold) !important;\n    background: #111 !important;\n    color: #ffffff !important;\n    opacity: 1 !important;\n    outline: none !important;\n}\n\n.hmc-archive__thumb:hover {\n    transform: translateY(-2px);\n}\n\n.hmc-archive__thumb img {\n    position: absolute;\n    inset: 6px;\n    width: calc(100% - 12px);\n    height: calc(100% - 12px);\n    object-fit: contain;\n    object-position: center;\n    background: #0b0b0a;\n    filter: sepia(0.15) saturate(0.82);\n}\n\n.hmc-archive__thumb span {\n    position: absolute;\n    right: 8px;\n    bottom: 7px;\n    z-index: 1;\n    color: #fff;\n    font-size: 9px;\n    font-weight: 600;\n    letter-spacing: 1.4px;\n    text-shadow: 0 1px 8px #000;\n}\n\n@media (max-width: 860px) {\n    .hmc-archive__heading {\n        grid-template-columns: 1fr;\n        gap: 22px;\n    }\n\n    .hmc-archive__intro {\n        max-width: 600px;\n    }\n\n    .hmc-archive__stage {\n        grid-template-columns: 1fr;\n        min-height: 0;\n    }\n\n    .hmc-archive__visual {\n        min-height: 0;\n        aspect-ratio: 4 \/ 3;\n    }\n\n    .hmc-archive__story {\n        border-top: 1px solid var(--archive-line);\n        border-left: 0;\n    }\n}\n\n@media (max-width: 560px) {\n    .hmc-archive {\n        padding: 58px 16px;\n    }\n\n    .hmc-archive__heading {\n        gap: 12px;\n        margin-bottom: 24px;\n    }\n\n    .hmc-archive__eyebrow {\n        gap: 9px;\n        margin-bottom: 9px;\n        font-size: 8px;\n        letter-spacing: 0.18em;\n    }\n\n    .hmc-archive__eyebrow::before {\n        width: 24px;\n    }\n\n    .hmc-archive h2 {\n        max-width: 340px;\n        font-size: clamp(38px, 11.5vw, 48px);\n        line-height: 1;\n        letter-spacing: -0.025em;\n    }\n\n    .hmc-archive__intro {\n        display: -webkit-box;\n        max-width: 360px;\n        overflow: hidden;\n        font-size: 11px;\n        line-height: 1.55;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: 2;\n    }\n\n    .hmc-archive__visual {\n        aspect-ratio: 4 \/ 3;\n    }\n\n    .hmc-archive__main-image {\n        inset: 8px;\n        width: calc(100% - 16px);\n        height: calc(100% - 16px);\n    }\n\n    .hmc-archive__stamp {\n        top: 18px;\n        left: 18px;\n        padding: 6px 8px;\n        font-size: 7px;\n        letter-spacing: 0.14em;\n    }\n\n    .hmc-archive__story {\n        min-height: 164px;\n        padding: 18px 18px 16px;\n    }\n\n    .hmc-archive__index {\n        margin-bottom: 7px;\n        font-size: 13px;\n    }\n\n    .hmc-archive__title {\n        margin-bottom: 7px;\n        font-size: 24px;\n        line-height: 1.1;\n    }\n\n    .hmc-archive__copy {\n        display: -webkit-box;\n        overflow: hidden;\n        font-size: 10px;\n        line-height: 1.55;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: 2;\n    }\n\n    .hmc-archive__controls {\n        gap: 12px;\n        margin-top: 13px;\n        padding-top: 11px;\n    }\n\n    .hmc-archive__arrow {\n        width: 36px;\n        height: 36px;\n    }\n\n    .hmc-archive__rail {\n        grid-auto-columns: 38px;\n        gap: 7px;\n        margin-top: 11px;\n        padding-bottom: 6px;\n        scroll-snap-type: x mandatory;\n    }\n\n    .hmc-archive__thumb {\n        display: grid;\n        place-items: center;\n        min-height: 38px;\n        padding: 0 !important;\n        border-color: var(--archive-line) !important;\n        scroll-snap-align: center;\n        opacity: 0.72;\n    }\n\n    .hmc-archive__thumb:hover {\n        transform: none;\n    }\n\n    .hmc-archive__thumb img {\n        display: none;\n    }\n\n    .hmc-archive__thumb span {\n        position: static;\n        color: #8c877f;\n        font-size: 8px;\n        letter-spacing: 0.08em;\n        text-shadow: none;\n    }\n\n    .hmc-archive__thumb.is-active span,\n    .hmc-archive__thumb[aria-current=\"true\"] span {\n        color: #050505;\n    }\n\n    .hmc-archive__thumb.is-active,\n    .hmc-archive__thumb[aria-current=\"true\"] {\n        background: var(--archive-gold) !important;\n    }\n}\n\n@media (max-width: 380px) {\n    .hmc-archive {\n        padding-right: 13px;\n        padding-left: 13px;\n    }\n\n    .hmc-archive h2 {\n        font-size: 36px;\n    }\n\n    .hmc-archive__story {\n        min-height: 156px;\n        padding: 15px;\n    }\n\n    .hmc-archive__title {\n        font-size: 21px;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .hmc-archive *,\n    .hmc-archive *::before,\n    .hmc-archive *::after {\n        scroll-behavior: auto !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<section class=\"hmc-archive\" id=\"archive\" aria-labelledby=\"hmcArchiveTitle\">\n    <div class=\"hmc-archive__inner\">\n        <header class=\"hmc-archive__heading\">\n            <div>\n                <p class=\"hmc-archive__eyebrow\">From our archives<\/p>\n                <h2 id=\"hmcArchiveTitle\">The memories behind <em>the music.<\/em><\/h2>\n            <\/div>\n            <p class=\"hmc-archive__intro\">\n                Before today\u2019s stages and classrooms, there were first lessons, annual concerts and small moments that shaped generations of musicians. A glimpse into our early Kawai years.\n            <\/p>\n        <\/header>\n\n        <div class=\"hmc-archive__stage\">\n            <div class=\"hmc-archive__visual\" id=\"hmcArchiveVisual\" style=\"--archive-active-image: url('https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/01-early-piano-lesson-scaled.jpg');\">\n                <img decoding=\"async\" class=\"hmc-archive__main-image\" id=\"hmcArchiveImage\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/01-early-piano-lesson-scaled.jpg\" alt=\"An early piano lesson from the Helen's Music Centre archives\">\n                <span class=\"hmc-archive__stamp\">Helen\u2019s archive<\/span>\n            <\/div>\n\n            <div class=\"hmc-archive__story\" aria-live=\"polite\">\n                <div>\n                    <div class=\"hmc-archive__index\"><span id=\"hmcArchiveCurrent\">01<\/span> \/ 10<\/div>\n                    <h3 class=\"hmc-archive__title\" id=\"hmcArchiveSlideTitle\">Where every journey began<\/h3>\n                    <p class=\"hmc-archive__copy\" id=\"hmcArchiveSlideCopy\">Quiet practice, patient guidance and the first notes of a lifelong relationship with music.<\/p>\n                <\/div>\n\n                <div class=\"hmc-archive__controls\">\n                    <button class=\"hmc-archive__arrow\" id=\"hmcArchivePrev\" type=\"button\" aria-label=\"Previous archive photo\">\u2190<\/button>\n                    <div class=\"hmc-archive__progress\" aria-hidden=\"true\"><span id=\"hmcArchiveProgress\"><\/span><\/div>\n                    <button class=\"hmc-archive__arrow\" id=\"hmcArchiveNext\" type=\"button\" aria-label=\"Next archive photo\">\u2192<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"hmc-archive__rail\" id=\"hmcArchiveRail\" aria-label=\"Archive photo selection\">\n            <button class=\"hmc-archive__thumb is-active\" type=\"button\" data-index=\"0\" aria-label=\"Show archive photo 1\"><img decoding=\"async\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/01-early-piano-lesson-scaled.jpg\" alt=\"\" loading=\"lazy\"><span>01<\/span><\/button>\n            <button class=\"hmc-archive__thumb\" type=\"button\" data-index=\"1\" aria-label=\"Show archive photo 2\"><img decoding=\"async\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/02-piano-student-scaled.jpg\" alt=\"\" loading=\"lazy\"><span>02<\/span><\/button>\n            <button class=\"hmc-archive__thumb\" type=\"button\" data-index=\"2\" aria-label=\"Show archive photo 3\"><img decoding=\"async\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/03-kawai-annual-concert-scaled.jpg\" alt=\"\" loading=\"lazy\"><span>03<\/span><\/button>\n            <button class=\"hmc-archive__thumb\" type=\"button\" data-index=\"3\" aria-label=\"Show archive photo 4\"><img decoding=\"async\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/04-classroom-moment-scaled.jpg\" alt=\"\" loading=\"lazy\"><span>04<\/span><\/button>\n            <button class=\"hmc-archive__thumb\" type=\"button\" data-index=\"4\" aria-label=\"Show archive photo 5\"><img decoding=\"async\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/05-young-violinists-scaled.jpg\" alt=\"\" loading=\"lazy\"><span>05<\/span><\/button>\n            <button class=\"hmc-archive__thumb\" type=\"button\" data-index=\"5\" aria-label=\"Show archive photo 6\"><img decoding=\"async\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/06-teachers-and-mentors-scaled.jpg\" alt=\"\" loading=\"lazy\"><span>06<\/span><\/button>\n            <button class=\"hmc-archive__thumb\" type=\"button\" data-index=\"6\" aria-label=\"Show archive photo 7\"><img decoding=\"async\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/07-music-across-generations-scaled.jpg\" alt=\"\" loading=\"lazy\"><span>07<\/span><\/button>\n            <button class=\"hmc-archive__thumb\" type=\"button\" data-index=\"7\" aria-label=\"Show archive photo 8\"><img decoding=\"async\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/08-kawai-digital-organ-recital-scaled.jpg\" alt=\"\" loading=\"lazy\"><span>08<\/span><\/button>\n            <button class=\"hmc-archive__thumb\" type=\"button\" data-index=\"8\" aria-label=\"Show archive photo 9\"><img decoding=\"async\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/09-violin-journey-scaled.jpg\" alt=\"\" loading=\"lazy\"><span>09<\/span><\/button>\n            <button class=\"hmc-archive__thumb\" type=\"button\" data-index=\"9\" aria-label=\"Show archive photo 10\"><img decoding=\"async\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/10-sarawak-plaza-recital-scaled.jpg\" alt=\"\" loading=\"lazy\"><span>10<\/span><\/button>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\n(function () {\n    const root = document.querySelector('.hmc-archive');\n    if (!root) return;\n\n    const slides = [\n        { src: 'https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/01-early-piano-lesson-scaled.jpg', title: 'Where every journey began', copy: 'Quiet practice, patient guidance and the first notes of a lifelong relationship with music.', alt: 'An early piano lesson from the Helen\\'s Music Centre archives' },\n        { src: 'https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/02-piano-student-scaled.jpg', title: 'Learning side by side', copy: 'Early lessons built confidence one measure at a time, with teachers always close by.', alt: 'A young piano student with her teacher' },\n        { src: 'https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/03-kawai-annual-concert-scaled.jpg', title: 'The Kawai annual concert', copy: 'Students gathered at the keyboards to share what they had learned with family and friends.', alt: 'Students performing at a Kawai annual concert' },\n        { src: 'https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/04-classroom-moment-scaled.jpg', title: 'Music in the classroom', copy: 'Everyday lessons became the foundation for discipline, expression and lasting musical confidence.', alt: 'A teacher guiding young keyboard students in class' },\n        { src: 'https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/05-young-violinists-scaled.jpg', title: 'Young strings, brave beginnings', copy: 'Small hands, serious focus and the courage to perform together for the first time.', alt: 'Young violin students performing together' },\n        { src: 'https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/06-teachers-and-mentors-scaled.jpg', title: 'Guided by experience', copy: 'The people behind the lessons helped shape a culture of patience, care and musical excellence.', alt: 'Teachers and mentors from the music centre archives' },\n        { src: 'https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/07-music-across-generations-scaled.jpg', title: 'A tradition passed forward', copy: 'Teacher and student memories reveal how musical knowledge travels from one generation to the next.', alt: 'A teacher and young student in an early music classroom' },\n        { src: 'https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/08-kawai-digital-organ-recital-scaled.jpg', title: 'A community gathered', copy: 'Recitals brought students, teachers and families together to celebrate progress and performance.', alt: 'Group photograph from a Kawai digital organ recital' },\n        { src: 'https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/09-violin-journey-scaled.jpg', title: 'Growing through music', copy: 'From first lessons to confident young performers, every milestone became part of a larger story.', alt: 'A teacher with two young violin students' },\n        { src: 'https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/10-sarawak-plaza-recital-scaled.jpg', title: 'Music beyond the classroom', copy: 'Public performances at Sarawak Plaza gave young musicians a stage, an audience and a memory to keep.', alt: 'Young students performing at a Kawai organ recital at Sarawak Plaza' }\n    ];\n\n    const visual = root.querySelector('#hmcArchiveVisual');\n    const image = root.querySelector('#hmcArchiveImage');\n    const current = root.querySelector('#hmcArchiveCurrent');\n    const title = root.querySelector('#hmcArchiveSlideTitle');\n    const copy = root.querySelector('#hmcArchiveSlideCopy');\n    const progress = root.querySelector('#hmcArchiveProgress');\n    const thumbs = Array.from(root.querySelectorAll('.hmc-archive__thumb'));\n    const prev = root.querySelector('#hmcArchivePrev');\n    const next = root.querySelector('#hmcArchiveNext');\n    let active = 0;\n    let touchStartX = 0;\n\n    function showSlide(index) {\n        active = (index + slides.length) % slides.length;\n        const slide = slides[active];\n        visual.classList.add('is-changing');\n\n        window.setTimeout(function () {\n            image.src = slide.src;\n            image.alt = slide.alt;\n            visual.style.setProperty('--archive-active-image', \"url('\" + slide.src + \"')\");\n            current.textContent = String(active + 1).padStart(2, '0');\n            title.textContent = slide.title;\n            copy.textContent = slide.copy;\n            progress.style.transform = 'scaleX(' + (active + 1) + ')';\n\n            thumbs.forEach(function (thumb, thumbIndex) {\n                const selected = thumbIndex === active;\n                thumb.classList.toggle('is-active', selected);\n                thumb.setAttribute('aria-current', selected ? 'true' : 'false');\n            });\n\n            thumbs[active].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });\n            visual.classList.remove('is-changing');\n        }, 180);\n    }\n\n    prev.addEventListener('click', function () { showSlide(active - 1); });\n    next.addEventListener('click', function () { showSlide(active + 1); });\n    thumbs.forEach(function (thumb) {\n        thumb.addEventListener('click', function () { showSlide(Number(thumb.dataset.index)); });\n    });\n\n    visual.addEventListener('touchstart', function (event) {\n        touchStartX = event.changedTouches[0].clientX;\n    }, { passive: true });\n\n    visual.addEventListener('touchend', function (event) {\n        const distance = event.changedTouches[0].clientX - touchStartX;\n        if (Math.abs(distance) > 45) showSlide(active + (distance < 0 ? 1 : -1));\n    }, { passive: true });\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dd0b038 e-con-full e-flex e-con e-parent\" data-id=\"dd0b038\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-86b9c56 elementor-widget elementor-widget-html\" data-id=\"86b9c56\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Import Google Fonts (if not already loaded) -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');\n\n\/* --- Prevent scrolling while loading --- *\/\nbody.preloader-active {\n    overflow: hidden !important;\n}\n\n\/* --- The Theatrical Stage (Main Overlay) --- *\/\n.cinematic-preloader {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100vh;\n    height: 100dvh;\n    background-color: #030303;\n    z-index: 9999999;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), visibility 1s;\n    transform-origin: center center;\n    contain: layout paint;\n    isolation: isolate;\n    will-change: opacity;\n}\n\n\/* The Cinematic Exit (Push-through effect) *\/\n.cinematic-preloader.curtain-up {\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n}\n\n\/* Keep the zoom-and-blur effect on the small content layers instead of the\n   full-screen overlay. This looks the same but avoids a costly full-page blur. *\/\n.cp-staff-wrapper,\n.cp-text-container {\n    transition:\n        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),\n        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),\n        filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.cinematic-preloader.curtain-up .cp-staff-wrapper,\n.cinematic-preloader.curtain-up .cp-text-container {\n    opacity: 0;\n    filter: blur(5px);\n    transform: scale(1.07) translateZ(0);\n}\n\n\/* Soft ambient spotlight in the center of the dark room *\/\n.cp-spotlight {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 60vw;\n    height: 60vw;\n    background: radial-gradient(circle, rgba(197, 168, 128, 0.08) 0%, rgba(5, 5, 5, 0) 70%);\n    border-radius: 50%;\n    pointer-events: none;\n    animation: breatheLight 4s ease-in-out infinite alternate;\n    will-change: transform, opacity;\n    backface-visibility: hidden;\n}\n\n@keyframes breatheLight {\n    0% { opacity: 0.5; transform: translate3d(-50%, -50%, 0) scale(0.94); }\n    100% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.06); }\n}\n\n\/* --- The Manuscript Staff Container --- *\/\n.cp-staff-wrapper {\n    position: relative;\n    width: 300px;\n    height: 48px; \/* Standard 5-line height *\/\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    margin-bottom: 50px;\n    will-change: transform, opacity, filter;\n    backface-visibility: hidden;\n}\n\n\/* Individual Staff Lines *\/\n.cp-staff-line {\n    width: 100%;\n    height: 1px;\n    \/* Fades the line ends gracefully *\/\n    background: linear-gradient(90deg, transparent 0%, rgba(197, 168, 128, 0.4) 20%, rgba(197, 168, 128, 0.4) 80%, transparent 100%);\n    transform: scaleX(0); \/* Hidden initially *\/\n    transform-origin: center;\n    animation: drawStaff 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    will-change: transform, opacity;\n    backface-visibility: hidden;\n}\n\n\/* Staggered drawing of the 5 staff lines for a conductor's baton effect *\/\n.cp-staff-line:nth-child(1) { animation-delay: 0.2s; }\n.cp-staff-line:nth-child(2) { animation-delay: 0.3s; }\n.cp-staff-line:nth-child(3) { animation-delay: 0.4s; } \/* Center line *\/\n.cp-staff-line:nth-child(4) { animation-delay: 0.3s; }\n.cp-staff-line:nth-child(5) { animation-delay: 0.2s; }\n\n@keyframes drawStaff {\n    0% { transform: scaleX(0); opacity: 0; }\n    100% { transform: scaleX(1); opacity: 1; }\n}\n\n\/* --- Refined piano-key emblem: no notes or clef symbols --- *\/\n.cp-instrument-mark {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate3d(-50%, -50%, 0);\n    width: 154px;\n    height: auto;\n    overflow: visible;\n    color: #c5a880;\n    filter: drop-shadow(0 0 5px rgba(197, 168, 128, 0));\n    animation: pianoGlow 0.65s 2.65s ease forwards;\n    will-change: filter;\n    backface-visibility: hidden;\n}\n\n\/* The previous mark stays out of view; only the piano emblem is rendered. *\/\n.cp-instrument-mark > path {\n    display: none;\n}\n\n.cp-piano-bed {\n    fill: url(#cpIvoryKeys);\n    opacity: 0;\n    animation: pianoBedIn 0.5s 0.55s ease forwards;\n}\n\n.cp-piano-frame,\n.cp-piano-dividers {\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.6;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    will-change: stroke-dashoffset;\n}\n\n.cp-piano-frame {\n    stroke-dasharray: 390;\n    stroke-dashoffset: 390;\n    animation: pianoTrace 1.35s 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;\n}\n\n.cp-piano-dividers {\n    stroke-width: 1;\n    stroke: #8e795c;\n    stroke-dasharray: 180;\n    stroke-dashoffset: 180;\n    animation: pianoTrace 1s 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;\n}\n\n.cp-black-key {\n    fill: #060606;\n    stroke: #c5a880;\n    stroke-width: 0.75;\n    opacity: 0;\n    transform-box: fill-box;\n    transform-origin: top center;\n    transform: translateY(-5px) scaleY(0.88);\n    animation: pianoKeyIn 0.46s cubic-bezier(0.22, 1, 0.36, 1) forwards;\n    will-change: opacity, transform;\n}\n\n.cp-black-key--1 { animation-delay: 1.48s; }\n.cp-black-key--2 { animation-delay: 1.54s; }\n.cp-black-key--3 { animation-delay: 1.60s; }\n.cp-black-key--4 { animation-delay: 1.66s; }\n.cp-black-key--5 { animation-delay: 1.72s; }\n\n.cp-key-highlight {\n    fill: none;\n    stroke: rgba(255, 255, 255, 0.68);\n    stroke-width: 1;\n    stroke-linecap: round;\n    stroke-dasharray: 118;\n    stroke-dashoffset: 118;\n    opacity: 0;\n    animation: pianoHighlight 0.8s 2.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;\n}\n\n@keyframes pianoTrace {\n    to { stroke-dashoffset: 0; }\n}\n\n@keyframes pianoBedIn {\n    to { opacity: 0.98; }\n}\n\n@keyframes pianoKeyIn {\n    to { opacity: 1; transform: translateY(0) scaleY(1); }\n}\n\n@keyframes pianoHighlight {\n    to { opacity: 0.72; stroke-dashoffset: 0; }\n}\n\n@keyframes pianoGlow {\n    to { filter: drop-shadow(0 0 12px rgba(197, 168, 128, 0.72)); }\n}\n\n\/* --- Cinematic Anamorphic Lens Flare --- *\/\n.cp-flare {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate3d(-50%, -50%, 0) scaleX(0);\n    width: min(400px, 82vw);\n    height: 2px;\n    background: #ffffff;\n    box-shadow:\n        0 0 10px 2px rgba(255, 255, 255, 0.82),\n        0 0 28px 8px rgba(197, 168, 128, 0.68),\n        0 0 48px 14px rgba(197, 168, 128, 0.3);\n    border-radius: 50%;\n    opacity: 0;\n    z-index: 10;\n    pointer-events: none;\n    \/* Triggers as the piano emblem settles into its gold glow *\/\n    animation: lensFlare 1.2s 3s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    will-change: transform, opacity;\n    backface-visibility: hidden;\n}\n\n@keyframes lensFlare {\n    0% { transform: translate3d(-50%, -50%, 0) scaleX(0); opacity: 0; }\n    30% { transform: translate3d(-50%, -50%, 0) scaleX(1); opacity: 1; }\n    100% { transform: translate3d(-50%, -50%, 0) scaleX(0.2); opacity: 0; }\n}\n\n\/* --- Typography & Loading Status --- *\/\n.cp-text-container {\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 12px;\n    will-change: transform, opacity, filter;\n}\n\n.cp-title {\n    font-family: 'Playfair Display', serif;\n    font-size: 2rem;\n    font-weight: 400;\n    color: #ffffff;\n    margin: 0;\n    letter-spacing: 6px;\n    text-transform: uppercase;\n    opacity: 0;\n    filter: blur(6px); \/* Cinematic focus-pull effect, kept lighter for mobile GPUs *\/\n    transform: scale(0.95);\n    animation: focusPull 1.5s 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;\n    will-change: transform, opacity, filter;\n    backface-visibility: hidden;\n}\n\n@keyframes focusPull {\n    to { opacity: 1; filter: blur(0px); transform: scale(1); letter-spacing: 3px; }\n}\n\n\/* Dynamic Specific Musical Text *\/\n.cp-status {\n    font-family: 'Inter', sans-serif;\n    font-size: 0.75rem;\n    font-weight: 600;\n    color: #c5a880;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    opacity: 0;\n    animation: fadeIn 0.5s 1.8s forwards;\n    transition: opacity 0.28s ease;\n    will-change: opacity;\n}\n\n@keyframes fadeIn {\n    to { opacity: 1; }\n}\n\n\/* Mobile Adjustments *\/\n@media (max-width: 576px) {\n    .cp-staff-wrapper { width: 240px; }\n    .cp-instrument-mark { width: 134px; }\n    .cp-title { font-size: 1.3rem; letter-spacing: 4px; }\n    @keyframes focusPull {\n        to { opacity: 1; filter: blur(0px); transform: scale(1); letter-spacing: 1.5px; }\n    }\n}\n<\/style>\n\n<!-- Preloader HTML Structure -->\n<div class=\"cinematic-preloader\" id=\"cinematicPreloader\">\n    \n    <!-- Ambient light -->\n    <div class=\"cp-spotlight\"><\/div>\n\n    <!-- The Grand Staff & Piano Emblem -->\n    <div class=\"cp-staff-wrapper\">\n        <div class=\"cp-staff-line\"><\/div>\n        <div class=\"cp-staff-line\"><\/div>\n        <div class=\"cp-staff-line\"><\/div>\n        <div class=\"cp-staff-line\"><\/div>\n        <div class=\"cp-staff-line\"><\/div>\n\n        <!-- Refined piano-key emblem: recognisable, minimal and note-free -->\n        <svg class=\"cp-instrument-mark\" viewBox=\"0 0 180 110\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n            <defs>\n                <linearGradient id=\"cpIvoryKeys\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"0%\" stop-color=\"#fffdf8\" \/>\n                    <stop offset=\"58%\" stop-color=\"#eee7dc\" \/>\n                    <stop offset=\"100%\" stop-color=\"#cfc1ad\" \/>\n                <\/linearGradient>\n            <\/defs>\n            <path d=\"M51.5,93.5c-1.1,0-2.2-0.2-3.1-0.7c-3.1-1.7-4.6-5.1-4.2-9.4c0.2-2.1,1.1-4.2,2.7-5.9c1.9-2.1,4.5-3.3,7.3-3.3c0.4,0,0.8,0,1.2,0.1c0.7-3.4,1.4-8,2.1-13.6C44.3,58.7,33.1,51.8,33.1,39c0-8.9,6.7-16.1,15.1-16.1c3.1,0,6.1,1,8.4,2.8c1.3-4.3,2.4-9.3,3.1-14.5c0.2-1.3,1.2-2.2,2.5-2.2c0.2,0,0.4,0,0.6,0c1.4,0.2,2.3,1.5,2.1,2.9c-0.8,5.4-1.9,10.6-3.2,15.1c4.5,3.3,7.1,8.3,7.1,13.8c0,7.2-4.5,13.2-11.4,15.1c-0.6,4.6-1.3,8.7-1.8,11.8c6.6,1.4,11.4,6.7,11.4,12.9c0,7.1-5.9,12.8-13.2,12.8 C51.7,93.5,51.6,93.5,51.5,93.5z M50.4,79.2c-1.3,0-2.5,0.6-3.4,1.6c-0.8,0.9-1.2,2-1.3,3c-0.2,2.1,0.5,3.7,1.9,4.4 c1.1,0.6,2.6,0.5,3.9-0.3c1.7-1,2.7-3.2,2.7-5.6C53,80.3,51.7,79.3,50.4,79.2z M48.2,27.9c-5.6,0-10.1,5-10.1,11.1 c0,8.3,7.8,13.3,16.5,15.4c-0.6,4-1.2,7.5-1.7,10.2C44.7,63,40.1,58.8,40.1,53.2c0-1.4,1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5 c0,2.6,2.1,4.7,4.8,5.2c0.4-2.2,0.8-4.9,1.3-7.9c-4.6-1.8-8-5.7-8-10.3c0-4.5,3.1-8.3,7.2-9.1C49.7,28.1,48.9,27.9,48.2,27.9z M57,36.5c0-3.3-1.6-6.4-4.3-8.3c-2.4,1.1-4.1,3.4-4.1,6.1c0,3.1,2.4,5.6,5.5,5.8C55.7,39.3,57,38,57,36.5z M57.3,66 c-0.5-0.1-1-0.2-1.5-0.2c-3.1,0-5.9,1.7-7.4,4.5c0.5-2.5,1-5.3,1.4-8.3c4.1-0.9,7.6-3.2,9.6-6.4c0.5,3.1,0.8,5.9,1,8.2 C60.4,64.4,59,65.4,57.3,66z\"\/>\n            <g class=\"cp-piano-mark\">\n                <rect class=\"cp-piano-bed\" x=\"25\" y=\"23\" width=\"130\" height=\"66\" rx=\"4\" \/>\n                <rect class=\"cp-piano-frame\" x=\"25\" y=\"23\" width=\"130\" height=\"66\" rx=\"4\" \/>\n                <path class=\"cp-piano-dividers\" d=\"M43.6 23V89M62.2 23V89M80.8 23V89M99.4 23V89M118 23V89M136.6 23V89\" \/>\n                <rect class=\"cp-black-key cp-black-key--1\" x=\"38\" y=\"23\" width=\"10\" height=\"38\" rx=\"1.5\" \/>\n                <rect class=\"cp-black-key cp-black-key--2\" x=\"56.6\" y=\"23\" width=\"10\" height=\"38\" rx=\"1.5\" \/>\n                <rect class=\"cp-black-key cp-black-key--3\" x=\"94\" y=\"23\" width=\"10\" height=\"38\" rx=\"1.5\" \/>\n                <rect class=\"cp-black-key cp-black-key--4\" x=\"112.6\" y=\"23\" width=\"10\" height=\"38\" rx=\"1.5\" \/>\n                <rect class=\"cp-black-key cp-black-key--5\" x=\"131.2\" y=\"23\" width=\"10\" height=\"38\" rx=\"1.5\" \/>\n                <path class=\"cp-key-highlight\" d=\"M31 83H149\" \/>\n            <\/g>\n        <\/svg>\n\n        <!-- The Anamorphic Light Burst -->\n        <div class=\"cp-flare\"><\/div>\n    <\/div>\n\n    <!-- Typography Block -->\n    <div class=\"cp-text-container\">\n        <h1 class=\"cp-title\">Helen's Music Centre<\/h1>\n        <div class=\"cp-status\" id=\"cpStatusText\">Tuning to A=440Hz...<\/div>\n    <\/div>\n\n<\/div>\n\n<!-- Theatrical Sequence Javascript -->\n<script>\n\/\/ Lock the scrollbar so users can't scroll while the curtain is down\ndocument.body.classList.add('preloader-active');\n\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    const preloader = document.getElementById('cinematicPreloader');\n    const statusText = document.getElementById('cpStatusText');\n\n    if (!preloader || !statusText) {\n        document.body.classList.remove('preloader-active');\n        return;\n    }\n    \n    \/\/ Array of authentic classical music preparation terminology\n    const theatricalPhrases = [\n        \"Tuning to A=440Hz...\",\n        \"Preparing the manuscript...\",\n        \"Overture ready.\"\n    ];\n\n    \/\/ Swap text dynamically to simulate a real loading progression\n    setTimeout(() => { statusText.style.opacity = 0; }, 2600); \/\/ fade out first\n    setTimeout(() => { \n        statusText.innerText = theatricalPhrases[1]; \n        statusText.style.opacity = 1; \n    }, 2900); \/\/ fade in second\n    \n    setTimeout(() => { statusText.style.opacity = 0; }, 3600); \/\/ fade out second\n    setTimeout(() => { \n        statusText.innerText = theatricalPhrases[2]; \n        statusText.style.opacity = 1; \n    }, 3900); \/\/ fade in third (Overture ready)\n\n    \/\/ The Grand Exit Sequence (Wait for window to load, but enforce a minimum theatrical runtime of 4.5 seconds)\n    const minimumTheatricalTime = 4800; \/\/ 4.8 seconds allows the flare and text swaps to complete beautifully\n    const startTime = Date.now();\n\n    window.addEventListener('load', function() {\n        const elapsedTime = Date.now() - startTime;\n        const remainingTime = Math.max(0, minimumTheatricalTime - elapsedTime);\n\n        setTimeout(function() {\n            \/\/ Trigger the push-through CSS curtain lift\n            preloader.classList.add('curtain-up');\n            \n            \/\/ Unlock scrolling after the blur transition finishes\n            setTimeout(function() {\n                document.body.classList.remove('preloader-active');\n                preloader.remove(); \/\/ Stop all hidden animations after the exit completes\n            }, 1050); \/\/ Completes just after the 1s exit transition\n            \n        }, remainingTime); \n    }, { once: true });\n});\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a3b7ee9 e-con-full e-flex e-con e-parent\" data-id=\"a3b7ee9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b989432 elementor-widget elementor-widget-html\" data-id=\"b989432\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Import Google Fonts -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');\n\n\/* --- Elementor anti-pink shield, scoped to this hero and its modal --- *\/\n.custom-hero-wrapper,\n.enroll-modal-overlay {\n    --e-global-color-accent: #c5a880 !important;\n    --e-global-color-primary: #c5a880 !important;\n    --e-a-color-primary: #c5a880 !important;\n    accent-color: #c5a880 !important;\n}\n\n.custom-hero-wrapper *,\n.enroll-modal-overlay * {\n    -webkit-tap-highlight-color: transparent !important;\n}\n\n.custom-hero-wrapper ::selection,\n.enroll-modal-overlay ::selection {\n    background: #c5a880 !important;\n    color: #050505 !important;\n}\n\n.custom-hero-wrapper ::-moz-selection,\n.enroll-modal-overlay ::-moz-selection {\n    background: #c5a880 !important;\n    color: #050505 !important;\n}\n\n.custom-hero-wrapper a,\n.custom-hero-wrapper a:link,\n.custom-hero-wrapper a:visited,\n.custom-hero-wrapper a:active,\n.custom-hero-wrapper a:focus,\n.enroll-modal-overlay button,\n.enroll-modal-overlay button:active,\n.enroll-modal-overlay button:focus {\n    text-decoration: none !important;\n    outline-color: #c5a880 !important;\n}\n\n.custom-hero-wrapper *:focus-visible,\n.enroll-modal-overlay *:focus-visible {\n    outline: 1px solid #c5a880 !important;\n    outline-offset: 3px !important;\n    box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.18) !important;\n}\n\n.enroll-modal-overlay input,\n.enroll-modal-overlay textarea,\n.enroll-modal-overlay select {\n    caret-color: #c5a880 !important;\n}\n\n.enroll-modal-overlay input:-webkit-autofill,\n.enroll-modal-overlay input:-webkit-autofill:hover,\n.enroll-modal-overlay input:-webkit-autofill:focus,\n.enroll-modal-overlay textarea:-webkit-autofill,\n.enroll-modal-overlay select:-webkit-autofill {\n    -webkit-text-fill-color: #ffffff !important;\n    -webkit-box-shadow: 0 0 0 1000px #0f0f0f inset !important;\n    box-shadow: 0 0 0 1000px #0f0f0f inset !important;\n    border-bottom-color: #c5a880 !important;\n}\n\n\/* --- Main Immersive Container --- *\/\n.custom-hero-wrapper {\n    position: relative; \n    background-color: #050505; \n    color: #ffffff;\n    font-family: 'Inter', sans-serif;\n    min-height: 100vh;\n    min-height: 100dvh; \/* Modern standard: prevents dynamic address bar layout shifts on mobile *\/\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n    overflow: hidden;\n    padding: 140px 5% 100px 5%; \/* Top padding adjusted for sticky mobile headers *\/\n}\n\n\/* --- Full-Screen Background Slider --- *\/\n.hero-bg-slider {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    overflow: hidden;\n}\n\n.slider-slide {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-size: cover;\n    background-position: center;\n    opacity: 0;\n    transition: opacity 1.5s ease-in-out;\n    background-color: #050505;\n    \/* Direct dimming filter to secure text readability without a muddy overlay element *\/\n    filter: brightness(0.24) contrast(1.05); \n}\n\n.slider-slide.active {\n    opacity: 1;\n    animation: kenBurns 6s linear forwards; \/* Immersive slow zoom *\/\n}\n\n@keyframes kenBurns {\n    0% { transform: scale(1); }\n    100% { transform: scale(1.08); }\n}\n\n\/* --- Three Ambient Floating Music Elements (Layered above slider, below text) --- *\/\n.hero-bg-music-elements {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 3; \n    overflow: hidden;\n}\n\n\/* Highly visible, elegant warm gold watermarks *\/\n.bg-music-shape {\n    position: absolute;\n    color: rgba(197, 168, 128, 0.075); \/* Soft, semi-transparent gold to keep solid shapes delicate *\/\n    pointer-events: none;\n}\n\n\/* Keynote 1: G-Clef in top-left margin *\/\n.shape-clef {\n    width: 200px;\n    height: 200px;\n    top: 6%;\n    left: -2%;\n    transform: rotate(15deg);\n    animation: floatClef 20s ease-in-out infinite alternate;\n}\n\n\/* Keynote 2: Eighth note in top-right margin *\/\n.shape-note {\n    width: 140px;\n    height: 140px;\n    top: 10%;\n    right: 5%;\n    transform: rotate(-10deg);\n    animation: floatNote 16s ease-in-out infinite alternate;\n}\n\n\/* Keynote 3: Beamed Eighth Notes in bottom-right corner *\/\n.shape-beamed {\n    width: 200px;\n    height: 200px;\n    bottom: 8%;\n    right: 6%;\n    transform: rotate(-12deg);\n    animation: floatBeamed 18s ease-in-out infinite alternate;\n}\n\n\/* Parallax Floating Animations *\/\n@keyframes floatClef {\n    0% { transform: translateY(0) rotate(15deg) scale(1); }\n    100% { transform: translateY(-15px) rotate(22deg) scale(1.03); }\n}\n@keyframes floatNote {\n    0% { transform: translateY(0) rotate(-10deg) scale(1); }\n    100% { transform: translateY(18px) rotate(-3deg) scale(0.95); }\n}\n@keyframes floatBeamed {\n    0% { transform: translateY(0) rotate(12deg); }\n    100% { transform: translateY(-15px) rotate(5deg); }\n}\n\n\/* --- Foremost Content Container --- *\/\n.custom-hero-container {\n    max-width: 1200px;\n    width: 100%;\n    position: relative;\n    z-index: 10; \/* Placed completely in front of background images and watermarks *\/\n}\n\n\/* --- Text Column --- *\/\n.custom-hero-content {\n    max-width: 650px; \/* Constrains text width for theatrical left alignment *\/\n}\n\n\/* Elegant tagline box with a subtle gold tint and border *\/\n.hero-tagline {\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n    border: 1px solid rgba(197, 168, 128, 0.35);\n    background-color: rgba(5, 5, 5, 0.6); \/* Semi-transparent tag *\/\n    backdrop-filter: blur(4px);\n    padding: 8px 16px;\n    font-size: 11px;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    margin-bottom: 35px;\n    font-weight: 600;\n    border-radius: 2px;\n}\n\n.tagline-icon {\n    width: 15px;\n    height: 15px;\n    color: #c5a880; \n}\n\n.hero-heading {\n    font-family: 'Playfair Display', serif;\n    font-size: 65px;\n    line-height: 1.1;\n    font-weight: 400;\n    margin: 0 0 25px 0;\n    letter-spacing: -0.5px;\n    text-shadow: 0 2px 10px rgba(0,0,0,0.5);\n}\n\n.hero-heading em {\n    font-style: italic;\n}\n\n\/* --- Luxury G-Clef Content Divider --- *\/\n.music-divider {\n    display: flex;\n    align-items: center;\n    gap: 15px;\n    margin-bottom: 35px;\n    max-width: 80%;\n}\n\n.divider-line {\n    height: 1px;\n    flex: 1;\n    background: linear-gradient(90deg, transparent, rgba(197, 168, 128, 0.4), transparent);\n}\n\n.divider-clef {\n    width: 22px;\n    height: 22px;\n    color: #c5a880; \n}\n\n.hero-description {\n    color: #d0d0d0;\n    font-size: 1.05rem;\n    line-height: 1.8;\n    margin-bottom: 45px;\n    max-width: 90%;\n    text-shadow: 0 2px 10px rgba(0,0,0,0.5);\n}\n\n.hero-description em {\n    color: #ffffff;\n    font-weight: 600;\n    font-style: normal;\n}\n\n.hero-buttons {\n    display: flex;\n    gap: 20px;\n}\n\n.hero-btn {\n    text-decoration: none;\n    padding: 16px 38px;\n    font-size: 12px;\n    font-weight: 600;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    transition: all 0.3s ease;\n    cursor: pointer;\n}\n\n.btn-primary {\n    background-color: #ffffff;\n    color: #000000;\n    border: 1px solid #ffffff;\n}\n\n.btn-primary:hover {\n    background-color: #c5a880;\n    border-color: #c5a880;\n    color: #050505;\n}\n\n.btn-secondary {\n    background-color: rgba(5, 5, 5, 0.6);\n    backdrop-filter: blur(4px);\n    color: #ffffff;\n    border: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.btn-secondary:hover {\n    border-color: #c5a880;\n    color: #c5a880;\n}\n\n\/* Elegant floating slide indicator dots in the bottom right corner *\/\n.slider-dots {\n    position: absolute;\n    bottom: 50px;\n    right: 5%;\n    display: flex;\n    gap: 12px;\n    z-index: 11;\n}\n\n.slider-dot {\n    width: 8px;\n    height: 8px;\n    background-color: rgba(255, 255, 255, 0.25);\n    border-radius: 50%;\n    cursor: pointer;\n    transition: background-color 0.4s ease, transform 0.4s ease;\n}\n\n.slider-dot.active {\n    background-color: #c5a880;\n    transform: scale(1.2);\n}\n\n\/* --- Immersive Enrollment Pop-up Modal --- *\/\n.enroll-modal-overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(5, 5, 5, 0.85); \/* Darkened semi-transparent overlay *\/\n    backdrop-filter: blur(10px); \/* Frosted blur backdrop *\/\n    -webkit-backdrop-filter: blur(10px);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    z-index: 10000; \/* Overrides foreground layers *\/\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.4s ease;\n}\n\n.enroll-modal-overlay.open {\n    opacity: 1;\n    pointer-events: auto;\n}\n\n.enroll-modal-content {\n    background-color: #0f0f0f; \/* High-contrast card *\/\n    border: 1px solid rgba(197, 168, 128, 0.25); \/* Fine gold card framing *\/\n    padding: 50px 40px;\n    width: 100%;\n    max-width: 480px;\n    box-sizing: border-box;\n    position: relative;\n    box-shadow: 0 15px 45px rgba(0,0,0,0.8);\n    transform: scale(0.9);\n    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n    \n    \/* Scrollable Fix: Prevents elements from getting cut off on small mobile viewports *\/\n    max-height: 90vh;\n    overflow-y: auto;\n}\n\n.enroll-modal-close {\n    position: absolute;\n    top: 20px;\n    right: 25px;\n    background: transparent;\n    border: none;\n    color: #888888;\n    font-size: 2rem;\n    cursor: pointer;\n    transition: color 0.3s ease;\n    line-height: 1;\n}\n\n.enroll-modal-close:hover {\n    color: #c5a880;\n}\n\n.enroll-modal-title {\n    font-family: 'Playfair Display', serif;\n    font-size: 2.2rem;\n    font-weight: 400;\n    margin: 0 0 15px 0;\n    text-align: center;\n    letter-spacing: 0.5px;\n    color: #ffffff;\n}\n\n.enroll-divider {\n    display: flex;\n    align-items: center;\n    gap: 15px;\n    margin-bottom: 35px;\n}\n\n.enroll-divider .divider-line {\n    height: 1px;\n    flex: 1;\n    background: linear-gradient(90deg, transparent, rgba(197, 168, 128, 0.3), transparent);\n}\n\n.enroll-form-group {\n    margin-bottom: 25px;\n    text-align: left;\n}\n\n.enroll-form-group label {\n    display: block;\n    font-size: 0.75rem;\n    font-weight: 600;\n    letter-spacing: 1px;\n    color: #888888;\n    margin-bottom: 8px;\n    text-transform: uppercase;\n}\n\n.enroll-form-group input,\n.enroll-form-group select,\n.enroll-form-group textarea {\n    width: 100%;\n    border: none;\n    border-bottom: 1px solid #222222;\n    background: transparent;\n    color: #ffffff;\n    font-family: 'Inter', sans-serif;\n    font-size: 0.95rem;\n    padding: 10px 0;\n    box-sizing: border-box;\n    transition: border-color 0.3s ease;\n    border-radius: 0;\n}\n\n.enroll-form-group input::placeholder,\n.enroll-form-group textarea::placeholder {\n    color: #444444;\n}\n\n.enroll-form-group input:focus,\n.enroll-form-group select:focus,\n.enroll-form-group textarea:focus {\n    outline: none;\n    border-bottom-color: #c5a880; \/* Glows gold on focus *\/\n}\n\n\/* Custom Dropdown Option background *\/\n.enroll-form-group select option {\n    background-color: #0f0f0f;\n    color: #ffffff;\n}\n\n.enroll-form-group select optgroup {\n    background-color: #0f0f0f !important;\n    color: #c5a880 !important;\n    font-weight: 600;\n}\n\n.enroll-form-group textarea {\n    resize: none;\n}\n\n\/* WhatsApp Submit Button *\/\n.enroll-submit-btn {\n    width: 100%;\n    background-color: #c5a880;\n    color: #050505;\n    border: 1px solid #c5a880;\n    padding: 16px 0;\n    font-family: 'Inter', sans-serif;\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 1.5px;\n    text-transform: uppercase;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    margin-top: 15px;\n}\n\n.enroll-submit-btn:hover {\n    background-color: transparent;\n    color: #c5a880;\n}\n\n\/* Prevent viewport scrolling behind open modal overlays *\/\nbody.modal-open {\n    overflow: hidden;\n}\n\n\/* --- Responsive & Mobile-Perfect Adjustments --- *\/\n@media (max-width: 992px) {\n    .custom-hero-wrapper {\n        \/* Equalized padding to allow perfect flex vertical centering *\/\n        padding: 150px 6% 150px 6%; \n    }\n    .hero-heading {\n        font-size: 3.8rem;\n    }\n    \n    \/* Full Horizontal and Vertical Centering System on Mobile\/Tablet viewports *\/\n    .custom-hero-content {\n        max-width: 100%;\n        display: flex;\n        flex-direction: column;\n        align-items: center; \/* Horizontally centers flex children *\/\n        text-align: center; \/* Horizontally centers inner text lines *\/\n    }\n    \n    \/* Center the music divider on mobile layout *\/\n    .music-divider {\n        justify-content: center;\n        width: 100%;\n        max-width: 240px;\n        margin-left: auto;\n        margin-right: auto;\n    }\n    \n    .hero-description {\n        max-width: 100%;\n    }\n    \n    \/* Center the stacked buttons *\/\n    .hero-buttons {\n        justify-content: center;\n        width: 100%;\n        max-width: 320px;\n        margin: 0 auto;\n    }\n    \n    \/* Reposition dots horizontally under stacked mobile buttons to avoid overlaps *\/\n    .slider-dots {\n        position: relative;\n        bottom: auto;\n        right: auto;\n        transform: none;\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        gap: 12px;\n        margin-top: 35px; \/* Clean visual space below button row *\/\n        margin-bottom: 10px;\n    }\n}\n\n@media (max-width: 768px) {\n    .hero-heading {\n        font-size: 3.2rem;\n    }\n}\n\n@media (max-width: 576px) {\n    .custom-hero-wrapper {\n        \/* Equalized padding to prevent off-center push-downs *\/\n        padding-top: 110px;\n        padding-bottom: 110px;\n    }\n    .hero-tagline {\n        font-size: 9px; \/* Slightly reduced so tagline doesn't wrap awkwardly on small devices *\/\n        letter-spacing: 1.5px;\n        padding: 8px 12px;\n        margin-bottom: 25px;\n    }\n    .hero-heading {\n        font-size: 2.5rem; \/* Perfect readable baseline on all small viewport widths *\/\n    }\n    .hero-buttons {\n        flex-direction: column;\n        gap: 15px; \/* Clean mobile stacking spacer *\/\n    }\n    .hero-btn {\n        text-align: center;\n        width: 100%;\n    }\n    .shape-clef, .shape-note, .shape-beamed {\n        display: none; \/* Hide background vectors on mobile screens for pure text clarity *\/\n    }\n}\n\n\/* Final state lock: Elementor cannot recolour interactive elements pink. *\/\n.custom-hero-wrapper .btn-primary,\n.custom-hero-wrapper .btn-primary:link,\n.custom-hero-wrapper .btn-primary:visited,\n.custom-hero-wrapper .btn-primary:focus,\n.custom-hero-wrapper .btn-primary:active {\n    background-color: #ffffff !important;\n    border-color: #ffffff !important;\n    color: #050505 !important;\n}\n\n.custom-hero-wrapper .btn-primary:hover {\n    background-color: #c5a880 !important;\n    border-color: #c5a880 !important;\n    color: #050505 !important;\n}\n\n.custom-hero-wrapper .slider-dot.active {\n    background-color: #c5a880 !important;\n}\n\n.enroll-modal-overlay .enroll-submit-btn,\n.enroll-modal-overlay .enroll-submit-btn:focus,\n.enroll-modal-overlay .enroll-submit-btn:active {\n    background-color: #c5a880 !important;\n    border-color: #c5a880 !important;\n    color: #050505 !important;\n}\n\n.enroll-modal-overlay .enroll-submit-btn:hover {\n    background-color: transparent !important;\n    border-color: #c5a880 !important;\n    color: #c5a880 !important;\n}\n\n.enroll-modal-overlay .enroll-modal-close:hover,\n.enroll-modal-overlay .enroll-modal-close:focus,\n.enroll-modal-overlay .enroll-modal-close:active {\n    color: #c5a880 !important;\n    background: transparent !important;\n}\n\n.enroll-modal-overlay input:focus,\n.enroll-modal-overlay textarea:focus,\n.enroll-modal-overlay select:focus {\n    border-bottom-color: #c5a880 !important;\n}\n<\/style>\n\n<!-- HTML Structure -->\n<div class=\"custom-hero-wrapper\" id=\"home\">\n    \n    <!-- Immersive Background Slideshow -->\n    <div class=\"hero-bg-slider\">\n        <!-- Piano slide -->\n        <div class=\"slider-slide active\" style=\"background-image: url('https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/0C6A5376-scaled.jpg');\"><\/div>\n        <!-- Violin\/Orchestra slide -->\n        <div class=\"slider-slide\" style=\"background-image: url('https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/0C6A5502-scaled.jpg');\"><\/div>\n        <!-- Classical Sheet Music slide -->\n        <div class=\"slider-slide\" style=\"background-image: url('https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/0C6A5807-scaled.jpg');\"><\/div>\n    <\/div>\n\n    <!-- Three Ambient Music Watermarks -->\n    <div class=\"hero-bg-music-elements\">\n        <!-- Keynote 1: Complete Solid G-Clef Vector -->\n        <svg class=\"bg-music-shape shape-clef\" viewBox=\"0 0 100 100\" fill=\"currentColor\">\n            <path d=\"M51.5,93.5c-1.1,0-2.2-0.2-3.1-0.7c-3.1-1.7-4.6-5.1-4.2-9.4c0.2-2.1,1.1-4.2,2.7-5.9c1.9-2.1,4.5-3.3,7.3-3.3c0.4,0,0.8,0,1.2,0.1c0.7-3.4,1.4-8,2.1-13.6C44.3,58.7,33.1,51.8,33.1,39c0-8.9,6.7-16.1,15.1-16.1c3.1,0,6.1,1,8.4,2.8c1.3-4.3,2.4-9.3,3.1-14.5c0.2-1.3,1.2-2.2,2.5-2.2c0.2,0,0.4,0,0.6,0c1.4,0.2,2.3,1.5,2.1,2.9c-0.8,5.4-1.9,10.6-3.2,15.1c4.5,3.3,7.1,8.3,7.1,13.8c0,7.2-4.5,13.2-11.4,15.1c-0.6,4.6-1.3,8.7-1.8,11.8c6.6,1.4,11.4,6.7,11.4,12.9c0,7.1-5.9,12.8-13.2,12.8 C51.7,93.5,51.6,93.5,51.5,93.5z M50.4,79.2c-1.3,0-2.5,0.6-3.4,1.6c-0.8,0.9-1.2,2-1.3,3c-0.2,2.1,0.5,3.7,1.9,4.4 c1.1,0.6,2.6,0.5,3.9-0.3c1.7-1,2.7-3.2,2.7-5.6C53,80.3,51.7,79.3,50.4,79.2z M48.2,27.9c-5.6,0-10.1,5-10.1,11.1 c0,8.3,7.8,13.3,16.5,15.4c-0.6,4-1.2,7.5-1.7,10.2C44.7,63,40.1,58.8,40.1,53.2c0-1.4,1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5 c0,2.6,2.1,4.7,4.8,5.2c0.4-2.2,0.8-4.9,1.3-7.9c-4.6-1.8-8-5.7-8-10.3c0-4.5,3.1-8.3,7.2-9.1C49.7,28.1,48.9,27.9,48.2,27.9z M57,36.5c0-3.3-1.6-6.4-4.3-8.3c-2.4,1.1-4.1,3.4-4.1,6.1c0,3.1,2.4,5.6,5.5,5.8C55.7,39.3,57,38,57,36.5z M57.3,66 c-0.5-0.1-1-0.2-1.5-0.2c-3.1,0-5.9,1.7-7.4,4.5c0.5-2.5,1-5.3,1.4-8.3c4.1-0.9,7.6-3.2,9.6-6.4c0.5,3.1,0.8,5.9,1,8.2 C60.4,64.4,59,65.4,57.3,66z\"\/>\n        <\/svg>\n\n        <!-- Keynote 2: Complete Solid Eighth Note Vector -->\n        <svg class=\"bg-music-shape shape-note\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z\" \/>\n        <\/svg>\n\n        <!-- Keynote 3: Complete Solid Beamed Eighth Notes Vector -->\n        <svg class=\"bg-music-shape shape-beamed\" viewBox=\"0 0 448 512\" fill=\"currentColor\">\n            <path d=\"M424.4 21c-8.9-6-20.4-6.4-29.6-1.1L122.8 153.2c-15.5 8.9-26.8 25.1-26.8 42.8V416c-11.4-8-24.8-12.2-38.6-10.7c-31 3.5-54.8 30.6-53.4 61.8C5.4 498.4 31 522 62 522c34 0 60.1-29.1 58.1-63.3V212.1L384 136v184c-11.4-8-24.8-12.2-38.6-10.7c-31 3.5-54.8 30.6-53.4 61.8c1.3 31.4 27 55 58 55c34 0 60.1-29.1 58.1-63.3V48c0-11.8-5.8-22.8-15.7-29zM120 256v-42l264-75v42l-264 75z\"\/>\n        <\/svg>\n    <\/div>\n\n    <!-- Active Area -->\n    <div class=\"custom-hero-container\">\n        \n        <!-- Left Column: Content -->\n        <div class=\"custom-hero-content\">\n            <div class=\"hero-tagline\">\n                <svg class=\"tagline-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M9 18V5l12-2v13\"><\/path>\n                    <circle cx=\"6\" cy=\"18\" r=\"3\"><\/circle>\n                    <circle cx=\"18\" cy=\"16\" r=\"3\"><\/circle>\n                <\/svg>\n                <span>EST. 1977 | KUCHING KAWAI MUSIC SCHOOL<\/span>\n            <\/div>\n            \n            <h1 class=\"hero-heading\">Build Foundations, <br><em>Inspiring Talent.<\/em><\/h1>\n            \n            <!-- Elegant G-Clef Content Divider -->\n            <div class=\"music-divider\">\n                <span class=\"divider-line\"><\/span>\n                <svg class=\"divider-clef\" viewBox=\"0 0 100 100\" fill=\"currentColor\">\n                    <path d=\"M51.5,93.5c-1.1,0-2.2-0.2-3.1-0.7c-3.1-1.7-4.6-5.1-4.2-9.4c0.2-2.1,1.1-4.2,2.7-5.9c1.9-2.1,4.5-3.3,7.3-3.3c0.4,0,0.8,0,1.2,0.1c0.7-3.4,1.4-8,2.1-13.6C44.3,58.7,33.1,51.8,33.1,39c0-8.9,6.7-16.1,15.1-16.1c3.1,0,6.1,1,8.4,2.8c1.3-4.3,2.4-9.3,3.1-14.5c0.2-1.3,1.2-2.2,2.5-2.2c0.2,0,0.4,0,0.6,0c1.4,0.2,2.3,1.5,2.1,2.9c-0.8,5.4-1.9,10.6-3.2,15.1c4.5,3.3,7.1,8.3,7.1,13.8c0,7.2-4.5,13.2-11.4,15.1c-0.6,4.6-1.3,8.7-1.8,11.8c6.6,1.4,11.4,6.7,11.4,12.9c0,7.1-5.9,12.8-13.2,12.8 C51.7,93.5,51.6,93.5,51.5,93.5z M50.4,79.2c-1.3,0-2.5,0.6-3.4,1.6c-0.8,0.9-1.2,2-1.3,3c-0.2,2.1,0.5,3.7,1.9,4.4 c1.1,0.6,2.6,0.5,3.9-0.3c1.7-1,2.7-3.2,2.7-5.6C53,80.3,51.7,79.3,50.4,79.2z M48.2,27.9c-5.6,0-10.1,5-10.1,11.1 c0,8.3,7.8,13.3,16.5,15.4c-0.6,4-1.2,7.5-1.7,10.2C44.7,63,40.1,58.8,40.1,53.2c0-1.4,1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5 c0,2.6,2.1,4.7,4.8,5.2c0.4-2.2,0.8-4.9,1.3-7.9c-4.6-1.8-8-5.7-8-10.3c0-4.5,3.1-8.3,7.2-9.1C49.7,28.1,48.9,27.9,48.2,27.9z M57,36.5c0-3.3-1.6-6.4-4.3-8.3c-2.4,1.1-4.1,3.4-4.1,6.1c0,3.1,2.4,5.6,5.5,5.8C55.7,39.3,57,38,57,36.5z M57.3,66 c-0.5-0.1-1-0.2-1.5-0.2c-3.1,0-5.9,1.7-7.4,4.5c0.5-2.5,1-5.3,1.4-8.3c4.1-0.9,7.6-3.2,9.6-6.4c0.5,3.1,0.8,5.9,1,8.2 C60.4,64.4,59,65.4,57.3,66z\"\/>\n                <\/svg>\n                <span class=\"divider-line\"><\/span>\n            <\/div>\n\n            <p class=\"hero-description\">Founded in 1977 as the <em>Kuching Kawai Music School<\/em>, our academy has been Sarawak's beacon of classical excellence for nearly half a century. We carry forward Madam Helen's original vision: transforming raw talent into professional-grade brilliance.<\/p>\n            \n            <div class=\"hero-buttons\">\n                <a href=\"#\" class=\"hero-btn btn-primary\" id=\"openEnrollModal\">ENROLL NOW<\/a>\n            <\/div>\n\n            <!-- Slide Indicators Nested Inside Flow for Mobile Overlap Avoidance -->\n            <div class=\"slider-dots\">\n                <span class=\"slider-dot active\" onclick=\"goToSlide(0)\"><\/span>\n                <span class=\"slider-dot\" onclick=\"goToSlide(1)\"><\/span>\n                <span class=\"slider-dot\" onclick=\"goToSlide(2)\"><\/span>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<!-- Immersive Enrollment Pop-up Modal -->\n<div class=\"enroll-modal-overlay\" id=\"enrollModal\">\n    <div class=\"enroll-modal-content\">\n        <button class=\"enroll-modal-close\" id=\"closeModalBtn\">&times;<\/button>\n        <h2 class=\"enroll-modal-title\">Begin Your Journey<\/h2>\n        \n        <div class=\"enroll-divider\">\n            <span class=\"divider-line\"><\/span>\n        <\/div>\n        \n        <form class=\"enroll-form\" id=\"enrollForm\">\n            <!-- Full Name -->\n            <div class=\"enroll-form-group\">\n                <label for=\"enrollName\">Full Name<\/label>\n                <input type=\"text\" id=\"enrollName\" class=\"enroll-form-input\" placeholder=\"Your Name\" required>\n            <\/div>\n\n            <!-- Email Address -->\n            <div class=\"enroll-form-group\">\n                <label for=\"enrollEmail\">Email Address<\/label>\n                <input type=\"email\" id=\"enrollEmail\" class=\"enroll-form-input\" placeholder=\"email@example.com\" required>\n            <\/div>\n\n            <!-- Discipline Selection -->\n            <div class=\"enroll-form-group\">\n                <label for=\"enrollDiscipline\">Course<\/label>\n                <select id=\"enrollDiscipline\" class=\"enroll-form-input\" required>\n                    <option value=\"\" disabled selected>Select a course...<\/option>\n                    <optgroup label=\"Instrumental Courses\">\n                        <option value=\"Piano\">Piano<\/option>\n                        <option value=\"Violin\">Violin<\/option>\n                        <option value=\"Viola\">Viola<\/option>\n                        <option value=\"Cello\">Cello<\/option>\n                        <option value=\"Classical Guitar\">Classical Guitar<\/option>\n                        <option value=\"Acoustic Guitar\">Acoustic Guitar<\/option>\n                        <option value=\"Electric Guitar\">Electric Guitar<\/option>\n                        <option value=\"Keyboard\">Keyboard<\/option>\n                        <option value=\"Electric Organ\">Electric Organ<\/option>\n                        <option value=\"Drums\">Drums<\/option>\n                    <\/optgroup>\n                    <optgroup label=\"Vocal Course\">\n                        <option value=\"Vocal Training\">Vocal Training<\/option>\n                    <\/optgroup>\n                    <optgroup label=\"Music Education Courses\">\n                        <option value=\"Music Theory\">Music Theory<\/option>\n                        <option value=\"Junior Music Course (JMC)\">Junior Music Course (JMC)<\/option>\n                    <\/optgroup>\n                <\/select>\n            <\/div>\n\n            <!-- Optional message -->\n            <div class=\"enroll-form-group\">\n                <label for=\"enrollMessage\">Message<\/label>\n                <textarea id=\"enrollMessage\" class=\"enroll-form-input\" placeholder=\"Brief musical background...\" rows=\"3\"><\/textarea>\n            <\/div>\n\n            <!-- Submit Button -->\n            <button type=\"submit\" class=\"enroll-submit-btn\">Send WhatsApp Inquiry<\/button>\n        <\/form>\n    <\/div>\n<\/div>\n\n<!-- Slider & Modal Javascript -->\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    \/* --- Background Image Slider Logic --- *\/\n    const slides = document.querySelectorAll('.slider-slide');\n    const dots = document.querySelectorAll('.slider-dot');\n    let currentSlide = 0;\n    let slideInterval;\n\n    function showSlide(index) {\n        slides.forEach(slide => slide.classList.remove('active'));\n        dots.forEach(dot => dot.classList.remove('active'));\n\n        slides[index].classList.add('active');\n        dots[index].classList.add('active');\n        currentSlide = index;\n    }\n\n    function nextSlide() {\n        let next = (currentSlide + 1) % slides.length;\n        showSlide(next);\n    }\n\n    function startSlider() {\n        slideInterval = setInterval(nextSlide, 4000);\n    }\n\n    function resetSlider() {\n        clearInterval(slideInterval);\n        startSlider();\n    }\n\n    window.goToSlide = function(index) {\n        showSlide(index);\n        resetSlider();\n    }\n\n    startSlider();\n\n    \/* --- Enrollment Modal & WhatsApp Redirection Logic --- *\/\n    const enrollTrigger = document.getElementById('openEnrollModal');\n    const enrollModal = document.getElementById('enrollModal');\n    const closeModal = document.getElementById('closeModalBtn');\n    const enrollForm = document.getElementById('enrollForm');\n\n    \/\/ Open Modal\n    const enrollBtn = enrollTrigger || document.querySelector('.btn-primary');\n    enrollBtn.addEventListener('click', function(e) {\n        e.preventDefault();\n        enrollModal.classList.add('open');\n        document.body.classList.add('modal-open');\n    });\n\n    \/\/ Close Modal via 'X' button\n    closeModal.addEventListener('click', function() {\n        enrollModal.classList.remove('open');\n        document.body.classList.remove('modal-open');\n    });\n\n    \/\/ Close Modal via clicking on transparent overlay backdrop\n    enrollModal.addEventListener('click', function(e) {\n        if (e.target === enrollModal) {\n            enrollModal.classList.remove('open');\n            document.body.classList.remove('modal-open');\n        }\n    });\n\n    \/\/ Form submission processing -> Send to WhatsApp\n    enrollForm.addEventListener('submit', function(e) {\n        e.preventDefault();\n\n        const fullname = document.getElementById('enrollName').value.trim();\n        const email = document.getElementById('enrollEmail') ? document.getElementById('enrollEmail').value.trim() : 'N\/A';\n        const discipline = document.getElementById('enrollDiscipline').value;\n        const message = document.getElementById('enrollMessage').value.trim();\n\n        \/\/ Target WhatsApp Number\n        const schoolPhone = '60128566627'; \n\n        \/\/ Construct clean message template\n        const baseMessage = `Hello Helen's Music Centre! I would like to enroll\/inquire. Here are my details:\n\n\u2022 *Name*: ${fullname}\n\u2022 *Email*: ${email}\n\u2022 *Course of Interest*: ${discipline}\n${message ? `\\n*Additional Message*:\\n\"${message}\"` : ''}`;\n\n        \/\/ Safe URL encoding\n        const encodedText = encodeURIComponent(baseMessage);\n        const whatsappUrl = `https:\/\/wa.me\/${schoolPhone}?text=${encodedText}`;\n\n        \/\/ Redirect safely\n        window.open(whatsappUrl, '_blank');\n\n        \/\/ Close modal and reset fields\n        enrollModal.classList.remove('open');\n        document.body.classList.remove('modal-open');\n        enrollForm.reset();\n    });\n});\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fe4dd39 e-con-full e-flex e-con e-parent\" data-id=\"fe4dd39\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fd1eb12 elementor-widget elementor-widget-html\" data-id=\"fd1eb12\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Import Google Fonts (if not already loaded by the previous widget) -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');\n\n\/* --- Main Wrapper --- *\/\n.roots-section-wrapper {\n    position: relative; \/* Anchor for absolute background watermarks *\/\n    background-color: #050505; \/* Solid deep black background *\/\n    color: #ffffff;\n    font-family: 'Inter', sans-serif;\n    padding: 120px 5%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    overflow: hidden;\n    touch-action: manipulation; \/* Prevent double-tap zoom while keeping normal scrolling *\/\n}\n\n.roots-container {\n    max-width: 1200px;\n    width: 100%;\n    position: relative;\n    z-index: 2; \/* Sits above background music elements *\/\n}\n\n\/* --- Atmospheric Background Instrumental Elements --- *\/\n.roots-bg-elements {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 1;\n    overflow: hidden;\n}\n\n.roots-bg-instrument {\n    position: absolute;\n    color: rgba(197, 168, 128, 0.10); \/* Soft brass gold tint *\/\n    pointer-events: none;\n}\n\n\/* Classical violin outline peeking behind the layout *\/\n.shape-instrument-violin {\n    width: 280px;\n    height: auto;\n    top: 5%;\n    left: 45%;\n    transform: rotate(15deg);\n    animation: gentleSway 20s ease-in-out infinite alternate;\n}\n\n\/* Sweeping manuscript stave lines behind stats row *\/\n.roots-staff-lines {\n    position: absolute;\n    bottom: 22%;\n    left: -10%;\n    width: 120%;\n    height: 48px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    opacity: 0.12;\n    transform: rotate(-3deg);\n}\n\n.roots-staff-line {\n    height: 1px;\n    background-color: #c5a880;\n    width: 100%;\n}\n\n@keyframes gentleSway {\n    0% { transform: rotate(12deg) translateY(0); }\n    100% { transform: rotate(18deg) translateY(-10px); }\n}\n\n\/* --- Top Row: History & Image --- *\/\n.roots-top-row {\n    display: flex;\n    gap: 80px;\n    margin-bottom: 80px;\n}\n\n\/* Left Column: History Content *\/\n.roots-history-content {\n    flex: 1;\n    min-width: 300px;\n}\n\n.roots-heading {\n    font-family: 'Playfair Display', serif;\n    font-size: 3rem;\n    font-weight: 400;\n    margin: 0;\n    letter-spacing: 0.5px;\n}\n\n.roots-heading-line {\n    width: 60px;\n    height: 2px;\n    background-color: #c5a880; \/* Premium gold accent line *\/\n    margin: 20px 0 35px 0;\n}\n\n.roots-intro {\n    color: #a0a0a0;\n    font-size: 1.05rem;\n    line-height: 1.7;\n    margin-bottom: 50px;\n    max-width: 95%;\n}\n\n.roots-intro strong {\n    color: #ffffff;\n    font-weight: 600;\n}\n\n\/* Timeline Layout (Vertical connection line removed as requested) *\/\n.roots-timeline {\n    position: relative;\n    padding-left: 0;\n}\n\n\/* Interactive Timeline Item *\/\n.roots-timeline .timeline-item {\n    position: relative;\n    padding-left: 45px; \/* Clean spacing directly from left alignment *\/\n    padding-bottom: 45px;\n    cursor: pointer; \/* Clickable timeline navigation *\/\n    opacity: 0.35; \/* Dimmed by default *\/\n    transform: translateX(0);\n    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n\/* Active Timeline Focus State *\/\n.roots-timeline .timeline-item.active {\n    opacity: 1; \/* Fully illuminated *\/\n    transform: translateX(6px); \/* Elegant slide-in focus animation *\/\n}\n\n.timeline-item:last-child {\n    padding-bottom: 0;\n}\n\n\/* Customized Music Symbol Timeline Markers *\/\n.timeline-marker {\n    position: absolute;\n    left: 0; \/* Aligned directly to left edge *\/\n    top: 2px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background-color: #050505;\n    border: 1.5px solid rgba(197, 168, 128, 0.4);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: rgba(197, 168, 128, 0.5);\n    z-index: 2;\n    box-sizing: border-box;\n    transition: border-color 0.4s ease, color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;\n}\n\n\/* Glow when parent item is active *\/\n.roots-timeline .timeline-item.active .timeline-marker {\n    border-color: #c5a880;\n    color: #c5a880;\n    background-color: #111;\n    box-shadow: 0 0 12px rgba(197, 168, 128, 0.4);\n}\n\n.timeline-marker svg {\n    width: 12px;\n    height: 12px;\n}\n\n.timeline-title {\n    font-size: 0.95rem;\n    font-weight: 600;\n    letter-spacing: 0.5px;\n    margin: 0 0 10px 0;\n    color: #ffffff;\n    text-transform: uppercase;\n}\n\n.timeline-desc {\n    color: #a0a0a0;\n    font-size: 0.95rem;\n    line-height: 1.6;\n    margin: 0;\n    position: relative;\n    max-height: 4.8em;\n    overflow: hidden;\n    transition: color 0.4s ease;\n}\n\n.timeline-desc::after {\n    content: '';\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 1.8em;\n    pointer-events: none;\n    background: linear-gradient(180deg, transparent, #050505);\n}\n\n.timeline-item.is-expanded .timeline-desc {\n    max-height: 80em;\n    overflow: visible;\n}\n\n.timeline-item.is-expanded .timeline-desc::after {\n    display: none;\n}\n\n.roots-read-more,\n.roots-read-more:visited {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 12px;\n    padding: 0 0 5px !important;\n    border: 0 !important;\n    border-bottom: 1px solid rgba(197, 168, 128, 0.52) !important;\n    border-radius: 0 !important;\n    color: #c5a880 !important;\n    background: transparent !important;\n    font-family: 'Inter', sans-serif !important;\n    font-size: 9px !important;\n    font-weight: 600 !important;\n    letter-spacing: 0.16em !important;\n    line-height: 1.3 !important;\n    text-decoration: none !important;\n    text-transform: uppercase;\n    text-shadow: none !important;\n    box-shadow: none !important;\n    outline: none !important;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent !important;\n}\n\n.roots-read-more::after {\n    content: '+';\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 1;\n}\n\n.timeline-item.is-expanded .roots-read-more::after {\n    content: '\u2212';\n}\n\n.roots-read-more:hover,\n.roots-read-more:focus,\n.roots-read-more:focus-visible,\n.roots-read-more:active {\n    border-bottom-color: #ffffff !important;\n    color: #ffffff !important;\n    background: transparent !important;\n    outline: none !important;\n}\n\n.roots-read-more[hidden] {\n    display: none !important;\n}\n\n.roots-timeline .timeline-item.active .timeline-desc {\n    color: #e5e5e5;\n}\n\n.timeline-desc.italic {\n    font-style: italic;\n}\n\n.timeline-desc.bold-light {\n    font-weight: 500;\n}\n\n\/* New styling for bullet points in the timeline *\/\n.timeline-list {\n    margin: 5px 0 0 0;\n    padding-left: 18px;\n}\n\n.timeline-list li {\n    margin-bottom: 6px;\n}\n\n.timeline-list li:last-child {\n    margin-bottom: 0;\n}\n\n\n\/* Right Column: Image Slider Wrapper *\/\n.roots-image-col {\n    flex: 1;\n    min-width: 300px;\n    display: flex;\n    justify-content: flex-end;\n}\n\n.roots-image-slider-wrapper {\n    width: 100%;\n    max-width: 480px;\n    aspect-ratio: 3 \/ 4;\n    border: 1px solid rgba(197, 168, 128, 0.15); \/* Soft gold-accented frame border *\/\n    background-color: #111;\n    position: relative;\n    overflow: hidden;\n}\n\n\/* Individual Image Slides *\/\n.roots-slide {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-size: cover;\n    background-position: center;\n    opacity: 0;\n    z-index: 1;\n    display: flex;\n    align-items: flex-end;\n    padding: 40px;\n    box-sizing: border-box;\n    transition: opacity 0.8s ease-in-out;\n}\n\n\/* Dark gradient overlay to secure text readability *\/\n.roots-slide::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,0.95) 100%);\n    z-index: 1;\n}\n\n.roots-slide.active {\n    opacity: 1;\n    z-index: 2;\n}\n\n.roots-image-caption {\n    font-family: 'Playfair Display', serif;\n    font-style: italic;\n    font-size: 1.15rem;\n    line-height: 1.6;\n    color: #ffffff;\n    margin: 0;\n    position: relative;\n    z-index: 2; \/* Sits safely above the dark gradient overlay *\/\n}\n\n\/* --- Slide Progress Bar --- *\/\n.roots-progress-bar-container {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 3px;\n    background-color: rgba(255, 255, 255, 0.1);\n    z-index: 10;\n}\n\n.roots-progress-bar {\n    height: 100%;\n    width: 0;\n    background-color: #c5a880; \/* Elegant gold progress filler *\/\n}\n\n\/* Clean CSS Animation Class for the Progress bar (Runs over 6s) *\/\n.roots-progress-bar.animating {\n    animation: fillProgress 6s linear forwards;\n}\n\n@keyframes fillProgress {\n    0% { width: 0%; }\n    100% { width: 100%; }\n}\n\n\n\/* --- Bottom Row: Stat Cards --- *\/\n.roots-stats-row {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 25px;\n}\n\n.stat-card {\n    padding: 40px 30px;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    border: 1px solid rgba(197, 168, 128, 0.1); \n    transition: border-color 0.3s ease;\n}\n\n.stat-card:hover {\n    border-color: rgba(197, 168, 128, 0.3);\n}\n\n.stat-card.dark {\n    background-color: #0a0a0a;\n}\n\n.stat-card.light {\n    background-color: #ffffff;\n    color: #000000;\n    border: none;\n}\n\n.stat-icon {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n}\n\n.stat-title {\n    font-family: 'Playfair Display', serif;\n    font-size: 2rem;\n    font-weight: 400;\n    margin: 0;\n}\n\n.stat-desc {\n    color: #a0a0a0;\n    font-size: 0.95rem;\n    line-height: 1.6;\n    margin: 0;\n}\n\n.stat-card.light .stat-desc {\n    color: #333333;\n}\n\n\n\/* --- Responsive Adjustments --- *\/\n@media (max-width: 992px) {\n    .roots-top-row {\n        flex-direction: column;\n        gap: 60px;\n    }\n    .roots-image-col {\n        justify-content: flex-start;\n    }\n    .roots-image-slider-wrapper {\n        max-width: 100%;\n        aspect-ratio: 4 \/ 3;\n    }\n    .roots-stats-row {\n        grid-template-columns: repeat(2, 1fr);\n    }\n    .shape-instrument-violin {\n        width: 200px;\n        top: 25%;\n        left: 60%;\n    }\n}\n\n@media (max-width: 768px) {\n    .roots-section-wrapper {\n        padding: 80px 6%; \/* Comfortable spacing on mobile scrolls *\/\n    }\n    .roots-stats-row {\n        grid-template-columns: 1fr;\n    }\n    .stat-card {\n        padding: 30px 20px; \/* Scaled down card padding *\/\n        gap: 15px;\n    }\n    .stat-title {\n        font-size: 1.6rem;\n    }\n    .stat-desc {\n        font-size: 0.85rem;\n    }\n    .shape-instrument-violin {\n        display: none; \/* Hide background instrument on mobile for cleaner spacing *\/\n    }\n    .roots-staff-lines {\n        display: none;\n    }\n}\n\n@media (max-width: 576px) {\n    .roots-heading {\n        font-size: 2.2rem; \/* Sized down so title fits comfortably without broken wraps *\/\n    }\n    .roots-heading-line {\n        margin: 15px 0 25px 0;\n    }\n    .roots-intro {\n        font-size: 0.95rem;\n        margin-bottom: 35px;\n    }\n}\n\n@media (max-width: 480px) {\n    .roots-timeline .timeline-item {\n        padding-left: 35px; \/* Squeezes margin in slightly on narrow viewports *\/\n        padding-bottom: 35px;\n    }\n    .timeline-title {\n        font-size: 0.85rem;\n    }\n    .timeline-desc {\n        font-size: 0.85rem;\n    }\n    .roots-slide {\n        padding: 25px; \/* Better text flow in the touch slides *\/\n    }\n    .roots-image-caption {\n        font-size: 1rem;\n    }\n}\n\n\/* =====================================================\n   MOBILE-ONLY LAYOUT REFINEMENT\n   Keeps every original picture, timeline item and stat.\n   ===================================================== *\/\n@media (max-width: 768px) {\n    .roots-section-wrapper {\n        padding: 64px 18px;\n    }\n\n    .roots-top-row {\n        display: grid;\n        grid-template-columns: minmax(0, 1fr);\n        gap: 0;\n        margin-bottom: 46px;\n    }\n\n    \/* Flatten the content wrapper so the picture can sit before the timeline. *\/\n    .roots-history-content {\n        display: contents;\n        min-width: 0;\n    }\n\n    .roots-heading {\n        grid-row: 1;\n        font-size: clamp(2.35rem, 11vw, 3.1rem);\n        line-height: 1.04;\n    }\n\n    .roots-heading-line {\n        grid-row: 2;\n        width: 48px;\n        margin: 15px 0 22px;\n    }\n\n    .roots-intro {\n        grid-row: 3;\n        max-width: none;\n        margin: 0 0 28px;\n        font-size: 0.88rem;\n        line-height: 1.65;\n    }\n\n    .roots-image-col {\n        grid-row: 4;\n        width: 100%;\n        min-width: 0;\n        margin-bottom: 18px;\n        justify-content: stretch;\n    }\n\n    .roots-image-slider-wrapper {\n        width: 100%;\n        max-width: none;\n        aspect-ratio: 4 \/ 3;\n    }\n\n    \/* Show the entire picture on mobile instead of cropping it. *\/\n    .roots-slide {\n        padding: 20px;\n        background-color: #10100f;\n        background-position: center;\n        background-repeat: no-repeat;\n        background-size: contain;\n    }\n\n    .roots-slide::before {\n        background: linear-gradient(to bottom, rgba(0,0,0,0) 48%, rgba(0,0,0,0.94) 100%);\n    }\n\n    .roots-image-caption {\n        font-size: 0.92rem;\n        line-height: 1.45;\n    }\n\n    \/* All original eras remain; users swipe between the complete cards. *\/\n    .roots-timeline {\n        grid-row: 5;\n        display: grid;\n        grid-auto-flow: column;\n        grid-auto-columns: minmax(84vw, 300px);\n        gap: 12px;\n        width: calc(100% + 36px);\n        margin: 0 -18px;\n        padding: 0 18px 12px;\n        overflow-x: auto;\n        overscroll-behavior-inline: contain;\n        scroll-snap-type: x mandatory;\n        scrollbar-width: none;\n    }\n\n    .roots-timeline::-webkit-scrollbar {\n        display: none;\n    }\n\n    .roots-timeline .timeline-item,\n    .roots-timeline .timeline-item:last-child {\n        min-width: 0;\n        min-height: 245px;\n        padding: 24px 20px 24px 54px;\n        border: 1px solid rgba(197, 168, 128, 0.14);\n        background: rgba(255, 255, 255, 0.018);\n        opacity: 0.68;\n        transform: none;\n        scroll-snap-align: center;\n    }\n\n    .roots-timeline .timeline-item.active {\n        border-color: rgba(197, 168, 128, 0.48);\n        opacity: 1;\n        transform: none;\n    }\n\n    .timeline-marker {\n        top: 23px;\n        left: 18px;\n    }\n\n    .timeline-title {\n        margin-bottom: 9px;\n        font-size: 0.8rem;\n        line-height: 1.4;\n    }\n\n    .timeline-desc {\n        font-size: 0.78rem;\n        line-height: 1.62;\n        max-height: 4.86em;\n    }\n\n    .timeline-desc::after {\n        background: linear-gradient(180deg, transparent, #090909);\n    }\n\n    .timeline-item.is-expanded .timeline-desc {\n        max-height: 100em;\n    }\n\n    .timeline-list {\n        padding-left: 16px;\n    }\n\n    .timeline-list li {\n        margin-bottom: 4px;\n    }\n\n    \/* Preserve all three cards in a comfortable one-card-and-a-peek rail. *\/\n    .roots-stats-row {\n        display: grid;\n        grid-auto-flow: column;\n        grid-auto-columns: minmax(80vw, 290px);\n        grid-template-columns: none;\n        gap: 12px;\n        width: calc(100% + 36px);\n        margin: 0 -18px;\n        padding: 0 18px 12px;\n        overflow-x: auto;\n        overscroll-behavior-inline: contain;\n        scroll-snap-type: x mandatory;\n        scrollbar-width: none;\n    }\n\n    .roots-stats-row::-webkit-scrollbar {\n        display: none;\n    }\n\n    .stat-card {\n        min-height: 235px;\n        padding: 28px 24px;\n        scroll-snap-align: start;\n    }\n}\n\n@media (max-width: 380px) {\n    .roots-section-wrapper {\n        padding-right: 14px;\n        padding-left: 14px;\n    }\n\n    .roots-timeline,\n    .roots-stats-row {\n        width: calc(100% + 28px);\n        margin-right: -14px;\n        margin-left: -14px;\n        padding-right: 14px;\n        padding-left: 14px;\n    }\n\n    .roots-timeline {\n        grid-auto-columns: 88vw;\n    }\n\n    .roots-stats-row {\n        grid-auto-columns: 84vw;\n    }\n}\n<\/style>\n\n<!-- HTML Structure -->\n<div class=\"roots-section-wrapper\" id=\"story\">\n    \n    <!-- Background Watermarks -->\n    <div class=\"roots-bg-elements\">\n        <!-- Blueprint style violin outlines behind layout -->\n        <svg class=\"roots-bg-instrument shape-instrument-violin\" viewBox=\"0 0 200 400\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M100,20 C105,20 108,25 104,30 C100,35 94,30 100,20 Z\" \/>\n            <line x1=\"88\" y1=\"50\" x2=\"98\" y2=\"50\" \/>\n            <line x1=\"102\" y1=\"58\" x2=\"112\" y2=\"58\" \/>\n            <line x1=\"88\" y1=\"66\" x2=\"98\" y2=\"66\" \/>\n            <path d=\"M97,35 L97,110 M103,35 L103,110\" \/>\n            <path d=\"M96,110 C80,110 65,125 65,150 C65,175 80,190 85,195\" \/>\n            <path d=\"M104,110 C120,110 135,125 135,150 C135,175 120,190 115,195\" \/>\n            <path d=\"M85,195 C75,200 75,220 85,225\" \/>\n            <path d=\"M115,195 C125,200 125,220 115,225\" \/>\n            <path d=\"M85,225 C75,235 60,250 60,285 C60,330 80,355 100,355\" \/>\n            <path d=\"M115,225 C125,235 140,250 140,285 C140,330 120,355 100,355\" \/>\n            <path d=\"M83,230 C80,225 78,235 81,245 C83,252 86,252 84,260 C83,265 80,265 81,260\" stroke-width=\"1.8\" \/>\n            <path d=\"M117,230 C120,225 122,235 119,245 C117,252 114,252 116,260 C117,265 120,265 119,260\" stroke-width=\"1.8\" \/>\n            <path d=\"M100,305 L94,342 L106,342 Z\" \/>\n        <\/svg>\n\n        <!-- Faint Manuscript Staff lines behind bottom grid -->\n        <div class=\"roots-staff-lines\">\n            <div class=\"roots-staff-line\"><\/div>\n            <div class=\"roots-staff-line\"><\/div>\n            <div class=\"roots-staff-line\"><\/div>\n            <div class=\"roots-staff-line\"><\/div>\n            <div class=\"roots-staff-line\"><\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"roots-container\">\n        \n        <!-- Top Row -->\n        <div class=\"roots-top-row\">\n            \n            <!-- Left: History Timeline -->\n            <div class=\"roots-history-content\">\n                <h2 class=\"roots-heading\">Tracing Our Roots<\/h2>\n                <div class=\"roots-heading-line\"><\/div>\n                \n                <p class=\"roots-intro\">\n                    The story of Helen's Music Centre is inextricably linked with the history of music in Kuching. In 1977, <strong>Madam Helen<\/strong> established the <strong>Kuching Kawai Music School (KKMS)<\/strong>.\n                <\/p>\n\n                <div class=\"roots-timeline\">\n                    <!-- Item 1 (Active by default initially) -->\n                    <div class=\"timeline-item active\">\n                        <div class=\"timeline-marker\">\n                            <!-- Clean Stylized Classical Eighth Note SVG -->\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <path d=\"M9 18V5l12-2v13\"><\/path>\n                                <circle cx=\"6\" cy=\"18\" r=\"3\"><\/circle>\n                                <circle cx=\"18\" cy=\"16\" r=\"3\"><\/circle>\n                            <\/svg>\n                        <\/div>\n                        <p class=\"timeline-title\">1977 \u2014 THE FOUNDATION<\/p>\n                        <p class=\"timeline-desc italic\">Kuching Kawai Music School was established with a mission to provide quality music education to the Kuching community. As one of the city's longest-standing music schools, it has nurtured generations of musicians through structured music education, dedicated teaching, and a passion for inspiring a lifelong love of music.<\/p>\n                    <\/div>\n\n                    <!-- Item 2 -->\n                    <div class=\"timeline-item\">\n                        <div class=\"timeline-marker\">\n                            <!-- Beamed Double Notes SVG -->\n                            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                                <path d=\"M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z\" \/>\n                            <\/svg>\n                        <\/div>\n                        <p class=\"timeline-title\">1990 \u2013 2010 \u2014 THE DEVELOPMENT<\/p>\n                        <p class=\"timeline-desc\">During this period, the school expanded its curriculum beyond piano by introducing a wider range of music programmes, including Vocal, Guitar, and Violin.<\/p>\n                    <\/div>\n\n                    <!-- Item 3 -->\n                    <div class=\"timeline-item\">\n                        <div class=\"timeline-marker\">\n                            <!-- Elegant Treble Clef SVG -->\n                            <svg viewBox=\"0 0 100 100\" fill=\"currentColor\">\n                                <path d=\"M51.5,93.5c-1.1,0-2.2-0.2-3.1-0.7c-3.1-1.7-4.6-5.1-4.2-9.4c0.2-2.1,1.1-4.2,2.7-5.9c1.9-2.1,4.5-3.3,7.3-3.3c0.4,0,0.8,0,1.2,0.1c0.7-3.4,1.4-8,2.1-13.6C44.3,58.7,33.1,51.8,33.1,39c0-8.9,6.7-16.1,15.1-16.1c3.1,0,6.1,1,8.4,2.8c1.3-4.3,2.4-9.3,3.1-14.5c0.2-1.3,1.2-2.2,2.5-2.2c0.2,0,0.4,0,0.6,0c1.4,0.2,2.3,1.5,2.1,2.9c-0.8,5.4-1.9,10.6-3.2,15.1c4.5,3.3,7.1,8.3,7.1,13.8c0,7.2-4.5,13.2-11.4,15.1c-0.6,4.6-1.3,8.7-1.8,11.8c6.6,1.4,11.4,6.7,11.4,12.9c0,7.1-5.9,12.8-13.2,12.8 C51.7,93.5,51.6,93.5,51.5,93.5z M50.4,79.2c-1.3,0-2.5,0.6-3.4,1.6c-0.8,0.9-1.2,2-1.3,3c-0.2,2.1,0.5,3.7,1.9,4.4 c1.1,0.6,2.6,0.5,3.9-0.3c1.7-1,2.7-3.2,2.7-5.6C53,80.3,51.7,79.3,50.4,79.2z M48.2,27.9c-5.6,0-10.1,5-10.1,11.1 c0,8.3,7.8,13.3,16.5,15.4c-0.6,4-1.2,7.5-1.7,10.2C44.7,63,40.1,58.8,40.1,53.2c0-1.4,1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5 c0,2.6,2.1,4.7,4.8,5.2c0.4-2.2,0.8-4.9,1.3-7.9c-4.6-1.8-8-5.7-8-10.3c0-4.5,3.1-8.3,7.2-9.1C49.7,28.1,48.9,27.9,48.2,27.9z M57,36.5c0-3.3-1.6-6.4-4.3-8.3c-2.4,1.1-4.1,3.4-4.1,6.1c0,3.1,2.4,5.6,5.5,5.8C55.7,39.3,57,38,57,36.5z M57.3,66 c-0.5-0.1-1-0.2-1.5-0.2c-3.1,0-5.9,1.7-7.4,4.5c0.5-2.5,1-5.3,1.4-8.3c4.1-0.9,7.6-3.2,9.6-6.4c0.5,3.1,0.8,5.9,1,8.2 C60.4,64.4,59,65.4,57.3,66z\"\/>\n                            <\/svg>\n                        <\/div>\n                        <p class=\"timeline-title\">2025 \u2013 PRESENT \u2014 THE BRAND<\/p>\n                        <!-- Replaced <p> with <div> to hold the list cleanly without breaking HTML standards -->\n                        <div class=\"timeline-desc bold-light\">\n                            <ul class=\"timeline-list\">\n                                <li>Rebranded as Helen's Music Centre by KKMS.<\/li>\n                                <li>A new image with the same trusted legacy.<\/li>\n                                <li>Continuing the vision of Madam Helen Bong Sut Moi.<\/li>\n                                <li>Expanded our programmes with Drums, Ukulele, Cello, Viola, and more.<\/li>\n                                <li>Now offering a wider range of music education for all ages.<\/li>\n                                <li>Proudly serving a growing community of 180+ active students.<\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Right: Interactive Synchronized Slide Image Column -->\n            <div class=\"roots-image-col\">\n                <div class=\"roots-image-slider-wrapper\">\n                    <!-- Slide 1 (Active initially) -->\n                    <div class=\"roots-slide active\" style=\"background-image: url('https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/0C6A5569-scaled.jpg');\">\n                        <p class=\"roots-image-caption\">\"In music, we find the discipline of the mind and the freedom of the soul.\"<\/p>\n                    <\/div>\n                    <!-- Slide 2 -->\n                    <div class=\"roots-slide\" style=\"background-image: url('https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/0C6A5807-1-scaled.jpg');\">\n                        <p class=\"roots-image-caption\">\"Expanding our horizons to nurture strings, woodwinds, and classical vocal brilliance.\"<\/p>\n                    <\/div>\n                    <!-- Slide 3 -->\n                    <div class=\"roots-slide\" style=\"background-image: url('https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/0C6A5828-scaled.jpg');\">\n                        <p class=\"roots-image-caption\">\"Honoring our heritage while inspiring the next generation of musical pioneers.\"<\/p>\n                    <\/div>\n\n                    <!-- Sleek Slide Transition Progress Bar -->\n                    <div class=\"roots-progress-bar-container\">\n                        <div class=\"roots-progress-bar animate-bar\" id=\"rootsProgressBar\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n\n        <!-- Bottom Row: Stat Cards -->\n        <div class=\"roots-stats-row\">\n            \n            <!-- Card 1 -->\n            <div class=\"stat-card dark\">\n                <div class=\"stat-icon\">\n                    <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#c5a880\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n                        <path d=\"M12 8v8M9 11h6\"><\/path>\n                        <path d=\"M12 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2z\"><\/path>\n                    <\/svg>\n                <\/div>\n                <h3 class=\"stat-title\">ABRSM <\/h3>\n                <p class=\"stat-desc\">\nWith over 30 years of experience in ABRSM examinations, we continue to nurture confident and successful musicians.\n.<\/p>\n            <\/div>\n\n            <!-- Card 2 -->\n            <div class=\"stat-card light\">\n                <div class=\"stat-icon\">\n                    <!-- Classical Lyre Instrument SVG -->\n                    <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <path d=\"M5 4h14 M5 4v8c0 3.87 3.13 7 7 7s7-3.13 7-7V4 M9 4v15 M15 4v15 M12 4v15 M12 21a2 2 0 1 0 0-4 2 2 0 0 0 0 4z\" \/>\n                    <\/svg>\n                <\/div>\n                <h3 class=\"stat-title\">100% Pass Rate<\/h3>\n                <p class=\"stat-desc\">Every student we have ever put forward for ABRSM examinations has successfully passed.<\/p>\n            <\/div>\n\n            <!-- Card 3 -->\n            <div class=\"stat-card dark\">\n                <div class=\"stat-icon\">\n                    <!-- Classical Trumpet SVG -->\n                    <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#c5a880\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <path d=\"M3 13h12a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1H3M15 10.5h3 M18 8l4-4v12l-4-4\" \/>\n                        <circle cx=\"6\" cy=\"11\" r=\"1.5\" \/>\n                        <circle cx=\"9\" cy=\"11\" r=\"1.5\" \/>\n                        <circle cx=\"12\" cy=\"11\" r=\"1.5\" \/>\n                    <\/svg>\n                <\/div>\n                <h3 class=\"stat-title\">Distinctions<\/h3>\n                <p class=\"stat-desc\">Every year, about 50% of our students achieve Distinction, reflecting our commitment to quality music education.<\/p>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<!-- Synchronized Era Slider Javascript -->\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    const rootsWrapper = document.querySelector('.roots-section-wrapper');\n    const timelineItems = document.querySelectorAll('.roots-timeline .timeline-item');\n    const slides = document.querySelectorAll('.roots-image-slider-wrapper .roots-slide');\n    const progressBar = document.getElementById('rootsProgressBar');\n    let currentEra = 0;\n    let eraInterval;\n    let lastTouchEnd = 0;\n\n    \/\/ Block double-click and double-tap zoom without disabling page scrolling.\n    rootsWrapper.addEventListener('dblclick', function(event) {\n        event.preventDefault();\n    }, { passive: false });\n\n    rootsWrapper.addEventListener('touchend', function(event) {\n        const now = Date.now();\n        if (now - lastTouchEnd <= 320) event.preventDefault();\n        lastTouchEnd = now;\n    }, { passive: false });\n\n    \/\/ Increased timer to 6s so users have enough time to read the new bullet points\n    const cycleTime = 6000; \n\n    function updateReadMoreButtons() {\n        timelineItems.forEach(item => {\n            const description = item.querySelector('.timeline-desc');\n            const button = item.querySelector('.roots-read-more');\n            if (!description || !button) return;\n\n            if (item.classList.contains('is-expanded')) {\n                button.hidden = false;\n                return;\n            }\n\n            button.hidden = description.scrollHeight <= description.clientHeight + 2;\n        });\n    }\n\n    \/\/ Add a non-destructive Read more control to every original timeline item.\n    timelineItems.forEach((item, index) => {\n        const button = document.createElement('button');\n        button.type = 'button';\n        button.className = 'roots-read-more';\n        button.textContent = 'Read more';\n        button.setAttribute('aria-expanded', 'false');\n        item.appendChild(button);\n\n        button.addEventListener('click', event => {\n            event.stopPropagation();\n            if (currentEra !== index) showEra(index);\n\n            const expanded = item.classList.toggle('is-expanded');\n            button.textContent = expanded ? 'Show less' : 'Read more';\n            button.setAttribute('aria-expanded', expanded ? 'true' : 'false');\n\n            if (expanded) {\n                clearInterval(eraInterval);\n            } else {\n                resetEraSlider();\n            }\n\n            updateReadMoreButtons();\n        });\n    });\n\n    function showEra(index) {\n        \/\/ Reset active state classes\n        timelineItems.forEach(item => item.classList.remove('active'));\n        slides.forEach(slide => slide.classList.remove('active'));\n\n        timelineItems.forEach((item, itemIndex) => {\n            if (itemIndex === index || !item.classList.contains('is-expanded')) return;\n            item.classList.remove('is-expanded');\n            const button = item.querySelector('.roots-read-more');\n            if (button) {\n                button.textContent = 'Read more';\n                button.setAttribute('aria-expanded', 'false');\n            }\n        });\n\n        \/\/ Apply active states to target index\n        timelineItems[index].classList.add('active');\n        slides[index].classList.add('active');\n        currentEra = index;\n\n        \/\/ Keep the active era visible inside the mobile horizontal rail.\n        if (window.innerWidth <= 768) {\n            const rail = timelineItems[index].parentElement;\n            rail.scrollTo({\n                left: timelineItems[index].offsetLeft - 18,\n                behavior: 'smooth'\n            });\n        }\n\n        \/\/ Restart progress bar animation smoothly via CSS Reflow trick\n        progressBar.classList.remove('animating');\n        void progressBar.offsetWidth; \/\/ Force a DOM reflow calculation to reset CSS animation\n        progressBar.classList.add('animating');\n    }\n\n    function nextEra() {\n        let next = (currentEra + 1) % timelineItems.length;\n        showEra(next);\n    }\n\n    function startEraSlider() {\n        eraInterval = setInterval(nextEra, cycleTime);\n    }\n\n    function resetEraSlider() {\n        clearInterval(eraInterval);\n        startEraSlider();\n    }\n\n    \/\/ Interactive clicking navigation\n    timelineItems.forEach((item, index) => {\n        item.addEventListener('click', () => {\n            showEra(index);\n            resetEraSlider(); \/\/ Reset automatic timer upon manual click\n        });\n    });\n\n    \/\/ Initialize first animation cycle\n    showEra(0);\n    startEraSlider();\n    window.requestAnimationFrame(updateReadMoreButtons);\n    window.addEventListener('resize', updateReadMoreButtons);\n    window.addEventListener('load', updateReadMoreButtons, { once: true });\n});\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-67df09d e-con-full e-flex e-con e-parent\" data-id=\"67df09d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-061a337 elementor-widget elementor-widget-html\" data-id=\"061a337\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Import Google Fonts (if not already loaded by previous widgets) -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@400;500&display=swap');\n\n\/* --- Main Wrapper --- *\/\n.disciplines-section-wrapper {\n    position: relative; \/* Anchor for background music accents *\/\n    background-color: #050505; \/* Deep black background *\/\n    color: #ffffff;\n    font-family: 'Inter', sans-serif;\n    padding: 120px 5%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    overflow: hidden;\n}\n\n.disciplines-container {\n    max-width: 1200px;\n    width: 100%;\n    position: relative;\n    z-index: 2; \/* Sits above background layer *\/\n}\n\n\/* --- Subtle Background Music Accents --- *\/\n.disciplines-bg-elements {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 1;\n    overflow: hidden;\n}\n\n.bg-music-accent {\n    position: absolute;\n    color: rgba(197, 168, 128, 0.08); \/* Faint gold instrument-brass watermark *\/\n    pointer-events: none;\n}\n\n\/* Faint crescendo\/decrescendo expression wedge in bottom-left *\/\n.accent-crescendo {\n    width: 350px;\n    height: auto;\n    bottom: 5%;\n    left: -5%;\n    transform: rotate(-8deg);\n}\n\n\/* Slow-drifting eighth note in top-right *\/\n.accent-note {\n    width: 140px;\n    height: auto;\n    top: 10%;\n    right: -2%;\n    transform: rotate(12deg);\n    animation: driftRest 18s ease-in-out infinite alternate;\n}\n\n@keyframes driftRest {\n    0% { transform: translateY(0) rotate(12deg); }\n    100% { transform: translateY(12px) rotate(18deg); }\n}\n\n\/* --- Header Section --- *\/\n.disciplines-header {\n    text-align: center;\n    margin-bottom: 75px;\n}\n\n\/* Minimal G-Clef \/ Note Accent over Header *\/\n.disciplines-header-accent {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    margin-bottom: 18px;\n    color: #c5a880; \/* Premium warm gold *\/\n}\n\n.header-music-icon {\n    width: 28px;\n    height: 28px;\n}\n\n.disciplines-title {\n    font-family: 'Playfair Display', serif;\n    font-size: 3.5rem;\n    font-weight: 400;\n    margin: 0 0 15px 0;\n    letter-spacing: 0.5px;\n}\n\n.disciplines-subtitle {\n    color: #a0a0a0;\n    font-size: 1.1rem;\n    line-height: 1.6;\n    margin: 0;\n    font-weight: 400;\n}\n\n\/* --- Grid Layout --- *\/\n.disciplines-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 40px;\n}\n\n\/* --- Card Styling --- *\/\n.discipline-card {\n    display: flex;\n    flex-direction: column;\n    text-decoration: none; \/* In case entire card becomes a link *\/\n    color: inherit;\n}\n\n\/* Zoom viewport for standard image aspect ratio *\/\n.discipline-image-viewport {\n    width: 100%;\n    aspect-ratio: 1.15 \/ 1; \/* Creates standard rectangular format *\/\n    overflow: hidden;\n    border: 1px solid #222222;\n    margin-bottom: 25px;\n    background-color: #111;\n    transition: border-color 0.4s ease;\n}\n\n.discipline-image {\n    width: 100%;\n    height: 100%;\n    background-size: cover;\n    background-position: center;\n    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n.discipline-card-title {\n    font-family: 'Playfair Display', serif;\n    font-size: 2rem;\n    font-weight: 400;\n    margin: 0 0 15px 0;\n    letter-spacing: 0.5px;\n    transition: color 0.3s ease;\n}\n\n.discipline-card-desc {\n    color: #a0a0a0;\n    font-size: 0.95rem;\n    line-height: 1.6;\n    margin: 0 0 25px 0;\n    flex-grow: 1; \/* Pushes tags cleanly to the card bottom *\/\n}\n\n.discipline-card-desc strong {\n    color: #ffffff;\n    font-weight: 600;\n}\n\n\/* --- Tags \/ Badges --- *\/\n.discipline-tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n}\n\n.discipline-tag {\n    background-color: rgba(197, 168, 128, 0.02);\n    color: #c5a880; \/* Elegant gold typography *\/\n    font-size: 0.7rem;\n    font-weight: 600;\n    letter-spacing: 0.5px;\n    text-transform: uppercase;\n    padding: 8px 14px;\n    border: 1px solid rgba(197, 168, 128, 0.2); \/* Fine golden boundary *\/\n    transition: all 0.3s ease;\n}\n\n\/* --- Hover State Interactions --- *\/\n.discipline-card:hover .discipline-image-viewport {\n    border-color: #c5a880; \/* Card border changes to gold *\/\n}\n\n.discipline-card:hover .discipline-image {\n    transform: scale(1.05); \/* Gentle parallax zoom *\/\n}\n\n.discipline-card:hover .discipline-card-title {\n    color: #c5a880; \/* Title highlights in gold *\/\n}\n\n.discipline-card:hover .discipline-tag {\n    background-color: rgba(197, 168, 128, 0.08);\n    border-color: rgba(197, 168, 128, 0.45);\n}\n\n\/* --- Responsive Adjustments --- *\/\n@media (max-width: 992px) {\n    .disciplines-grid {\n        grid-template-columns: repeat(2, 1fr);\n        gap: 50px 30px;\n    }\n    .disciplines-title {\n        font-size: 3rem;\n    }\n}\n\n@media (max-width: 768px) {\n    .disciplines-section-wrapper {\n        padding: 80px 6%; \/* Restores comfortable scrolling on mobile screens *\/\n    }\n    .disciplines-header {\n        margin-bottom: 45px; \/* Brings cards closer to the header for tight groupings *\/\n    }\n    .disciplines-grid {\n        grid-template-columns: 1fr;\n        gap: 40px;\n    }\n    .disciplines-title {\n        font-size: 2.5rem;\n    }\n    .disciplines-subtitle {\n        font-size: 1rem;\n    }\n    .discipline-image-viewport {\n        aspect-ratio: 4 \/ 3; \/* Optimized height on mobile layout *\/\n        margin-bottom: 20px;\n    }\n    .discipline-card-title {\n        font-size: 1.6rem; \/* Resolves hierarchical conflicts by scaling titles under headings *\/\n        margin-bottom: 12px;\n    }\n    .accent-crescendo, .accent-note {\n        display: none; \/* Hide secondary background assets on phone displays *\/\n    }\n}\n\n@media (max-width: 576px) {\n    .disciplines-title {\n        font-size: 2.2rem; \/* Clean wrap safety on small viewports *\/\n    }\n}\n<\/style>\n\n<!-- HTML Structure -->\n<div class=\"disciplines-section-wrapper\" id=\"disciplines\">\n    \n    <!-- Background Watermarks -->\n    <div class=\"disciplines-bg-elements\">\n        <!-- Faint crescendo notation block -->\n        <svg class=\"bg-music-accent accent-crescendo\" viewBox=\"0 0 100 100\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0.6\" stroke-linecap=\"round\">\n            <line x1=\"10\" y1=\"46\" x2=\"90\" y2=\"38\" \/>\n            <line x1=\"10\" y1=\"54\" x2=\"90\" y2=\"62\" \/>\n        <\/svg>\n\n        <!-- Faint floating eighth note -->\n        <svg class=\"bg-music-accent accent-note\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z\" \/>\n        <\/svg>\n    <\/div>\n\n    <div class=\"disciplines-container\">\n        \n        <!-- Header -->\n        <div class=\"disciplines-header\">\n            <!-- Sleek Classical Header Accent -->\n            <div class=\"disciplines-header-accent\">\n                <svg class=\"header-music-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M9 18V5l12-2v13\"><\/path>\n                    <circle cx=\"6\" cy=\"18\" r=\"3\"><\/circle>\n                    <circle cx=\"18\" cy=\"16\" r=\"3\"><\/circle>\n                <\/svg>\n            <\/div>\n            <h2 class=\"disciplines-title\">Academic Disciplines<\/h2>\n            <p class=\"disciplines-subtitle\">Comprehensive curriculum designed for all stages of musical maturity.<\/p>\n        <\/div>\n\n        <!-- Cards Grid -->\n        <div class=\"disciplines-grid\">\n            \n            <!-- Card 1: Instrumental -->\n            <div class=\"discipline-card\">\n                <div class=\"discipline-image-viewport\">\n                    <div class=\"discipline-image\" style=\"background-image: url('https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/0C6A5694-scaled.jpg');\"><\/div>\n                <\/div>\n                <h3 class=\"discipline-card-title\">Instrumental Performance<\/h3>\n                <p class=\"discipline-card-desc\">Individualized mastery of <strong>Piano, Violin, Viola, and Cello<\/strong>.<\/p>\n                <div class=\"discipline-tags\">\n                    <span class=\"discipline-tag\">GRADE 1-8<\/span>\n                    <span class=\"discipline-tag\">ARSM DIPLOMA<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- Card 2: Vocal -->\n            <div class=\"discipline-card\">\n                <div class=\"discipline-image-viewport\">\n                    <div class=\"discipline-image\" style=\"background-image: url('https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/0C6A6023-scaled.jpg');\"><\/div>\n                <\/div>\n                <h3 class=\"discipline-card-title\">Vocal Excellence<\/h3>\n                <p class=\"discipline-card-desc\">Focusing on <strong>Breath Control and Italianate Resonance<\/strong>.<\/p>\n                <div class=\"discipline-tags\">\n                    <span class=\"discipline-tag\">CLASSICAL<\/span>\n                    <span class=\"discipline-tag\">POP VOCAL<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- Card 3: Theory & Early Years -->\n            <div class=\"discipline-card\">\n                <div class=\"discipline-image-viewport\">\n                    <div class=\"discipline-image\" style=\"background-image: url('https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/0C6A6115-scaled.jpg');\"><\/div>\n                <\/div>\n                <h3 class=\"discipline-card-title\">Theory & Early Years<\/h3>\n                <p class=\"discipline-card-desc\">Foundation building through <strong>ABRSM Theory<\/strong> and <strong>Junior Music Course<\/strong>.<\/p>\n                <div class=\"discipline-tags\">\n                    <span class=\"discipline-tag\">JMC (AGES 4+)<\/span>\n                    <span class=\"discipline-tag\">ABRSM THEORY<\/span>\n                <\/div>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-14bbc48 e-con-full e-flex e-con e-parent\" data-id=\"14bbc48\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f872690 elementor-widget elementor-widget-html\" data-id=\"f872690\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Helen's Music Centre \u2014 single-screen portrait video showcase -->\n<!-- Paste this complete block into one Elementor HTML widget. -->\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap');\n\n.hmc-film,\n.hmc-film * {\n    box-sizing: border-box;\n}\n\n.hmc-film {\n    --film-black: #050505;\n    --film-panel: #0b0b0a;\n    --film-ivory: #f5f1e9;\n    --film-muted: #98938b;\n    --film-gold: #c5a880;\n    --film-line: rgba(197, 168, 128, 0.24);\n    position: relative;\n    isolation: isolate;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 100svh;\n    min-height: 600px;\n    max-height: 920px;\n    overflow: hidden;\n    padding: clamp(28px, 5vh, 58px) 5%;\n    color: var(--film-ivory);\n    background:\n        radial-gradient(circle at 76% 44%, rgba(197, 168, 128, 0.09), transparent 30%),\n        var(--film-black);\n    font-family: 'Inter', sans-serif;\n}\n\n.hmc-film::before {\n    content: '';\n    position: absolute;\n    z-index: -1;\n    top: 50%;\n    right: -15vw;\n    width: min(72vw, 900px);\n    aspect-ratio: 1;\n    border: 1px solid rgba(197, 168, 128, 0.08);\n    border-radius: 50%;\n    transform: translateY(-50%);\n    box-shadow:\n        0 0 0 80px rgba(197, 168, 128, 0.015),\n        0 0 0 160px rgba(197, 168, 128, 0.01);\n    pointer-events: none;\n}\n\n.hmc-film__inner {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);\n    gap: clamp(44px, 8vw, 120px);\n    align-items: center;\n    width: min(1180px, 100%);\n    height: 100%;\n    margin: 0 auto;\n}\n\n.hmc-film__copy {\n    max-width: 670px;\n}\n\n.hmc-film__eyebrow {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin: 0 0 clamp(14px, 2vh, 22px) !important;\n    color: var(--film-gold) !important;\n    font-size: 10px !important;\n    font-weight: 600 !important;\n    letter-spacing: 0.22em !important;\n    line-height: 1.3 !important;\n    text-transform: uppercase;\n}\n\n.hmc-film__eyebrow::before {\n    content: '';\n    width: 34px;\n    height: 1px;\n    flex: 0 0 auto;\n    background: currentColor;\n}\n\n.hmc-film__title {\n    max-width: 650px;\n    margin: 0 !important;\n    color: var(--film-ivory) !important;\n    font-family: 'Playfair Display', serif !important;\n    font-size: clamp(48px, 6.2vw, 86px) !important;\n    font-weight: 400 !important;\n    line-height: 0.96 !important;\n    letter-spacing: -0.035em !important;\n}\n\n.hmc-film__title em {\n    color: var(--film-gold) !important;\n    font-weight: 400 !important;\n}\n\n.hmc-film__intro {\n    max-width: 560px;\n    margin: clamp(20px, 3vh, 32px) 0 0 !important;\n    color: var(--film-muted) !important;\n    font-size: clamp(13px, 1.25vw, 15px) !important;\n    line-height: 1.75 !important;\n}\n\n.hmc-film__meta {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px 24px;\n    margin-top: clamp(22px, 3.5vh, 38px);\n    padding-top: clamp(18px, 2.5vh, 26px);\n    border-top: 1px solid var(--film-line);\n}\n\n.hmc-film__meta span {\n    color: #77736d !important;\n    font-size: 9px !important;\n    font-weight: 600 !important;\n    letter-spacing: 0.18em !important;\n    line-height: 1.4 !important;\n    text-transform: uppercase;\n}\n\n.hmc-film__meta strong {\n    margin-right: 6px;\n    color: var(--film-gold) !important;\n    font-weight: 600 !important;\n}\n\n.hmc-film__player-shell {\n    position: relative;\n    justify-self: end;\n    width: auto;\n    height: min(78svh, 760px);\n    max-width: 100%;\n    aspect-ratio: 9 \/ 16;\n    overflow: hidden;\n    border: 1px solid var(--film-line);\n    background: #000;\n    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.52);\n}\n\n.hmc-film__player-shell::before {\n    content: 'Helen\\'s Music Centre \u00b7 Full Film';\n    position: absolute;\n    z-index: 2;\n    top: 14px;\n    left: 14px;\n    max-width: calc(100% - 28px);\n    padding: 7px 9px;\n    border: 1px solid rgba(255, 255, 255, 0.2);\n    color: rgba(255, 255, 255, 0.84);\n    background: rgba(5, 5, 5, 0.55);\n    font-size: 8px;\n    font-weight: 600;\n    letter-spacing: 0.15em;\n    line-height: 1.3;\n    text-transform: uppercase;\n    backdrop-filter: blur(8px);\n    pointer-events: none;\n}\n\n.hmc-film__video {\n    display: block;\n    width: 100% !important;\n    height: 100% !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    border: 0 !important;\n    border-radius: 0 !important;\n    outline: 0 !important;\n    background: #000 !important;\n    object-fit: contain !important;\n    object-position: center !important;\n}\n\n.hmc-film__video:focus,\n.hmc-film__video:focus-visible {\n    outline: 1px solid var(--film-gold) !important;\n    outline-offset: -1px !important;\n    box-shadow: none !important;\n}\n\n\/* Prevent Elementor's default pink interaction colours inside this section. *\/\n.hmc-film a,\n.hmc-film button,\n.hmc-film video {\n    -webkit-tap-highlight-color: transparent !important;\n    text-shadow: none !important;\n    box-shadow: none !important;\n}\n\n.hmc-film ::selection {\n    color: #050505;\n    background: var(--film-gold);\n}\n\n@media (max-width: 760px) {\n    .hmc-film {\n        display: block;\n        height: 100svh;\n        min-height: 0;\n        max-height: none;\n        padding:\n            max(14px, env(safe-area-inset-top))\n            16px\n            max(14px, env(safe-area-inset-bottom));\n    }\n\n    .hmc-film::before {\n        top: 74%;\n        right: -70%;\n        width: 150vw;\n    }\n\n    .hmc-film__inner {\n        grid-template-columns: 1fr;\n        grid-template-rows: auto minmax(0, 1fr);\n        gap: clamp(12px, 2.4vh, 20px);\n        align-items: stretch;\n        height: 100%;\n    }\n\n    .hmc-film__copy {\n        max-width: none;\n    }\n\n    .hmc-film__eyebrow {\n        margin-bottom: 8px !important;\n        font-size: 8px !important;\n    }\n\n    .hmc-film__eyebrow::before {\n        width: 24px;\n    }\n\n    .hmc-film__title {\n        max-width: none;\n        font-size: clamp(31px, 9.5vw, 45px) !important;\n        line-height: 0.98 !important;\n    }\n\n    .hmc-film__intro {\n        display: -webkit-box;\n        margin-top: 10px !important;\n        overflow: hidden;\n        font-size: 11px !important;\n        line-height: 1.5 !important;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: 2;\n    }\n\n    .hmc-film__meta {\n        gap: 8px 16px;\n        margin-top: 10px;\n        padding-top: 9px;\n    }\n\n    .hmc-film__meta span {\n        font-size: 7px !important;\n        letter-spacing: 0.13em !important;\n    }\n\n    .hmc-film__player-shell {\n        justify-self: center;\n        align-self: stretch;\n        width: auto;\n        height: 100%;\n        max-height: 100%;\n        max-width: 100%;\n        margin: 0 auto;\n        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);\n    }\n}\n\n@media (max-width: 760px) and (max-height: 680px) {\n    .hmc-film__eyebrow,\n    .hmc-film__intro,\n    .hmc-film__meta {\n        display: none;\n    }\n\n    .hmc-film__title {\n        font-size: clamp(28px, 8vw, 38px) !important;\n    }\n}\n\n@media (max-width: 760px) and (orientation: landscape) {\n    .hmc-film__inner {\n        grid-template-columns: minmax(0, 1fr) auto;\n        grid-template-rows: 1fr;\n        gap: 18px;\n        align-items: center;\n    }\n\n    .hmc-film__player-shell {\n        height: 100%;\n        max-width: 42vw;\n    }\n\n    .hmc-film__intro,\n    .hmc-film__meta {\n        display: none;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .hmc-film *,\n    .hmc-film *::before,\n    .hmc-film *::after {\n        scroll-behavior: auto !important;\n        transition-duration: .01ms !important;\n    }\n}\n<\/style>\n\n<section class=\"hmc-film\" id=\"academy-stories\" aria-labelledby=\"hmcFilmHeading\">\n    <div class=\"hmc-film__inner\">\n        <div class=\"hmc-film__copy\">\n            <p class=\"hmc-film__eyebrow\">Stories in motion<\/p>\n            <h2 class=\"hmc-film__title\" id=\"hmcFilmHeading\">Inside Helen\u2019s <em>Music Centre.<\/em><\/h2>\n            <p class=\"hmc-film__intro\">Step inside our classrooms and discover the patient guidance, joyful practice and everyday moments that shape each musician\u2019s journey.<\/p>\n\n            <div class=\"hmc-film__meta\" aria-label=\"Video details\">\n                <span><strong>Film<\/strong> Our School<\/span>\n                <span><strong>Length<\/strong> 01:38<\/span>\n                <span><strong>Format<\/strong> Portrait<\/span>\n            <\/div>\n        <\/div>\n\n        <div class=\"hmc-film__player-shell\">\n            <video\n                class=\"hmc-film__video\"\n                controls\n                playsinline\n                preload=\"metadata\"\n                aria-label=\"Inside Helen's Music Centre\"\n            >\n                <source src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/helens-music-school-high-quality-compressed.mp4\" type=\"video\/mp4\">\n                Your browser does not support HTML5 video.\n            <\/video>\n        <\/div>\n    <\/div>\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-550fea6 e-con-full e-flex e-con e-parent\" data-id=\"550fea6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-122ec5f elementor-widget elementor-widget-html\" data-id=\"122ec5f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Import Google Fonts (if not already loaded by previous widgets) -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');\n\n\/* --- Main Wrapper --- *\/\n.pathway-section-wrapper {\n    position: relative; \/* Anchor for background music elements *\/\n    background-color: #050505; \/* Deep black background *\/\n    color: #ffffff;\n    font-family: 'Inter', sans-serif;\n    padding: 120px 5%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    overflow: hidden;\n}\n\n.pathway-container {\n    max-width: 1200px;\n    width: 100%;\n    display: flex;\n    gap: 100px;\n    align-items: center;\n    position: relative;\n    z-index: 2; \/* Sits above the background staff pathway *\/\n}\n\n\/* --- Sweeping Background Staff Pathway --- *\/\n.pathway-bg-elements {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 1;\n    overflow: hidden;\n}\n\n.pathway-staff-wave {\n    position: absolute;\n    width: 120%;\n    height: auto;\n    top: 15%;\n    left: -10%;\n    color: rgba(197, 168, 128, 0.07); \/* Faint gold manuscript lines *\/\n    transform: rotate(-3deg);\n}\n\n\/* --- Left Column: Content & Steps --- *\/\n.pathway-left-col {\n    flex: 1;\n    min-width: 300px;\n}\n\n\/* Elegant musical header accent *\/\n.pathway-accent {\n    display: inline-flex;\n    align-items: center;\n    color: #c5a880; \/* Signature gold *\/\n    margin-bottom: 18px;\n}\n\n.pathway-accent-icon {\n    width: 24px;\n    height: 24px;\n}\n\n.pathway-title {\n    font-family: 'Playfair Display', serif;\n    font-size: 3.2rem;\n    font-weight: 400;\n    margin: 0 0 25px 0;\n    letter-spacing: 0.5px;\n}\n\n.pathway-intro {\n    color: #a0a0a0;\n    font-size: 1.05rem;\n    line-height: 1.7;\n    margin-bottom: 50px;\n    max-width: 95%;\n}\n\n.pathway-steps {\n    display: flex;\n    flex-direction: column;\n    gap: 35px;\n}\n\n.pathway-step {\n    display: flex;\n    gap: 25px;\n    align-items: flex-start;\n}\n\n\/* Stylized Music Pedagogy Circular Step Indicator *\/\n.step-number {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    width: 50px;\n    height: 50px;\n    border-radius: 50%;\n    background-color: rgba(197, 168, 128, 0.03);\n    color: #c5a880; \/* Warm gold typography *\/\n    border: 1px solid rgba(197, 168, 128, 0.25);\n    \/* 'Inter' font metrics are perfectly symmetric, ensuring vertical centering *\/\n    font-family: 'Inter', sans-serif;\n    font-size: 1.25rem;\n    font-weight: 600;\n    line-height: 1; \/* Eliminates external leading padding *\/\n    padding: 0; \/* Clear browser-specific default paddings *\/\n    box-sizing: border-box;\n    flex-shrink: 0;\n    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n.pathway-step:hover .step-number {\n    border-color: #c5a880;\n    background-color: rgba(197, 168, 128, 0.1);\n    box-shadow: 0 0 12px rgba(197, 168, 128, 0.35);\n}\n\n.step-content {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    padding-top: 2px;\n}\n\n.step-title {\n    font-family: 'Playfair Display', serif;\n    font-size: 1.4rem;\n    font-weight: 400;\n    margin: 0;\n    color: #ffffff;\n    letter-spacing: 0.5px;\n}\n\n.step-desc {\n    color: #a0a0a0;\n    font-size: 0.95rem;\n    line-height: 1.6;\n    margin: 0;\n}\n\n\/* --- Right Column: Card & Badge --- *\/\n.pathway-right-col {\n    flex: 1;\n    min-width: 300px;\n    position: relative;\n    display: flex;\n    justify-content: flex-end;\n}\n\n\/* Soft glassmorphism exam card *\/\n.exam-card {\n    background-color: rgba(10, 10, 10, 0.65); \/* Semi-transparent *\/\n    backdrop-filter: blur(6px); \/* Lets staff lines flow beautifully underneath M *\/\n    border: 1px solid rgba(197, 168, 128, 0.15); \/* Gold card framing *\/\n    padding: 50px;\n    width: 100%;\n    max-width: 500px;\n    box-sizing: border-box;\n    position: relative;\n}\n\n\/* Static, Non-Overlapping Integrated Plaque Badge *\/\n.pass-rate-badge-static {\n    background-color: rgba(197, 168, 128, 0.04);\n    border: 1px solid rgba(197, 168, 128, 0.25);\n    padding: 15px 25px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 35px;\n    border-radius: 2px;\n    box-sizing: border-box;\n    width: 100%;\n}\n\n.badge-number-static {\n    color: #c5a880; \/* Glowing gold value *\/\n    font-family: 'Playfair Display', serif;\n    font-size: 2.2rem;\n    font-weight: 600;\n    line-height: 1;\n}\n\n.badge-text-static {\n    color: #ffffff;\n    font-size: 0.7rem;\n    font-weight: 600;\n    letter-spacing: 1.5px;\n    text-transform: uppercase;\n    text-align: right;\n}\n\n.exam-card-title {\n    font-family: 'Playfair Display', serif;\n    font-size: 1.4rem;\n    font-weight: 400;\n    margin: 0 0 35px 0;\n    letter-spacing: 0.5px;\n    color: #ffffff; \/* Reverted to neutral white to balance with the gold plaque above *\/\n}\n\n.exam-list {\n    list-style: none;\n    padding: 0;\n    margin: 0 0 40px 0;\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n}\n\n.exam-list-item {\n    display: flex;\n    align-items: center;\n    gap: 15px;\n    color: #ffffff;\n    font-size: 0.95rem;\n}\n\n.exam-list-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.exam-divider {\n    height: 1px;\n    background: linear-gradient(90deg, transparent, rgba(197, 168, 128, 0.3), transparent);\n    width: 100%;\n    margin-bottom: 30px;\n}\n\n.exam-quote {\n    font-family: 'Playfair Display', serif;\n    font-style: italic;\n    font-size: 1.05rem;\n    color: #a0a0a0;\n    margin: 0;\n}\n\n\/* --- Responsive Adjustments --- *\/\n@media (max-width: 1100px) {\n    .pathway-container {\n        gap: 60px;\n    }\n}\n\n@media (max-width: 992px) {\n    .pathway-section-wrapper {\n        padding: 80px 6%; \/* Optimized scrolling boundary *\/\n    }\n    .pathway-container {\n        flex-direction: column;\n        gap: 50px;\n    }\n    .pathway-right-col {\n        justify-content: flex-start;\n        width: 100%;\n        margin-top: 20px; \/* Reduced since badge is static and nested *\/\n    }\n    .exam-card {\n        max-width: 100%;\n        padding-top: 50px; \/* Reset top offset as overlapping issue is resolved *\/\n    }\n    .pathway-staff-wave {\n        top: 30%;\n    }\n}\n\n@media (max-width: 576px) {\n    .pathway-title {\n        font-size: 2.2rem; \/* Sized down so title fits comfortably without broken wraps *\/\n        margin-bottom: 15px;\n    }\n    .pathway-intro {\n        font-size: 0.95rem;\n        margin-bottom: 35px;\n    }\n    .pathway-steps {\n        gap: 25px; \/* Tighter layout flow *\/\n    }\n    .exam-card {\n        padding: 40px 25px; \/* Clean and standard padding profiles *\/\n    }\n    .badge-number-static {\n        font-size: 1.8rem;\n    }\n    .badge-text-static {\n        font-size: 0.65rem;\n    }\n    .step-number {\n        width: 40px;\n        height: 40px;\n        font-size: 1.15rem;\n    }\n    .pathway-step {\n        gap: 15px;\n    }\n    .pathway-staff-wave {\n        display: none; \/* Hide decorative background wave on compact mobile displays *\/\n    }\n}\n<\/style>\n\n<!-- HTML Structure -->\n<div class=\"pathway-section-wrapper\" id=\"pathway\">\n    \n    <!-- Background Watermarks -->\n    <div class=\"pathway-bg-elements\">\n        <!-- literal music staff pathway curving across wrapper background -->\n        <svg class=\"pathway-staff-wave\" viewBox=\"0 0 1000 400\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0.8\" stroke-linecap=\"round\">\n            <path d=\"M 0,350 C 200,320 400,200 600,180 C 800,160 900,100 1000,50\" \/>\n            <path d=\"M 0,341 C 200,311 400,191 600,171 C 800,151 900,91 1000,41\" \/>\n            <path d=\"M 0,332 C 200,302 400,182 600,162 C 800,142 900,82 1000,32\" \/>\n            <path d=\"M 0,323 C 200,293 400,173 600,153 C 800,133 900,73 1000,23\" \/>\n            <path d=\"M 0,314 C 200,284 400,164 600,144 C 800,124 900,64 1000,14\" \/>\n        <\/svg>\n    <\/div>\n\n    <div class=\"pathway-container\">\n        \n        <!-- Left Column: Content -->\n        <div class=\"pathway-left-col\">\n            <!-- Sleek tagline music icon -->\n            <div class=\"pathway-accent\">\n                <svg class=\"pathway-accent-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M9 18V5l12-2v13\"><\/path>\n                    <circle cx=\"6\" cy=\"18\" r=\"3\"><\/circle>\n                    <circle cx=\"18\" cy=\"16\" r=\"3\"><\/circle>\n                <\/svg>\n            <\/div>\n            \n            <h2 class=\"pathway-title\">Pathway to Success<\/h2>\n            <p class=\"pathway-intro font-light\">At Helen's Music Centre, we don't just teach pieces; we build musicians. Our structured pathway ensures that every student progresses with confidence.<\/p>\n            \n            <div class=\"pathway-steps\">\n                <!-- Step 1 -->\n                <div class=\"pathway-step\">\n                    <div class=\"step-number\">1<\/div>\n                    <div class=\"step-content\">\n                        <h3 class=\"step-title\">Beginner, Prep Test & Initial Grades<\/h3>\n                        <p class=\"step-desc\">Focusing on enjoyment and basic technique from day one.<\/p>\n                    <\/div>\n                <\/div>\n                \n                <!-- Step 2 -->\n                <div class=\"pathway-step\">\n                    <div class=\"step-number\">2<\/div>\n                    <div class=\"step-content\">\n                        <h3 class=\"step-title\">Intermediate Mastery (Grades 1-5)<\/h3>\n                        <p class=\"step-desc\">Intensive focus on ABRSM scales, sight-reading, and theory.<\/p>\n                    <\/div>\n                <\/div>\n                \n                <!-- Step 3 -->\n                <div class=\"pathway-step\">\n                    <div class=\"step-number\">3<\/div>\n                    <div class=\"step-content\">\n                        <h3 class=\"step-title\">Advanced Artistry (Grades 6-8+)<\/h3>\n                        <p class=\"step-desc\">Preparation for high-stakes examinations and performance diplomas.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Right Column: Card -->\n        <div class=\"pathway-right-col\">\n            <div class=\"exam-card\">\n                \n                <!-- Static, Non-Overlapping Plaque Badge placed inside Card header -->\n                <div class=\"pass-rate-badge-static\">\n                    <span class=\"badge-number-static\">100%<\/span>\n                    <span class=\"badge-text-static\">ABRSM PASS RATE<\/span>\n                <\/div>\n\n                <h3 class=\"exam-card-title\">Examination Preparation<\/h3>\n                \n                <ul class=\"exam-list\">\n                    <li class=\"exam-list-item\">\n                        <div class=\"exam-list-icon\">\n                            <!-- Clean gold-accent checkmark -->\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#c5a880\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <polyline points=\"20 6 9 17 4 12\"><\/polyline>\n                            <\/svg>\n                        <\/div>\n                        Quarterly Mock Examinations\n                    <\/li>\n                    <li class=\"exam-list-item\">\n                        <div class=\"exam-list-icon\">\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#c5a880\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <polyline points=\"20 6 9 17 4 12\"><\/polyline>\n                            <\/svg>\n                        <\/div>\n                        Aural Training Workshops\n                    <\/li>\n                    <li class=\"exam-list-item\">\n                        <div class=\"exam-list-icon\">\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#c5a880\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <polyline points=\"20 6 9 17 4 12\"><\/polyline>\n                            <\/svg>\n                        <\/div>\n                        Annual Student Recitals\n                    <\/li>\n                    <li class=\"exam-list-item\">\n                        <div class=\"exam-list-icon\">\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#c5a880\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <polyline points=\"20 6 9 17 4 12\"><\/polyline>\n                            <\/svg>\n                        <\/div>\n                        ABRSM Theory Group Classes\n                    <\/li>\n                    <li class=\"exam-list-item\">\n                        <div class=\"exam-list-icon\">\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#c5a880\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <polyline points=\"20 6 9 17 4 12\"><\/polyline>\n                            <\/svg>\n                        <\/div>\n                        Post-Grade 8 Performance Diplomas\n                    <\/li>\n                <\/ul>\n\n                <div class=\"exam-divider\"><\/div>\n                \n                <p class=\"exam-quote\">\"Excellence in performance is the true objective.\"<\/p>\n                \n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e7a11b7 e-con-full e-flex e-con e-parent\" data-id=\"e7a11b7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-af5075a elementor-widget elementor-widget-html\" data-id=\"af5075a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Import Google Fonts (if not already loaded by previous widgets) -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@400;500&display=swap');\n\n\/* --- Elementor Global Bleed Overrides & Reset --- *\/\n\/* This blocks Elementor's default pink highlights, links, headings, and tap highlights *\/\n.faculty-section-wrapper h2,\n.faculty-section-wrapper h3,\n.faculty-section-wrapper a,\n.faculty-section-wrapper button,\n.faculty-section-wrapper span,\n.faculty-section-wrapper p {\n    text-decoration: none !important;\n    outline: none !important;\n    -webkit-tap-highlight-color: transparent !important;\n}\n\n.faculty-section-wrapper ::selection {\n    background-color: #c5a880 !important; \/* Gold text selection instead of pink *\/\n    color: #050505 !important;\n}\n.faculty-section-wrapper ::-moz-selection {\n    background-color: #c5a880 !important;\n    color: #050505 !important;\n}\n\n.faculty-section-wrapper *:focus,\n.faculty-section-wrapper button:focus,\n.faculty-section-wrapper a:focus {\n    outline: none !important;\n    box-shadow: 0 0 0 2px rgba(197, 168, 128, 0.3) !important; \/* Soft gold focus ring instead of pink *\/\n}\n\n\/* --- Main Wrapper --- *\/\n.faculty-section-wrapper {\n    position: relative; \n    background-color: #050505; \/* Solid deep black background *\/\n    color: #ffffff !important;\n    font-family: 'Inter', sans-serif;\n    padding: 120px 5%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    overflow: hidden;\n}\n\n.faculty-container {\n    max-width: 1200px;\n    width: 100%;\n    position: relative;\n    z-index: 2; \/* Sits cleanly above background watermarks *\/\n}\n\n\/* --- Atmospheric Background Instrumental Elements --- *\/\n.faculty-bg-elements {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 1;\n    overflow: hidden;\n}\n\n\/* Faint diagonal staff lines running behind cards *\/\n.faculty-staff-lines {\n    position: absolute;\n    top: 50%;\n    left: -10%;\n    width: 120%;\n    height: 48px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    opacity: 0.10; \n    transform: rotate(-3deg);\n}\n\n.faculty-staff-line {\n    height: 1px;\n    background-color: #c5a880;\n    width: 100%;\n}\n\n\/* --- Header Layout --- *\/\n.faculty-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-end;\n    margin-bottom: 75px;\n    text-align: left;\n}\n\n.faculty-header-left {\n    max-width: 800px;\n}\n\n\/* Delicate tagline music icon *\/\n.faculty-header-accent {\n    display: inline-flex;\n    align-items: center;\n    color: #c5a880 !important; \/* Signature gold *\/\n    margin-bottom: 15px;\n}\n\n.faculty-accent-icon {\n    width: 24px;\n    height: 24px;\n}\n\n.faculty-title {\n    font-family: 'Playfair Display', serif;\n    font-size: 3.5rem;\n    font-weight: 400;\n    margin: 0 0 15px 0;\n    letter-spacing: 0.5px;\n    color: #ffffff !important; \/* Overrides Elementor H2 Global Pink *\/\n}\n\n.faculty-subtitle {\n    color: #a0a0a0 !important; \/* Overrides Elementor Global Paragraph colors *\/\n    font-size: 1.1rem;\n    line-height: 1.6;\n    margin: 0;\n    font-weight: 400;\n}\n\n\/* Highlight style for the Free Trial promotion *\/\n.highlight-free {\n    color: #c5a880 !important; \/* Signature Gold *\/\n    font-weight: 500;\n    display: inline-block;\n}\n\n\/* --- Minimalist Gold Navigation Buttons --- *\/\n.faculty-nav-buttons {\n    display: flex; \n    gap: 12px;\n    align-items: center;\n}\n\n.fac-nav-btn {\n    background-color: rgba(197, 168, 128, 0.02) !important;\n    border: 1px solid rgba(197, 168, 128, 0.25) !important;\n    color: #c5a880 !important;\n    width: 44px;\n    height: 44px;\n    border-radius: 50% !important;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    outline: none;\n    padding: 0 !important;\n}\n\n.fac-nav-btn svg {\n    width: 18px;\n    height: 18px;\n}\n\n.fac-nav-btn:hover {\n    border-color: #c5a880 !important;\n    background-color: rgba(197, 168, 128, 0.08) !important;\n    box-shadow: 0 0 10px rgba(197, 168, 128, 0.15);\n}\n\n\/* --- Horizontal Slider Layout --- *\/\n.faculty-grid {\n    display: flex;\n    overflow-x: auto;\n    scroll-snap-type: x mandatory;\n    -webkit-overflow-scrolling: touch;\n    gap: 22px;\n    margin: 0 -5%;\n    padding: 0 5% 24px;\n    counter-reset: faculty-card;\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n}\n\n.faculty-grid::-webkit-scrollbar {\n    display: none;\n}\n\n\/* --- Faculty Card Design --- *\/\n.faculty-card {\n    position: relative;\n    counter-increment: faculty-card;\n    overflow: hidden;\n    background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(197, 168, 128, 0.012));\n    border: 1px solid rgba(197, 168, 128, 0.12); \n    padding: 24px;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    flex: 0 0 clamp(280px, 25vw, 320px);\n    min-height: 100%;\n    scroll-snap-align: start;\n    transition: border-color 0.4s ease, background-color 0.4s ease, transform 0.4s ease;\n}\n\n.faculty-card::before {\n    content: \"0\" counter(faculty-card);\n    position: absolute;\n    top: 18px;\n    right: 20px;\n    z-index: 2;\n    color: rgba(197, 168, 128, 0.28);\n    font-family: 'Playfair Display', serif;\n    font-size: 1.35rem;\n    line-height: 1;\n}\n\n.faculty-card::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 24px;\n    width: 42px;\n    height: 1px;\n    background: #c5a880;\n    opacity: 0.75;\n}\n\n\/* Portrait Image Container *\/\n.faculty-img-container {\n    width: 100%;\n    aspect-ratio: 4 \/ 5; \n    overflow: hidden;\n    margin-bottom: 25px;\n    box-sizing: border-box;\n    border: 1px solid #161616;\n}\n\n.faculty-img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n\/* Card Typography *\/\n.faculty-card-name {\n    font-family: 'Playfair Display', serif;\n    font-size: 1.42rem;\n    font-weight: 400;\n    margin: 0 0 10px 0;\n    letter-spacing: 0.5px;\n    transition: color 0.3s ease;\n    color: #ffffff !important; \/* Overrides Elementor H3 Global Pink *\/\n}\n\n.faculty-card-role {\n    color: #c5a880 !important; \/* Warm gold typography for roles *\/\n    font-size: 0.7rem;\n    font-weight: 600;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    margin: 0 0 15px 0;\n}\n\n.faculty-card-desc {\n    color: #a0a0a0 !important;\n    font-size: 0.82rem;\n    line-height: 1.62;\n    margin: 0 0 25px 0;\n    flex-grow: 1; \/* Pushes the button to the bottom so they align perfectly *\/\n}\n\n.faculty-card-desc strong {\n    color: #d8c3a2 !important;\n    font-weight: 500;\n}\n\n\/* Button Styling *\/\n.faculty-btn {\n    width: 100%;\n    border: 1px solid #1a1a1a !important;\n    background-color: transparent !important; \/* Overrides default Elementor button colors *\/\n    color: #ffffff !important; \/* Protects button text color *\/\n    text-align: center;\n    padding: 13px 0 !important;\n    border-radius: 0 !important;\n    font-family: 'Inter', sans-serif;\n    font-size: 10px;\n    font-weight: 600;\n    letter-spacing: 1.5px;\n    text-transform: uppercase;\n    text-decoration: none;\n    transition: all 0.3s ease;\n    cursor: pointer;\n    box-sizing: border-box;\n}\n\n\/* --- Hover State Interactions --- *\/\n.faculty-card:hover {\n    border-color: rgba(197, 168, 128, 0.35); \n    background-color: rgba(197, 168, 128, 0.035);\n    transform: translateY(-6px);\n}\n\n.faculty-card:hover .faculty-img {\n    transform: scale(1.05); \n}\n\n.faculty-card:hover .faculty-card-name {\n    color: #c5a880 !important; \/* Name highlights to signature gold on hover *\/\n}\n\n.faculty-btn:hover {\n    border-color: #c5a880 !important;\n    background-color: rgba(197, 168, 128, 0.08) !important;\n    color: #c5a880 !important;\n}\n\n\/* --- Immersive Booking Pop-up Modal --- *\/\n.faculty-modal-overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(5, 5, 5, 0.85); \n    backdrop-filter: blur(10px); \n    -webkit-backdrop-filter: blur(10px);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    z-index: 10005; \n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.4s ease;\n}\n\n.faculty-modal-overlay.open {\n    opacity: 1;\n    pointer-events: auto;\n}\n\n.faculty-modal-content {\n    background-color: #0f0f0f; \n    border: 1px solid rgba(197, 168, 128, 0.25); \n    padding: 40px 15px 15px 15px;\n    width: 92%;\n    max-width: 900px;\n    height: 85%;\n    max-height: 700px;\n    box-sizing: border-box;\n    position: relative;\n    box-shadow: 0 15px 45px rgba(0,0,0,0.8);\n    transform: scale(0.95);\n    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n    overflow: hidden;\n}\n\n.faculty-modal-overlay.open .faculty-modal-content {\n    transform: scale(1);\n}\n\n\/* --- Modal Close Button Elementor override protection --- *\/\n.faculty-section-wrapper .faculty-modal-close,\n#closeBookingModal {\n    position: absolute !important;\n    top: 10px !important;\n    right: 20px !important;\n    background: transparent !important;\n    background-color: transparent !important; \/* Strip Elementor's default pink button backgrounds *\/\n    border: none !important;\n    border-radius: 0 !important; \/* Strip default round border-radius overrides *\/\n    padding: 0 !important; \/* Strip default global padding overrides *\/\n    box-shadow: none !important;\n    outline: none !important;\n    color: #888888 !important;\n    font-size: 2.2rem !important;\n    cursor: pointer !important;\n    transition: color 0.3s ease !important;\n    line-height: 1 !important;\n    z-index: 10 !important;\n    width: auto !important;\n    height: auto !important;\n}\n\n.faculty-section-wrapper .faculty-modal-close:hover,\n.faculty-section-wrapper .faculty-modal-close:focus,\n.faculty-section-wrapper .faculty-modal-close:active {\n    background: transparent !important;\n    background-color: transparent !important;\n    color: #c5a880 !important;\n    box-shadow: none !important;\n    outline: none !important;\n}\n\n.faculty-iframe-container {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    background-color: #ffffff; \n    border-radius: 2px;\n}\n\n.faculty-iframe-container iframe {\n    width: 100%;\n    height: 100%;\n    border: none;\n}\n\n\/* Prevent viewport scrolling behind open modal overlays *\/\nbody.modal-open {\n    overflow: hidden;\n}\n\n\/* --- Responsive Adjustments & Carousel --- *\/\n@media (max-width: 1100px) {\n    .faculty-section-wrapper {\n        padding: 80px 5%; \n    }\n    .faculty-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        margin-bottom: 40px;\n    }\n    .faculty-grid {\n        gap: 20px;\n        padding-bottom: 20px; \n    }\n    \n    .faculty-card {\n        flex: 0 0 300px; \n    }\n    .faculty-bg-elements {\n        display: none; \n    }\n    .faculty-title {\n        font-size: 2.8rem;\n    }\n}\n\n@media (max-width: 768px) {\n    .faculty-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 25px;\n    }\n    .faculty-nav-buttons {\n        align-self: flex-end; \n    }\n    .faculty-title {\n        font-size: 2.5rem;\n    }\n}\n\n@media (max-width: 576px) {\n    .faculty-title {\n        font-size: 2.2rem; \n    }\n    .faculty-subtitle {\n        font-size: 1rem;\n    }\n    .faculty-grid {\n        gap: 16px;\n        padding-bottom: 16px;\n    }\n    .faculty-card {\n        flex-basis: 82vw;\n        padding: 22px;\n    }\n    .faculty-card::before {\n        top: 16px;\n        right: 18px;\n        font-size: 1.15rem;\n    }\n}\n<\/style>\n\n<!-- HTML Structure -->\n<div class=\"faculty-section-wrapper\" id=\"faculty\">\n    \n    <!-- Background Watermarks -->\n    <div class=\"faculty-bg-elements\">\n        <div class=\"faculty-staff-lines\">\n            <div class=\"faculty-staff-line\"><\/div>\n            <div class=\"faculty-staff-line\"><\/div>\n            <div class=\"faculty-staff-line\"><\/div>\n            <div class=\"faculty-staff-line\"><\/div>\n            <div class=\"faculty-staff-line\"><\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"faculty-container\">\n        \n        <!-- Header -->\n        <div class=\"faculty-header\">\n            <div class=\"faculty-header-left\">\n                <!-- Sleek tagline music icon -->\n                <div class=\"faculty-header-accent\">\n                    <svg class=\"faculty-accent-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <path d=\"M9 18V5l12-2v13\"><\/path>\n                        <circle cx=\"6\" cy=\"18\" r=\"3\"><\/circle>\n                        <circle cx=\"18\" cy=\"16\" r=\"3\"><\/circle>\n                    <\/svg>\n                <\/div>\n                <h2 class=\"faculty-title\">Meet Our Teachers<\/h2>\n                <p class=\"faculty-subtitle\">The mentors, leaders and educators carrying Helen's Music Centre forward with experience, care and a lifelong love for music.<\/p>\n            <\/div>\n            \n            <!-- Slide Navigation Buttons (Displays on mobile\/tablet viewports) -->\n            <div class=\"faculty-nav-buttons\">\n                <button class=\"fac-nav-btn btn-prev\" id=\"facPrevBtn\" aria-label=\"Previous Tutor\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <polyline points=\"15 18 9 12 15 6\"><\/polyline>\n                    <\/svg>\n                <\/button>\n                <button class=\"fac-nav-btn btn-next\" id=\"facNextBtn\" aria-label=\"Next Tutor\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <polyline points=\"9 18 15 12 9 6\"><\/polyline>\n                    <\/svg>\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <!-- Swipeable Teacher Slider -->\n        <div class=\"faculty-grid\" id=\"facultyGrid\">\n            \n            <!-- Card 1: Madam Helen Bong -->\n            <div class=\"faculty-card\">\n                <div class=\"faculty-img-container\">\n                    <img decoding=\"async\" class=\"faculty-img\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-14-at-11.31.21.jpeg\" alt=\"Madam Helen Bong\">\n                <\/div>\n                <h3 class=\"faculty-card-name\">Madam Helen Bong<\/h3>\n                <p class=\"faculty-card-role\">Founder \/ Piano, Vocal, Violin, Organ, JMC & Theory<\/p>\n                <p class=\"faculty-card-desc\"><strong>Over 30 years in music education.<\/strong> Madam Helen has dedicated her life to nurturing generations of students, guiding them towards confidence, passion and musical growth.<\/p>\n                <button class=\"faculty-btn\" data-calendly=\"https:\/\/calendly.com\/booking-helensmusiccentre\/30min\">Enquire Now<\/button>\n            <\/div>\n\n            <!-- Card 2: Mr Gordon Tan -->\n            <div class=\"faculty-card\">\n                <div class=\"faculty-img-container\">\n                    <img decoding=\"async\" class=\"faculty-img\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-14-at-11.29.07.jpeg\" alt=\"Mr Gordon Tan\">\n                <\/div>\n                <h3 class=\"faculty-card-name\">Mr Gordon Tan<\/h3>\n                <p class=\"faculty-card-role\">Managing Director \/ Guitar & Violin<\/p>\n                <p class=\"faculty-card-desc\">Mr Gordon specialises in Classical Guitar, Acoustic Guitar and Violin, while leading the centre's development, marketing and long-term growth.<\/p>\n                <button class=\"faculty-btn\" data-calendly=\"https:\/\/calendly.com\/booking-helensmusiccentre\/30min\">Enquire Now<\/button>\n            <\/div>\n\n            <!-- Card 3: Teacher Ginny Tan -->\n            <div class=\"faculty-card\">\n                <div class=\"faculty-img-container\">\n                    <img decoding=\"async\" class=\"faculty-img\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-14-at-11.20.42.jpeg\" alt=\"Teacher Ginny Tan\">\n                <\/div>\n                <h3 class=\"faculty-card-name\">Teacher Ginny Tan<\/h3>\n                <p class=\"faculty-card-role\">Shareholder \/ Piano & Vocal<\/p>\n                <p class=\"faculty-card-desc\">Teacher Ginny helps continue the centre's vision for quality music education, inspiring students to build skill, confidence and a lasting love for music.<\/p>\n                <button class=\"faculty-btn\" data-calendly=\"https:\/\/calendly.com\/booking-helensmusiccentre\/30min\">Enquire Now<\/button>\n            <\/div>\n\n            <!-- Card 4: Teacher Gladys Tan -->\n            <div class=\"faculty-card\">\n                <div class=\"faculty-img-container\">\n                    <img decoding=\"async\" class=\"faculty-img\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-14-at-11.25.45.jpeg\" alt=\"Teacher Gladys Tan\">\n                <\/div>\n                <h3 class=\"faculty-card-name\">Teacher Gladys Tan<\/h3>\n                <p class=\"faculty-card-role\">Shareholder \/ Piano<\/p>\n                <p class=\"faculty-card-desc\">A Malaysian university music graduate with private international school teaching experience, Teacher Gladys guides students with knowledge, creativity and care.<\/p>\n                <button class=\"faculty-btn\" data-calendly=\"https:\/\/calendly.com\/booking-helensmusiccentre\/30min\">Enquire Now<\/button>\n            <\/div>\n\n            <!-- Card 5: Mr Jason Chai -->\n            <div class=\"faculty-card\">\n                <div class=\"faculty-img-container\">\n                    <img decoding=\"async\" class=\"faculty-img\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-14-at-11.32.26.jpeg\" alt=\"Mr Jason Chai\">\n                <\/div>\n                <h3 class=\"faculty-card-name\">Mr Jason Chai<\/h3>\n                <p class=\"faculty-card-role\">Shareholder \/ Advisor & Support<\/p>\n                <p class=\"faculty-card-desc\">Mr Jason provides guidance, insight and support to strengthen the centre's development and help build a stronger future for Helen's Music Centre.<\/p>\n                <button class=\"faculty-btn\" data-calendly=\"https:\/\/calendly.com\/booking-helensmusiccentre\/30min\">Enquire Now<\/button>\n            <\/div>\n\n            <!-- Card 6: Teacher Amanda Kho -->\n            <div class=\"faculty-card\">\n                <div class=\"faculty-img-container\">\n                    <img decoding=\"async\" class=\"faculty-img\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-14-at-11.17.21.jpeg\" alt=\"Teacher Amanda Kho\">\n                <\/div>\n                <h3 class=\"faculty-card-name\">Teacher Amanda Kho<\/h3>\n                <p class=\"faculty-card-role\">Piano, Keyboard, Electric Organ & JMC<\/p>\n                <p class=\"faculty-card-desc\"><strong>Over 30 years teaching with us.<\/strong> Teacher Amanda has guided generations of students in developing musical skill, confidence and passion.<\/p>\n                <button class=\"faculty-btn\" data-calendly=\"https:\/\/calendly.com\/booking-helensmusiccentre\/30min\">Enquire Now<\/button>\n            <\/div>\n\n            <!-- Card 7: Teacher Dolly Crocker -->\n            <div class=\"faculty-card\">\n                <div class=\"faculty-img-container\">\n                    <img decoding=\"async\" class=\"faculty-img\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-14-at-11.19.00.jpeg\" alt=\"Teacher Dolly Crocker\">\n                <\/div>\n                <h3 class=\"faculty-card-name\">Teacher Dolly Crocker<\/h3>\n                <p class=\"faculty-card-role\">Piano & Vocal<\/p>\n                <p class=\"faculty-card-desc\"><strong>Over 30 years teaching with us.<\/strong> Teacher Dolly inspires students through patient guidance, strong foundations and the joy music brings.<\/p>\n                <button class=\"faculty-btn\" data-calendly=\"https:\/\/calendly.com\/booking-helensmusiccentre\/30min\">Enquire Now<\/button>\n            <\/div>\n\n            <!-- Card 8: Teacher Monica Yap -->\n            <div class=\"faculty-card\">\n                <div class=\"faculty-img-container\">\n                    <img decoding=\"async\" class=\"faculty-img\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-14-at-11.33.48.jpeg\" alt=\"Teacher Monica Yap\">\n                <\/div>\n                <h3 class=\"faculty-card-name\">Teacher Monica Yap<\/h3>\n                <p class=\"faculty-card-role\">Piano, Violin & JMC<\/p>\n                <p class=\"faculty-card-desc\">Teacher Monica helps learners build strong foundations, develop confidence and discover the joy of playing music through a patient, encouraging approach.<\/p>\n                <button class=\"faculty-btn\" data-calendly=\"https:\/\/calendly.com\/booking-helensmusiccentre\/30min\">Enquire Now<\/button>\n            <\/div>\n\n            <!-- Card 9: Teacher Crystal Kong -->\n            <div class=\"faculty-card\">\n                <div class=\"faculty-img-container\">\n                    <img class=\"faculty-img\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-16-at-13.48.30.jpeg\" alt=\"Teacher Crystal Kong\" loading=\"lazy\" decoding=\"async\">\n                <\/div>\n                <h3 class=\"faculty-card-name\">Teacher Crystal Kong<\/h3>\n                <p class=\"faculty-card-role\">Piano, Violin &amp; Ukulele<\/p>\n                <p class=\"faculty-card-desc\">With her passion for music education, Teacher Crystal is dedicated to helping students develop strong musical foundations, build confidence and discover the joy of making music.<\/p>\n                <button class=\"faculty-btn\" data-calendly=\"https:\/\/calendly.com\/booking-helensmusiccentre\/30min\">Enquire Now<\/button>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<!-- Immersive Booking Pop-up Modal -->\n<div class=\"faculty-modal-overlay\" id=\"bookingModal\">\n    <div class=\"faculty-modal-content\">\n        <button class=\"faculty-modal-close\" id=\"closeBookingModal\">&times;<\/button>\n        <div class=\"faculty-iframe-container\">\n            <div class=\"calendly-inline-widget\" id=\"bookingCalendlyWidget\" data-url=\"\" style=\"min-width:320px;height:100%;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n<script type=\"text\/javascript\" src=\"https:\/\/assets.calendly.com\/assets\/external\/widget.js\" async><\/script>\n\n<!-- Scroll Navigation & Pop-up Handling Trigger Script -->\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    const grid = document.getElementById('facultyGrid');\n    const prevBtn = document.getElementById('facPrevBtn');\n    const nextBtn = document.getElementById('facNextBtn');\n\n    \/* --- Mobile Horizontal Scrolling Arrow Controls --- *\/\n    if (grid && prevBtn && nextBtn) {\n        function getScrollOffset() {\n            const firstCard = grid.querySelector('.faculty-card');\n            if (firstCard) {\n                return firstCard.offsetWidth + 20; \n            }\n            return 290; \n        }\n\n        prevBtn.addEventListener('click', function() {\n            grid.scrollBy({ left: -getScrollOffset(), behavior: 'smooth' });\n        });\n\n        nextBtn.addEventListener('click', function() {\n            grid.scrollBy({ left: getScrollOffset(), behavior: 'smooth' });\n        });\n    }\n\n    \/* --- Booking Pop-up Controller --- *\/\n    const bookingModal = document.getElementById('bookingModal');\n    const bookingCalendlyWidget = document.getElementById('bookingCalendlyWidget');\n    const closeBookingBtn = document.getElementById('closeBookingModal');\n\n    if (grid && bookingModal && bookingCalendlyWidget && closeBookingBtn) {\n        grid.addEventListener('click', function(e) {\n            const btn = e.target.closest('.faculty-btn');\n            \n            if (btn) {\n                e.preventDefault();\n                const calendlyUrl = btn.getAttribute('data-calendly');\n                \n                if (calendlyUrl) {\n                    bookingCalendlyWidget.replaceChildren();\n                    bookingCalendlyWidget.setAttribute('data-url', calendlyUrl);\n\n                    if (window.Calendly && typeof window.Calendly.initInlineWidget === 'function') {\n                        window.Calendly.initInlineWidget({\n                            url: calendlyUrl,\n                            parentElement: bookingCalendlyWidget\n                        });\n                    } else {\n                        const fallbackIframe = document.createElement('iframe');\n                        fallbackIframe.src = calendlyUrl;\n                        fallbackIframe.width = '100%';\n                        fallbackIframe.height = '100%';\n                        fallbackIframe.frameBorder = '0';\n                        bookingCalendlyWidget.appendChild(fallbackIframe);\n                    }\n\n                    bookingModal.classList.add('open');\n                    document.body.classList.add('modal-open');\n                }\n            }\n        });\n\n        closeBookingBtn.addEventListener('click', function() {\n            bookingModal.classList.remove('open');\n            document.body.classList.remove('modal-open');\n            bookingCalendlyWidget.replaceChildren();\n            bookingCalendlyWidget.setAttribute('data-url', '');\n        });\n\n        bookingModal.addEventListener('click', function(e) {\n            if (e.target === bookingModal) {\n                bookingModal.classList.remove('open');\n                document.body.classList.remove('modal-open');\n                bookingCalendlyWidget.replaceChildren();\n                bookingCalendlyWidget.setAttribute('data-url', '');\n            }\n        });\n    }\n});\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6b262d8 e-con-full e-flex e-con e-parent\" data-id=\"6b262d8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d0efbda elementor-widget elementor-widget-html\" data-id=\"d0efbda\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Import Google Fonts (if not already loaded by previous widgets) -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');\n\n\/* --- Main Wrapper --- *\/\n.testimonials-section-wrapper {\n    position: relative;\n    background-color: #050505;\n    color: #ffffff;\n    font-family: 'Inter', sans-serif;\n    padding: 120px 0; \/* Removed horizontal padding to allow full-bleed marquee *\/\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    overflow: hidden;\n}\n\n\/* --- Atmospheric Background Instrumental Elements --- *\/\n.testimonials-bg-elements {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 1;\n    overflow: hidden;\n}\n\n.testimonials-staff-lines {\n    position: absolute;\n    top: 45%;\n    left: -10%;\n    width: 120%;\n    height: 48px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    opacity: 0.10; \/* Faint gold stave lines *\/\n    transform: rotate(-3deg);\n}\n\n.testimonials-staff-line {\n    height: 1px;\n    background-color: #c5a880;\n    width: 100%;\n}\n\n\/* --- Header --- *\/\n.testimonials-header {\n    text-align: center;\n    margin-bottom: 60px;\n    padding: 0 5%; \/* Re-apply padding specifically to header *\/\n    position: relative;\n    z-index: 2;\n}\n\n.testimonials-kicker {\n    font-family: 'Inter', sans-serif;\n    font-size: 0.8rem;\n    font-weight: 600;\n    letter-spacing: 2.5px;\n    text-transform: uppercase;\n    color: #c5a880; \/* Highlighted in signature gold *\/\n    display: block;\n    margin-bottom: 15px;\n}\n\n.testimonials-title {\n    font-family: 'Playfair Display', serif;\n    font-size: 3.5rem;\n    font-weight: 400;\n    margin: 0;\n    letter-spacing: 0.5px;\n}\n\n\/* --- Infinite Marquee Layout --- *\/\n.marquee-container {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: 30px;\n    position: relative;\n    z-index: 2;\n    \/* Cinematic fade out on the left and right edges *\/\n    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);\n    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);\n}\n\n.marquee-track {\n    display: flex;\n    width: fit-content;\n    gap: 30px;\n    \/* Standard smooth scrolling *\/\n    animation: marquee-left 45s linear infinite;\n}\n\n.marquee-track.reverse {\n    animation: marquee-right 45s linear infinite;\n}\n\n\/* Pause animation on hover for UX readability *\/\n.marquee-track:hover {\n    animation-play-state: paused;\n}\n\n.marquee-group {\n    display: flex;\n    gap: 30px;\n}\n\n@keyframes marquee-left {\n    0% { transform: translateX(0); }\n    100% { transform: translateX(calc(-50% - 15px)); } \/* 15px to account for half the gap *\/\n}\n\n@keyframes marquee-right {\n    0% { transform: translateX(calc(-50% - 15px)); }\n    100% { transform: translateX(0); }\n}\n\n\/* --- Testimonial Card Styles --- *\/\n.testimonial-card {\n    width: 420px; \/* Fixed width for sliding consistency *\/\n    height: 320px;\n    padding: 45px 35px;\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease;\n    overflow: hidden; \/* Contains the background music watermarks *\/\n}\n\n.testimonial-card:hover {\n    transform: translateY(-5px);\n}\n\n\/* Internal Card Music Watermarks *\/\n.card-music-watermark {\n    position: absolute;\n    bottom: -10px;\n    right: -10px;\n    width: 120px;\n    height: auto;\n    color: currentColor;\n    opacity: 0.04; \/* Very faint so it doesn't interrupt text *\/\n    pointer-events: none;\n    transform: rotate(15deg);\n    transition: opacity 0.4s ease, transform 0.4s ease;\n}\n\n.testimonial-card:hover .card-music-watermark {\n    opacity: 0.08;\n    transform: rotate(5deg) scale(1.1);\n}\n\n\/* Card Vector Quote Mark *\/\n.quote-symbol {\n    position: absolute;\n    top: 30px;\n    right: 35px;\n    width: 28px;\n    height: auto;\n    pointer-events: none;\n    transition: color 0.4s ease;\n    z-index: 2;\n}\n\n\/* Card Typography *\/\n.testimonial-text {\n    font-family: 'Inter', sans-serif;\n    font-size: 1rem;\n    line-height: 1.8;\n    font-style: italic;\n    margin: 0 0 25px 0;\n    padding-right: 30px; \n    position: relative;\n    z-index: 2;\n}\n\n.testimonial-footer {\n    margin-top: auto;\n    position: relative;\n    z-index: 2;\n}\n\n.testimonial-name {\n    font-family: 'Inter', sans-serif;\n    font-weight: 700;\n    font-size: 1.05rem;\n    margin: 0 0 5px 0;\n    letter-spacing: 0.2px;\n    transition: color 0.3s ease;\n}\n\n.testimonial-role {\n    font-family: 'Inter', sans-serif;\n    font-size: 0.8rem;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    margin: 0;\n}\n\n\/* --- Card Variations (Variant 1, 2, 3) --- *\/\n\n\/* Variant 1: Transparent with gold-brushed border *\/\n.testimonial-card.variant-border {\n    background-color: #050505; \/* Solid back to hide elements sliding behind *\/\n    border: 1px solid rgba(197, 168, 128, 0.25);\n    color: #ffffff;\n}\n.testimonial-card.variant-border .quote-symbol { color: rgba(197, 168, 128, 0.3); }\n.testimonial-card.variant-border .testimonial-text { color: #e0e0e0; }\n.testimonial-card.variant-border .testimonial-role { color: #888888; }\n.testimonial-card.variant-border .card-music-watermark { color: #c5a880; opacity: 0.05; }\n\n.testimonial-card.variant-border:hover { border-color: rgba(197, 168, 128, 0.55); }\n.testimonial-card.variant-border:hover .testimonial-name { color: #c5a880; }\n.testimonial-card.variant-border:hover .quote-symbol { color: rgba(197, 168, 128, 0.6); }\n\n\/* Variant 2: Solid Featured White Card *\/\n.testimonial-card.variant-white {\n    background-color: #ffffff;\n    color: #000000;\n    border: none;\n    box-shadow: 0 15px 40px rgba(0,0,0,0.4);\n}\n.testimonial-card.variant-white .quote-symbol { color: rgba(0, 0, 0, 0.1); }\n.testimonial-card.variant-white .testimonial-text { color: #000000; }\n.testimonial-card.variant-white .testimonial-name { color: #000000; }\n.testimonial-card.variant-white .testimonial-role { color: #c5a880; font-weight: 600; }\n.testimonial-card.variant-white .card-music-watermark { color: #000000; opacity: 0.03; }\n\n\/* Variant 3: Dark Background with Subdued Gold Stroke *\/\n.testimonial-card.variant-dark {\n    background-color: #0c0c0c;\n    border: 1px solid rgba(197, 168, 128, 0.08);\n    color: #ffffff;\n}\n.testimonial-card.variant-dark .quote-symbol { color: rgba(197, 168, 128, 0.1); }\n.testimonial-card.variant-dark .testimonial-text { color: #909090; }\n.testimonial-card.variant-dark .testimonial-role { color: #666666; }\n.testimonial-card.variant-dark .card-music-watermark { color: #ffffff; opacity: 0.02; }\n\n.testimonial-card.variant-dark:hover { border-color: rgba(197, 168, 128, 0.3); }\n.testimonial-card.variant-dark:hover .testimonial-name { color: #c5a880; }\n.testimonial-card.variant-dark:hover .quote-symbol { color: rgba(197, 168, 128, 0.25); }\n\n\n\/* --- Responsive Adjustments --- *\/\n@media (max-width: 992px) {\n    .testimonials-title {\n        font-size: 2.8rem;\n    }\n    .testimonials-bg-elements {\n        display: none; \/* Hide background lines on tablets\/mobiles *\/\n    }\n    .testimonial-card {\n        width: 350px;\n        height: 300px;\n        padding: 35px 25px;\n    }\n    .marquee-container {\n        \/* Soften the mask on smaller screens *\/\n        mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);\n        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);\n    }\n}\n\n@media (max-width: 576px) {\n    .testimonials-title {\n        font-size: 2.3rem;\n    }\n    .testimonial-card {\n        width: 300px;\n        height: 280px;\n    }\n    .testimonial-text {\n        font-size: 0.9rem;\n    }\n    .quote-symbol {\n        width: 22px;\n        top: 25px;\n        right: 25px;\n    }\n}\n<\/style>\n\n<!-- HTML Structure -->\n<div class=\"testimonials-section-wrapper\">\n    \n    <!-- Background Watermarks -->\n    <div class=\"testimonials-bg-elements\">\n        <div class=\"testimonials-staff-lines\">\n            <div class=\"testimonials-staff-line\"><\/div>\n            <div class=\"testimonials-staff-line\"><\/div>\n            <div class=\"testimonials-staff-line\"><\/div>\n            <div class=\"testimonials-staff-line\"><\/div>\n            <div class=\"testimonials-staff-line\"><\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Header -->\n    <div class=\"testimonials-header\">\n        <span class=\"testimonials-kicker\">Social Proof<\/span>\n        <h2 class=\"testimonials-title\">Academy Voices<\/h2>\n    <\/div>\n\n    <!-- Infinite Sliding Marquee -->\n    <div class=\"marquee-container\">\n        \n        <!-- Row 1 (Slides Left) -->\n        <div class=\"marquee-track\">\n            <!-- Group 1 -->\n            <div class=\"marquee-group\">\n                <!-- Card 1 -->\n                <div class=\"testimonial-card variant-border\">\n                    <svg class=\"card-music-watermark\" viewBox=\"0 0 100 100\" fill=\"currentColor\"><path d=\"M51.5,93.5c-1.1,0-2.2-0.2-3.1-0.7c-3.1-1.7-4.6-5.1-4.2-9.4c0.2-2.1,1.1-4.2,2.7-5.9c1.9-2.1,4.5-3.3,7.3-3.3c0.4,0,0.8,0,1.2,0.1c0.7-3.4,1.4-8,2.1-13.6C44.3,58.7,33.1,51.8,33.1,39c0-8.9,6.7-16.1,15.1-16.1c3.1,0,6.1,1,8.4,2.8c1.3-4.3,2.4-9.3,3.1-14.5c0.2-1.3,1.2-2.2,2.5-2.2c0.2,0,0.4,0,0.6,0c1.4,0.2,2.3,1.5,2.1,2.9c-0.8,5.4-1.9,10.6-3.2,15.1c4.5,3.3,7.1,8.3,7.1,13.8c0,7.2-4.5,13.2-11.4,15.1c-0.6,4.6-1.3,8.7-1.8,11.8c6.6,1.4,11.4,6.7,11.4,12.9c0,7.1-5.9,12.8-13.2,12.8 C51.7,93.5,51.6,93.5,51.5,93.5z M50.4,79.2c-1.3,0-2.5,0.6-3.4,1.6c-0.8,0.9-1.2,2-1.3,3c-0.2,2.1,0.5,3.7,1.9,4.4 c1.1,0.6,2.6,0.5,3.9-0.3c1.7-1,2.7-3.2,2.7-5.6C53,80.3,51.7,79.3,50.4,79.2z M48.2,27.9c-5.6,0-10.1,5-10.1,11.1 c0,8.3,7.8,13.3,16.5,15.4c-0.6,4-1.2,7.5-1.7,10.2C44.7,63,40.1,58.8,40.1,53.2c0-1.4,1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5 c0,2.6,2.1,4.7,4.8,5.2c0.4-2.2,0.8-4.9,1.3-7.9c-4.6-1.8-8-5.7-8-10.3c0-4.5,3.1-8.3,7.2-9.1C49.7,28.1,48.9,27.9,48.2,27.9z M57,36.5c0-3.3-1.6-6.4-4.3-8.3c-2.4,1.1-4.1,3.4-4.1,6.1c0,3.1,2.4,5.6,5.5,5.8C55.7,39.3,57,38,57,36.5z M57.3,66 c-0.5-0.1-1-0.2-1.5-0.2c-3.1,0-5.9,1.7-7.4,4.5c0.5-2.5,1-5.3,1.4-8.3c4.1-0.9,7.6-3.2,9.6-6.4c0.5,3.1,0.8,5.9,1,8.2 C60.4,64.4,59,65.4,57.3,66z\"\/><\/svg>\n                    <svg class=\"quote-symbol\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z\" \/><\/svg>\n                    <p class=\"testimonial-text\">\"The discipline my children have learned here extends far beyond the piano. Truly exceptional teaching.\"<\/p>\n                    <div class=\"testimonial-footer\">\n                        <h3 class=\"testimonial-name\">Mrs. Wong<\/h3>\n                        <p class=\"testimonial-role\">Parent<\/p>\n                    <\/div>\n                <\/div>\n                <!-- Card 2 -->\n                <div class=\"testimonial-card variant-white\">\n                    <svg class=\"card-music-watermark\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z\" \/><\/svg>\n                    <svg class=\"quote-symbol\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z\" \/><\/svg>\n                    <p class=\"testimonial-text\">\"Training for my ARSM Diploma was incredibly rewarding. The standard here is truly international.\"<\/p>\n                    <div class=\"testimonial-footer\">\n                        <h3 class=\"testimonial-name\">Kevin Lim<\/h3>\n                        <p class=\"testimonial-role\">Violin Student<\/p>\n                    <\/div>\n                <\/div>\n                <!-- Card 3 -->\n                <div class=\"testimonial-card variant-dark\">\n                    <svg class=\"card-music-watermark\" viewBox=\"0 0 100 100\" fill=\"currentColor\"><path d=\"M40,30c-5.5,0-10,4.5-10,10c0,5.5,4.5,10,10,10c3.2,0,6.1-1.5,7.9-4c0.1,2.8-0.9,7.8-5,12.8c-4.6,5.6-10.9,9.4-10.9,9.4s0.6,1.4,1.8,2.2c0,0,8-4.5,13.3-12C52.3,51.1,53,43.4,53,39C53,34.1,49.1,30,40,30z M60,33c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S61.7,33,60,33z M60,47c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S61.7,47,60,47z\"\/><\/svg>\n                    <svg class=\"quote-symbol\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z\" \/><\/svg>\n                    <p class=\"testimonial-text\">\"Helen's Music Centre provided the exact technical foundation I needed for my Bachelor's degree in London.\"<\/p>\n                    <div class=\"testimonial-footer\">\n                        <h3 class=\"testimonial-name\">Sarah Chen<\/h3>\n                        <p class=\"testimonial-role\">Alumni<\/p>\n                    <\/div>\n                <\/div>\n                <!-- Card 4 -->\n                <div class=\"testimonial-card variant-border\">\n                    <svg class=\"card-music-watermark\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M18 3v11.12c-.5-.07-1-.12-1.5-.12-2.5 0-4.5 1.5-4.5 3.5s2 3.5 4.5 3.5 4.5-1.5 4.5-3.5V6.44l-11 2V16.1c-.5-.07-1-.12-1.5-.12-2.5 0-4.5 1.5-4.5 3.5s2 3.5 4.5 3.5 4.5-1.5 4.5-3.5V5l13-2z\"\/><\/svg>\n                    <svg class=\"quote-symbol\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z\" \/><\/svg>\n                    <p class=\"testimonial-text\">\"It's never too late to start. The faculty's patience and structured adult pedagogy gave me back my passion for music.\"<\/p>\n                    <div class=\"testimonial-footer\">\n                        <h3 class=\"testimonial-name\">David T.<\/h3>\n                        <p class=\"testimonial-role\">Adult Learner<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- Group 2 (Exact Duplicate for Infinite Loop) -->\n            <div class=\"marquee-group\">\n                <div class=\"testimonial-card variant-border\">\n                    <svg class=\"card-music-watermark\" viewBox=\"0 0 100 100\" fill=\"currentColor\"><path d=\"M51.5,93.5c-1.1,0-2.2-0.2-3.1-0.7c-3.1-1.7-4.6-5.1-4.2-9.4c0.2-2.1,1.1-4.2,2.7-5.9c1.9-2.1,4.5-3.3,7.3-3.3c0.4,0,0.8,0,1.2,0.1c0.7-3.4,1.4-8,2.1-13.6C44.3,58.7,33.1,51.8,33.1,39c0-8.9,6.7-16.1,15.1-16.1c3.1,0,6.1,1,8.4,2.8c1.3-4.3,2.4-9.3,3.1-14.5c0.2-1.3,1.2-2.2,2.5-2.2c0.2,0,0.4,0,0.6,0c1.4,0.2,2.3,1.5,2.1,2.9c-0.8,5.4-1.9,10.6-3.2,15.1c4.5,3.3,7.1,8.3,7.1,13.8c0,7.2-4.5,13.2-11.4,15.1c-0.6,4.6-1.3,8.7-1.8,11.8c6.6,1.4,11.4,6.7,11.4,12.9c0,7.1-5.9,12.8-13.2,12.8 C51.7,93.5,51.6,93.5,51.5,93.5z M50.4,79.2c-1.3,0-2.5,0.6-3.4,1.6c-0.8,0.9-1.2,2-1.3,3c-0.2,2.1,0.5,3.7,1.9,4.4 c1.1,0.6,2.6,0.5,3.9-0.3c1.7-1,2.7-3.2,2.7-5.6C53,80.3,51.7,79.3,50.4,79.2z M48.2,27.9c-5.6,0-10.1,5-10.1,11.1 c0,8.3,7.8,13.3,16.5,15.4c-0.6,4-1.2,7.5-1.7,10.2C44.7,63,40.1,58.8,40.1,53.2c0-1.4,1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5 c0,2.6,2.1,4.7,4.8,5.2c0.4-2.2,0.8-4.9,1.3-7.9c-4.6-1.8-8-5.7-8-10.3c0-4.5,3.1-8.3,7.2-9.1C49.7,28.1,48.9,27.9,48.2,27.9z M57,36.5c0-3.3-1.6-6.4-4.3-8.3c-2.4,1.1-4.1,3.4-4.1,6.1c0,3.1,2.4,5.6,5.5,5.8C55.7,39.3,57,38,57,36.5z M57.3,66 c-0.5-0.1-1-0.2-1.5-0.2c-3.1,0-5.9,1.7-7.4,4.5c0.5-2.5,1-5.3,1.4-8.3c4.1-0.9,7.6-3.2,9.6-6.4c0.5,3.1,0.8,5.9,1,8.2 C60.4,64.4,59,65.4,57.3,66z\"\/><\/svg>\n                    <svg class=\"quote-symbol\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z\" \/><\/svg>\n                    <p class=\"testimonial-text\">\"The discipline my children have learned here extends far beyond the piano. Truly exceptional teaching.\"<\/p>\n                    <div class=\"testimonial-footer\">\n                        <h3 class=\"testimonial-name\">Mrs. Wong<\/h3>\n                        <p class=\"testimonial-role\">Parent<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"testimonial-card variant-white\">\n                    <svg class=\"card-music-watermark\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z\" \/><\/svg>\n                    <svg class=\"quote-symbol\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z\" \/><\/svg>\n                    <p class=\"testimonial-text\">\"Training for my ARSM Diploma was incredibly rewarding. The standard here is truly international.\"<\/p>\n                    <div class=\"testimonial-footer\">\n                        <h3 class=\"testimonial-name\">Kevin Lim<\/h3>\n                        <p class=\"testimonial-role\">Violin Student<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"testimonial-card variant-dark\">\n                    <svg class=\"card-music-watermark\" viewBox=\"0 0 100 100\" fill=\"currentColor\"><path d=\"M40,30c-5.5,0-10,4.5-10,10c0,5.5,4.5,10,10,10c3.2,0,6.1-1.5,7.9-4c0.1,2.8-0.9,7.8-5,12.8c-4.6,5.6-10.9,9.4-10.9,9.4s0.6,1.4,1.8,2.2c0,0,8-4.5,13.3-12C52.3,51.1,53,43.4,53,39C53,34.1,49.1,30,40,30z M60,33c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S61.7,33,60,33z M60,47c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S61.7,47,60,47z\"\/><\/svg>\n                    <svg class=\"quote-symbol\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z\" \/><\/svg>\n                    <p class=\"testimonial-text\">\"Helen's Music Centre provided the exact technical foundation I needed for my Bachelor's degree in London.\"<\/p>\n                    <div class=\"testimonial-footer\">\n                        <h3 class=\"testimonial-name\">Sarah Chen<\/h3>\n                        <p class=\"testimonial-role\">Alumni<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"testimonial-card variant-border\">\n                    <svg class=\"card-music-watermark\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M18 3v11.12c-.5-.07-1-.12-1.5-.12-2.5 0-4.5 1.5-4.5 3.5s2 3.5 4.5 3.5 4.5-1.5 4.5-3.5V6.44l-11 2V16.1c-.5-.07-1-.12-1.5-.12-2.5 0-4.5 1.5-4.5 3.5s2 3.5 4.5 3.5 4.5-1.5 4.5-3.5V5l13-2z\"\/><\/svg>\n                    <svg class=\"quote-symbol\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z\" \/><\/svg>\n                    <p class=\"testimonial-text\">\"It's never too late to start. The faculty's patience and structured adult pedagogy gave me back my passion for music.\"<\/p>\n                    <div class=\"testimonial-footer\">\n                        <h3 class=\"testimonial-name\">David T.<\/h3>\n                        <p class=\"testimonial-role\">Adult Learner<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Row 2 (Slides Right) -->\n        <div class=\"marquee-track reverse\">\n            <!-- Group 1 -->\n            <div class=\"marquee-group\">\n                <!-- Card 5 -->\n                <div class=\"testimonial-card variant-dark\">\n                    <svg class=\"card-music-watermark\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M18 3v11.12c-.5-.07-1-.12-1.5-.12-2.5 0-4.5 1.5-4.5 3.5s2 3.5 4.5 3.5 4.5-1.5 4.5-3.5V6.44l-11 2V16.1c-.5-.07-1-.12-1.5-.12-2.5 0-4.5 1.5-4.5 3.5s2 3.5 4.5 3.5 4.5-1.5 4.5-3.5V5l13-2z\"\/><\/svg>\n                    <svg class=\"quote-symbol\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z\" \/><\/svg>\n                    <p class=\"testimonial-text\">\"The emphasis on breath control and resonance transformed my vocal capabilities entirely.\"<\/p>\n                    <div class=\"testimonial-footer\">\n                        <h3 class=\"testimonial-name\">Emily R.<\/h3>\n                        <p class=\"testimonial-role\">Vocalist<\/p>\n                    <\/div>\n                <\/div>\n                <!-- Card 6 -->\n                <div class=\"testimonial-card variant-border\">\n                    <svg class=\"card-music-watermark\" viewBox=\"0 0 100 100\" fill=\"currentColor\"><path d=\"M51.5,93.5c-1.1,0-2.2-0.2-3.1-0.7c-3.1-1.7-4.6-5.1-4.2-9.4c0.2-2.1,1.1-4.2,2.7-5.9c1.9-2.1,4.5-3.3,7.3-3.3c0.4,0,0.8,0,1.2,0.1c0.7-3.4,1.4-8,2.1-13.6C44.3,58.7,33.1,51.8,33.1,39c0-8.9,6.7-16.1,15.1-16.1c3.1,0,6.1,1,8.4,2.8c1.3-4.3,2.4-9.3,3.1-14.5c0.2-1.3,1.2-2.2,2.5-2.2c0.2,0,0.4,0,0.6,0c1.4,0.2,2.3,1.5,2.1,2.9c-0.8,5.4-1.9,10.6-3.2,15.1c4.5,3.3,7.1,8.3,7.1,13.8c0,7.2-4.5,13.2-11.4,15.1c-0.6,4.6-1.3,8.7-1.8,11.8c6.6,1.4,11.4,6.7,11.4,12.9c0,7.1-5.9,12.8-13.2,12.8 C51.7,93.5,51.6,93.5,51.5,93.5z M50.4,79.2c-1.3,0-2.5,0.6-3.4,1.6c-0.8,0.9-1.2,2-1.3,3c-0.2,2.1,0.5,3.7,1.9,4.4 c1.1,0.6,2.6,0.5,3.9-0.3c1.7-1,2.7-3.2,2.7-5.6C53,80.3,51.7,79.3,50.4,79.2z M48.2,27.9c-5.6,0-10.1,5-10.1,11.1 c0,8.3,7.8,13.3,16.5,15.4c-0.6,4-1.2,7.5-1.7,10.2C44.7,63,40.1,58.8,40.1,53.2c0-1.4,1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5 c0,2.6,2.1,4.7,4.8,5.2c0.4-2.2,0.8-4.9,1.3-7.9c-4.6-1.8-8-5.7-8-10.3c0-4.5,3.1-8.3,7.2-9.1C49.7,28.1,48.9,27.9,48.2,27.9z M57,36.5c0-3.3-1.6-6.4-4.3-8.3c-2.4,1.1-4.1,3.4-4.1,6.1c0,3.1,2.4,5.6,5.5,5.8C55.7,39.3,57,38,57,36.5z M57.3,66 c-0.5-0.1-1-0.2-1.5-0.2c-3.1,0-5.9,1.7-7.4,4.5c0.5-2.5,1-5.3,1.4-8.3c4.1-0.9,7.6-3.2,9.6-6.4c0.5,3.1,0.8,5.9,1,8.2 C60.4,64.4,59,65.4,57.3,66z\"\/><\/svg>\n                    <svg class=\"quote-symbol\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z\" \/><\/svg>\n                    <p class=\"testimonial-text\">\"Seeing our daughter's confidence grow on stage during the annual recitals has been priceless.\"<\/p>\n                    <div class=\"testimonial-footer\">\n                        <h3 class=\"testimonial-name\">Mr. & Mrs. Lee<\/h3>\n                        <p class=\"testimonial-role\">Parents<\/p>\n                    <\/div>\n                <\/div>\n                <!-- Card 7 -->\n                <div class=\"testimonial-card variant-white\">\n                    <svg class=\"card-music-watermark\" viewBox=\"0 0 100 100\" fill=\"currentColor\"><path d=\"M40,30c-5.5,0-10,4.5-10,10c0,5.5,4.5,10,10,10c3.2,0,6.1-1.5,7.9-4c0.1,2.8-0.9,7.8-5,12.8c-4.6,5.6-10.9,9.4-10.9,9.4s0.6,1.4,1.8,2.2c0,0,8-4.5,13.3-12C52.3,51.1,53,43.4,53,39C53,34.1,49.1,30,40,30z M60,33c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S61.7,33,60,33z M60,47c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S61.7,47,60,47z\"\/><\/svg>\n                    <svg class=\"quote-symbol\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z\" \/><\/svg>\n                    <p class=\"testimonial-text\">\"The ensemble practices are where everything clicked. It's a completely holistic approach to strings.\"<\/p>\n                    <div class=\"testimonial-footer\">\n                        <h3 class=\"testimonial-name\">Julian H.<\/h3>\n                        <p class=\"testimonial-role\">Cello Student<\/p>\n                    <\/div>\n                <\/div>\n                <!-- Card 8 -->\n                <div class=\"testimonial-card variant-dark\">\n                    <svg class=\"card-music-watermark\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z\" \/><\/svg>\n                    <svg class=\"quote-symbol\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z\" \/><\/svg>\n                    <p class=\"testimonial-text\">\"Madam Helen's pedagogy is unmatched. The focus on Japanese technique built my foundational strength.\"<\/p>\n                    <div class=\"testimonial-footer\">\n                        <h3 class=\"testimonial-name\">Amanda K.<\/h3>\n                        <p class=\"testimonial-role\">Piano Student<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- Group 2 (Exact Duplicate for Infinite Loop) -->\n            <div class=\"marquee-group\">\n                <div class=\"testimonial-card variant-dark\">\n                    <svg class=\"card-music-watermark\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M18 3v11.12c-.5-.07-1-.12-1.5-.12-2.5 0-4.5 1.5-4.5 3.5s2 3.5 4.5 3.5 4.5-1.5 4.5-3.5V6.44l-11 2V16.1c-.5-.07-1-.12-1.5-.12-2.5 0-4.5 1.5-4.5 3.5s2 3.5 4.5 3.5 4.5-1.5 4.5-3.5V5l13-2z\"\/><\/svg>\n                    <svg class=\"quote-symbol\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z\" \/><\/svg>\n                    <p class=\"testimonial-text\">\"The emphasis on breath control and resonance transformed my vocal capabilities entirely.\"<\/p>\n                    <div class=\"testimonial-footer\">\n                        <h3 class=\"testimonial-name\">Emily R.<\/h3>\n                        <p class=\"testimonial-role\">Vocalist<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"testimonial-card variant-border\">\n                    <svg class=\"card-music-watermark\" viewBox=\"0 0 100 100\" fill=\"currentColor\"><path d=\"M51.5,93.5c-1.1,0-2.2-0.2-3.1-0.7c-3.1-1.7-4.6-5.1-4.2-9.4c0.2-2.1,1.1-4.2,2.7-5.9c1.9-2.1,4.5-3.3,7.3-3.3c0.4,0,0.8,0,1.2,0.1c0.7-3.4,1.4-8,2.1-13.6C44.3,58.7,33.1,51.8,33.1,39c0-8.9,6.7-16.1,15.1-16.1c3.1,0,6.1,1,8.4,2.8c1.3-4.3,2.4-9.3,3.1-14.5c0.2-1.3,1.2-2.2,2.5-2.2c0.2,0,0.4,0,0.6,0c1.4,0.2,2.3,1.5,2.1,2.9c-0.8,5.4-1.9,10.6-3.2,15.1c4.5,3.3,7.1,8.3,7.1,13.8c0,7.2-4.5,13.2-11.4,15.1c-0.6,4.6-1.3,8.7-1.8,11.8c6.6,1.4,11.4,6.7,11.4,12.9c0,7.1-5.9,12.8-13.2,12.8 C51.7,93.5,51.6,93.5,51.5,93.5z M50.4,79.2c-1.3,0-2.5,0.6-3.4,1.6c-0.8,0.9-1.2,2-1.3,3c-0.2,2.1,0.5,3.7,1.9,4.4 c1.1,0.6,2.6,0.5,3.9-0.3c1.7-1,2.7-3.2,2.7-5.6C53,80.3,51.7,79.3,50.4,79.2z M48.2,27.9c-5.6,0-10.1,5-10.1,11.1 c0,8.3,7.8,13.3,16.5,15.4c-0.6,4-1.2,7.5-1.7,10.2C44.7,63,40.1,58.8,40.1,53.2c0-1.4,1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5 c0,2.6,2.1,4.7,4.8,5.2c0.4-2.2,0.8-4.9,1.3-7.9c-4.6-1.8-8-5.7-8-10.3c0-4.5,3.1-8.3,7.2-9.1C49.7,28.1,48.9,27.9,48.2,27.9z M57,36.5c0-3.3-1.6-6.4-4.3-8.3c-2.4,1.1-4.1,3.4-4.1,6.1c0,3.1,2.4,5.6,5.5,5.8C55.7,39.3,57,38,57,36.5z M57.3,66 c-0.5-0.1-1-0.2-1.5-0.2c-3.1,0-5.9,1.7-7.4,4.5c0.5-2.5,1-5.3,1.4-8.3c4.1-0.9,7.6-3.2,9.6-6.4c0.5,3.1,0.8,5.9,1,8.2 C60.4,64.4,59,65.4,57.3,66z\"\/><\/svg>\n                    <svg class=\"quote-symbol\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z\" \/><\/svg>\n                    <p class=\"testimonial-text\">\"Seeing our daughter's confidence grow on stage during the annual recitals has been priceless.\"<\/p>\n                    <div class=\"testimonial-footer\">\n                        <h3 class=\"testimonial-name\">Mr. & Mrs. Lee<\/h3>\n                        <p class=\"testimonial-role\">Parents<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"testimonial-card variant-white\">\n                    <svg class=\"card-music-watermark\" viewBox=\"0 0 100 100\" fill=\"currentColor\"><path d=\"M40,30c-5.5,0-10,4.5-10,10c0,5.5,4.5,10,10,10c3.2,0,6.1-1.5,7.9-4c0.1,2.8-0.9,7.8-5,12.8c-4.6,5.6-10.9,9.4-10.9,9.4s0.6,1.4,1.8,2.2c0,0,8-4.5,13.3-12C52.3,51.1,53,43.4,53,39C53,34.1,49.1,30,40,30z M60,33c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S61.7,33,60,33z M60,47c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S61.7,47,60,47z\"\/><\/svg>\n                    <svg class=\"quote-symbol\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z\" \/><\/svg>\n                    <p class=\"testimonial-text\">\"The ensemble practices are where everything clicked. It's a completely holistic approach to strings.\"<\/p>\n                    <div class=\"testimonial-footer\">\n                        <h3 class=\"testimonial-name\">Julian H.<\/h3>\n                        <p class=\"testimonial-role\">Cello Student<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"testimonial-card variant-dark\">\n                    <svg class=\"card-music-watermark\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z\" \/><\/svg>\n                    <svg class=\"quote-symbol\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z\" \/><\/svg>\n                    <p class=\"testimonial-text\">\"Madam Helen's pedagogy is unmatched. The focus on Japanese technique built my foundational strength.\"<\/p>\n                    <div class=\"testimonial-footer\">\n                        <h3 class=\"testimonial-name\">Amanda K.<\/h3>\n                        <p class=\"testimonial-role\">Piano Student<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4cdc553 e-con-full e-flex e-con e-parent\" data-id=\"4cdc553\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-58e7613 elementor-widget elementor-widget-html\" data-id=\"58e7613\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Import Google Fonts (if not already loaded by previous widgets) -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');\n\n\/* --- Elementor Global Bleed Overrides & Reset --- *\/\n.btq-gallery-section h2,\n.btq-gallery-section h3,\n.btq-gallery-section h4,\n.btq-gallery-section h5,\n.btq-gallery-section a,\n.btq-gallery-section button,\n.btq-gallery-section span,\n.btq-gallery-section p,\n.btq-gallery-section input {\n    text-decoration: none !important;\n    outline: none !important;\n    -webkit-tap-highlight-color: transparent !important;\n}\n\n.btq-gallery-section ::selection {\n    background-color: #c5a880 !important; \/* Gold text selection instead of pink *\/\n    color: #050505 !important;\n}\n.btq-gallery-section ::-moz-selection {\n    background-color: #c5a880 !important;\n    color: #050505 !important;\n}\n\n.btq-gallery-section *:focus,\n.btq-gallery-section button:focus,\n.btq-gallery-section a:focus {\n    outline: none !important;\n    box-shadow: 0 0 0 2px rgba(197, 168, 128, 0.3) !important; \/* Soft gold focus ring *\/\n}\n\n\/* --- Main Section Wrapper --- *\/\n.btq-gallery-section {\n    position: relative;\n    background-color: #050505;\n    color: #ffffff !important;\n    font-family: 'Inter', sans-serif;\n    padding: 120px 5%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    overflow: hidden;\n}\n\n.btq-gallery-container {\n    max-width: 1200px;\n    width: 100%;\n    position: relative;\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n}\n\n\/* --- Atmospheric Decorative Background Elements --- *\/\n.btq-gallery-bg-elements {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 1;\n    overflow: hidden;\n}\n\n.btq-gallery-staff-lines {\n    position: absolute;\n    top: 45%;\n    left: -10%;\n    width: 120%;\n    height: 48px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    opacity: 0.08; \n    transform: rotate(3deg);\n}\n\n.btq-gallery-staff-line {\n    height: 1px;\n    background-color: #c5a880;\n    width: 100%;\n}\n\n\/* --- Section Header Layout --- *\/\n.btq-gallery-header {\n    text-align: center;\n    max-width: 750px;\n    margin-bottom: 50px;\n}\n\n.btq-gallery-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    color: #c5a880 !important;\n    font-size: 0.75rem;\n    font-weight: 600;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    margin-bottom: 15px;\n}\n\n.btq-gallery-eyebrow svg {\n    width: 16px;\n    height: 16px;\n    margin-right: 8px;\n    color: #c5a880;\n}\n\n.btq-gallery-title {\n    font-family: 'Playfair Display', serif;\n    font-size: 3.2rem;\n    font-weight: 400;\n    margin: 0 0 20px 0;\n    letter-spacing: 0.5px;\n    color: #ffffff !important;\n}\n\n.btq-gallery-subtitle {\n    color: #a0a0a0 !important;\n    font-size: 1.05rem;\n    line-height: 1.6;\n    margin: 0;\n    font-weight: 400;\n}\n\n\/* --- Sleek Minimalist Filter Tabs --- *\/\n.btq-gallery-tabs {\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-bottom: 55px;\n    width: 100%;\n    border-bottom: 1px solid rgba(197, 168, 128, 0.08);\n    padding-bottom: 15px;\n}\n\n.btq-gallery-tab {\n    background: none !important;\n    border: none !important;\n    color: #888888 !important;\n    font-family: 'Inter', sans-serif;\n    font-size: 0.75rem;\n    font-weight: 600;\n    letter-spacing: 1.5px;\n    text-transform: uppercase;\n    cursor: pointer;\n    padding: 8px 18px;\n    position: relative;\n    transition: color 0.3s ease;\n}\n\n.btq-gallery-tab:hover, \n.btq-gallery-tab.active {\n    color: #c5a880 !important;\n}\n\n.btq-gallery-tab::after {\n    content: '';\n    position: absolute;\n    bottom: -16px; \n    left: 50%;\n    width: 0;\n    height: 1px;\n    background-color: #c5a880;\n    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);\n    transform: translateX(-50%);\n}\n\n.btq-gallery-tab.active::after {\n    width: 70%;\n}\n\n\/* --- Asymmetrical Grid Collage --- *\/\n.btq-gallery-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    grid-auto-rows: 240px; \n    gap: 25px;\n    width: 100%;\n    margin-bottom: 60px;\n    transition: all 0.5s ease;\n}\n\n\/* --- Gallery Card Base Styling --- *\/\n.btq-gallery-item {\n    position: relative;\n    background-color: #0c0c0c;\n    border: 1px solid rgba(197, 168, 128, 0.06);\n    overflow: hidden;\n    box-sizing: border-box;\n    cursor: pointer;\n    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), \n                transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n\/* --- Micro-Slider Structural Design --- *\/\n.btq-gallery-img-container {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    inset: 0;\n    overflow: hidden;\n    z-index: 1;\n    background-color: #080808;\n}\n\n.btq-gallery-slides {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n}\n\n.btq-gallery-img {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center center;\n    image-rendering: auto;\n    background-color: #080808;\n    opacity: 0;\n    z-index: 1;\n    transform: scale(1);\n    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), \n                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n.btq-gallery-img.active {\n    opacity: 1;\n    z-index: 2;\n}\n\n\/* Slide indicators (Dots) sitting elegantly top-right *\/\n.btq-slide-indicators {\n    position: absolute;\n    top: 30px;\n    right: 30px;\n    display: flex;\n    gap: 6px;\n    z-index: 5;\n}\n\n.btq-indicator-dot {\n    width: 5px;\n    height: 5px;\n    border-radius: 50%;\n    background-color: rgba(255, 255, 255, 0.25);\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n.btq-indicator-dot.active {\n    background-color: #c5a880;\n    transform: scale(1.2);\n}\n\n\/* Miniature Hover arrows *\/\n.btq-slide-controls {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    right: 0;\n    transform: translateY(-50%);\n    display: flex;\n    justify-content: space-between;\n    padding: 0 15px;\n    z-index: 5;\n    pointer-events: none; \/* Let background interactions pass through *\/\n}\n\n.btq-slide-arrow {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    background-color: rgba(5, 5, 5, 0.8);\n    border: 1px solid rgba(197, 168, 128, 0.25) !important;\n    color: #c5a880 !important;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    opacity: 0;\n    transform: scale(0.8);\n    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);\n    pointer-events: auto; \/* Active clicking allowed *\/\n    font-size: 1.1rem;\n    line-height: 1;\n    padding: 0;\n}\n\n.btq-slide-arrow:hover {\n    border-color: #c5a880 !important;\n    background-color: #c5a880 !important;\n    color: #050505 !important;\n}\n\n.btq-gallery-item:hover .btq-slide-arrow {\n    opacity: 1;\n    transform: scale(1);\n}\n\n\/* --- Asymmetrical Layout Grid Positioning --- *\/\n\/* Item 1: Large Vertical Hero (Left Side) *\/\n.btq-gallery-item.hero-tall {\n    grid-column: span 2;\n    grid-row: span 2;\n}\n\n\/* Items 2, 3, 4, 5: Small Squares (Right Side) *\/\n.btq-gallery-item.small-box {\n    grid-column: span 1;\n    grid-row: span 1;\n}\n\n\/* Items 6, 7: Wide Landscape Rows (Bottom Side) *\/\n.btq-gallery-item.wide-row {\n    grid-column: span 2;\n    grid-row: span 1;\n}\n\n\/* --- Elegant Overlay & Hover States --- *\/\n\/* Warm Gold Vignette Overlay *\/\n.btq-gallery-item::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(to top, rgba(5, 5, 5, 0.95) 0%, rgba(197, 168, 128, 0.05) 50%, rgba(5, 5, 5, 0.3) 100%);\n    opacity: 0.6;\n    z-index: 2;\n    transition: opacity 0.4s ease;\n}\n\n\/* Museum Style Internal Hairline Frame *\/\n.btq-gallery-item::after {\n    content: '';\n    position: absolute;\n    inset: 20px;\n    border: 1px solid rgba(197, 168, 128, 0.35);\n    opacity: 0;\n    transform: scale(1.03);\n    z-index: 3;\n    pointer-events: none;\n    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n\/* Hover Zoom active image only *\/\n.btq-gallery-item:hover .btq-gallery-img.active {\n    transform: scale(1);\n}\n\n.btq-gallery-item:hover::before {\n    opacity: 0.85;\n}\n\n.btq-gallery-item:hover::after {\n    opacity: 1;\n    transform: scale(1);\n}\n\n\/* --- Card Typography Details --- *\/\n.btq-gallery-meta {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    padding: 35px;\n    box-sizing: border-box;\n    z-index: 4;\n    text-align: left;\n    pointer-events: none; \/* Let arrows be clicked without title interruption *\/\n}\n\n.btq-gallery-tag {\n    color: #c5a880 !important;\n    font-size: 0.68rem;\n    font-weight: 600;\n    letter-spacing: 1.5px;\n    text-transform: uppercase;\n    display: inline-block;\n    margin-bottom: 8px;\n    transition: transform 0.4s ease, opacity 0.4s ease;\n}\n\n.btq-gallery-card-title {\n    font-family: 'Playfair Display', serif;\n    font-size: 1.3rem;\n    font-weight: 400;\n    margin: 0 0 6px 0;\n    color: #ffffff !important;\n    transition: transform 0.4s ease, opacity 0.4s ease;\n}\n\n.btq-gallery-caption {\n    color: #a0a0a0 !important;\n    font-size: 0.8rem;\n    line-height: 1.4;\n    margin: 0;\n    opacity: 0;\n    transform: translateY(10px);\n    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n\/* Card details slide on hover *\/\n.btq-gallery-item:hover .btq-gallery-caption {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n\/* --- Dimmed State for Editorial Masonry Filter --- *\/\n\/* Inactive cards gracefully fade-back on desktop to preserve masonry layout balance *\/\n.btq-gallery-item.dimmed {\n    opacity: 0.12;\n    pointer-events: none;\n    transform: scale(0.97);\n}\n\n\/* --- CTA Action Styling --- *\/\n.btq-gallery-cta {\n    width: auto;\n    border: 1px solid #1c1c1c !important;\n    background-color: transparent !important;\n    color: #ffffff !important;\n    text-align: center;\n    padding: 18px 45px;\n    font-family: 'Inter', sans-serif;\n    font-size: 11px;\n    font-weight: 600;\n    letter-spacing: 1.5px;\n    text-transform: uppercase;\n    transition: all 0.3s ease;\n    cursor: pointer;\n    box-sizing: border-box;\n    display: inline-block;\n    border-radius: 0 !important;\n}\n\n.btq-gallery-cta:hover {\n    border-color: #c5a880 !important;\n    background-color: rgba(197, 168, 128, 0.08) !important;\n    color: #c5a880 !important;\n}\n\n\/* --- Responsive Layout Configurations --- *\/\n@media (max-width: 1024px) {\n    .btq-gallery-header {\n        margin-bottom: 40px;\n    }\n    .btq-gallery-title {\n        font-size: 2.8rem;\n    }\n    .btq-gallery-grid {\n        grid-template-columns: repeat(2, 1fr);\n        grid-auto-rows: 220px;\n        gap: 20px;\n    }\n    \n    \/* Realigned for 2-column screens *\/\n    .btq-gallery-item.hero-tall {\n        grid-column: span 2;\n        grid-row: span 2;\n    }\n    .btq-gallery-item.small-box {\n        grid-column: span 1;\n        grid-row: span 1;\n    }\n    .btq-gallery-item.wide-row {\n        grid-column: span 2;\n        grid-row: span 1;\n    }\n}\n\n@media (max-width: 768px) {\n    .btq-gallery-section {\n        padding: 80px 5%;\n    }\n    .btq-gallery-title {\n        font-size: 2.4rem;\n    }\n    .btq-gallery-tabs {\n        margin-bottom: 40px;\n    }\n    \n    \/* Fully collapsed vertical layout for small screens *\/\n    .btq-gallery-grid {\n        display: flex;\n        flex-direction: column;\n        gap: 20px;\n    }\n    .btq-gallery-item {\n        width: 100%;\n        height: auto;\n        aspect-ratio: 4 \/ 3; \n    }\n    .btq-gallery-item.hero-tall {\n        aspect-ratio: 3 \/ 4; \n    }\n    \n    \/* Completely hide inactive cards on mobile viewport to prevent vertical gaps *\/\n    .btq-gallery-item.dimmed {\n        display: none !important;\n    }\n    \n    .btq-gallery-meta {\n        padding: 20px;\n    }\n    .btq-gallery-caption {\n        opacity: 1 !important;\n        transform: none !important;\n    }\n    .btq-gallery-item::after {\n        inset: 15px;\n    }\n    \n    .btq-slide-indicators {\n        top: 20px;\n        right: 20px;\n    }\n}\n\n@media (max-width: 480px) {\n    .btq-gallery-title {\n        font-size: 2.1rem;\n    }\n}\n\n\/* --- Instrument filter experience --- *\/\n.btq-gallery-section { touch-action: manipulation; }\n.btq-gallery-tabs { scrollbar-width: none; }\n.btq-gallery-tabs::-webkit-scrollbar,\n.btq-gallery-grid::-webkit-scrollbar { display: none; }\n.btq-gallery-tab { min-height: 44px; white-space: nowrap; }\n.btq-gallery-item.is-hidden { display: none !important; }\n\n.btq-gallery-grid.is-filtered {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    grid-auto-rows: 320px;\n}\n.btq-gallery-grid.is-filtered .btq-gallery-item:not(.is-hidden) {\n    grid-column: span 1;\n    grid-row: span 1;\n}\n.btq-gallery-item.is-entering {\n    animation: btqGalleryIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n@keyframes btqGalleryIn {\n    from { opacity: 0; transform: translateY(14px) scale(0.985); }\n    to { opacity: 1; transform: translateY(0) scale(1); }\n}\n\n@media (max-width: 768px) {\n    .btq-gallery-section { padding: 68px 0 72px; }\n    .btq-gallery-header,\n    .btq-gallery-cta { margin-left: 5vw; margin-right: 5vw; }\n    .btq-gallery-header { padding: 0; margin-bottom: 28px; }\n    .btq-gallery-subtitle { font-size: 0.95rem; line-height: 1.55; }\n    .btq-gallery-tabs {\n        justify-content: flex-start;\n        flex-wrap: nowrap;\n        gap: 4px;\n        overflow-x: auto;\n        overscroll-behavior-x: contain;\n        scroll-snap-type: x proximity;\n        padding: 0 5vw 12px;\n        margin-bottom: 28px;\n        box-sizing: border-box;\n    }\n    .btq-gallery-tab {\n        flex: 0 0 auto;\n        scroll-snap-align: center;\n        padding: 9px 15px;\n        border: 1px solid rgba(197, 168, 128, 0.16) !important;\n    }\n    .btq-gallery-tab.active {\n        color: #050505 !important;\n        background: #c5a880 !important;\n        border-color: #c5a880 !important;\n    }\n    .btq-gallery-tab::after { display: none; }\n    .btq-gallery-grid,\n    .btq-gallery-grid.is-filtered {\n        display: grid;\n        grid-template-columns: none;\n        grid-template-rows: none;\n        grid-auto-flow: column;\n        grid-auto-columns: min(84vw, 390px);\n        grid-auto-rows: min(104vw, 480px);\n        gap: 14px;\n        width: 100%;\n        overflow-x: auto;\n        overscroll-behavior-x: contain;\n        scroll-snap-type: x mandatory;\n        scroll-padding-left: 5vw;\n        padding: 0 5vw 14px;\n        margin-bottom: 36px;\n        box-sizing: border-box;\n    }\n    .btq-gallery-item,\n    .btq-gallery-item.hero-tall,\n    .btq-gallery-item.small-box,\n    .btq-gallery-item.wide-row,\n    .btq-gallery-grid.is-filtered .btq-gallery-item:not(.is-hidden) {\n        width: auto;\n        height: auto;\n        aspect-ratio: auto;\n        grid-column: auto;\n        grid-row: 1;\n        scroll-snap-align: start;\n        scroll-snap-stop: always;\n    }\n    .btq-slide-arrow {\n        width: 38px;\n        height: 38px;\n        opacity: 1;\n        transform: scale(1);\n        background-color: rgba(5, 5, 5, 0.76) !important;\n    }\n    .btq-gallery-meta { padding: 26px 24px; }\n    .btq-gallery-caption { max-width: 90%; }\n}\n\n@media (max-width: 480px) {\n    .btq-gallery-title {\n        font-size: clamp(2rem, 10vw, 2.45rem);\n        line-height: 1.08;\n    }\n    .btq-gallery-grid,\n    .btq-gallery-grid.is-filtered {\n        grid-auto-columns: 86vw;\n        grid-auto-rows: 112vw;\n    }\n}\n\n\/* --- Mobile UX refinement: one clear scroll direction --- *\/\n.btq-gallery-status {\n    display: none;\n    color: #777777 !important;\n    font-size: 0.72rem;\n    font-weight: 600;\n    letter-spacing: 1.2px;\n    text-transform: uppercase;\n}\n\n@media (max-width: 768px) {\n    .btq-gallery-container {\n        align-items: stretch;\n    }\n\n    .btq-gallery-tabs {\n        display: flex;\n        flex-wrap: wrap;\n        overflow: visible;\n        gap: 7px;\n        padding: 0 5vw;\n        border-bottom: 0;\n        scroll-snap-type: none;\n        margin-bottom: 14px;\n    }\n\n    .btq-gallery-tab {\n        flex: 1 1 calc(33.333% - 7px);\n        min-width: 88px;\n        min-height: 46px;\n        padding: 10px 12px;\n        text-align: center;\n        border-color: rgba(197, 168, 128, 0.22) !important;\n    }\n\n    .btq-gallery-status {\n        display: block;\n        margin: 0 5vw 18px;\n        min-height: 18px;\n    }\n\n    .btq-gallery-grid,\n    .btq-gallery-grid.is-filtered {\n        display: flex;\n        flex-direction: column;\n        grid-template: none;\n        gap: 16px;\n        width: auto;\n        overflow: visible;\n        padding: 0;\n        margin: 0 5vw 38px;\n        scroll-snap-type: none;\n    }\n\n    .btq-gallery-item,\n    .btq-gallery-item.hero-tall,\n    .btq-gallery-item.small-box,\n    .btq-gallery-item.wide-row,\n    .btq-gallery-grid.is-filtered .btq-gallery-item:not(.is-hidden) {\n        width: 100%;\n        height: clamp(350px, 112vw, 470px);\n        min-height: 0;\n        aspect-ratio: auto;\n        grid-column: auto;\n        grid-row: auto;\n        scroll-snap-align: none;\n        border-color: rgba(197, 168, 128, 0.13);\n    }\n\n    .btq-gallery-item::before {\n        opacity: 0.78;\n        background: linear-gradient(to top, rgba(5, 5, 5, 0.98) 0%, rgba(5, 5, 5, 0.2) 58%, rgba(5, 5, 5, 0.18) 100%);\n    }\n\n    .btq-gallery-img-container {\n        touch-action: pan-y;\n    }\n\n    .btq-gallery-img {\n        user-select: none;\n        -webkit-user-drag: none;\n        pointer-events: none;\n    }\n\n    .btq-gallery-item::after {\n        opacity: 1;\n        transform: none;\n        border-color: rgba(197, 168, 128, 0.2);\n        inset: 12px;\n    }\n\n    .btq-gallery-item:hover .btq-gallery-img.active {\n        transform: scale(1);\n    }\n\n    .btq-gallery-meta {\n        padding: 28px 25px;\n    }\n\n    .btq-gallery-tag {\n        margin-bottom: 7px;\n    }\n\n    .btq-gallery-card-title {\n        font-size: 1.45rem;\n        line-height: 1.18;\n    }\n\n    .btq-gallery-caption {\n        max-width: 100%;\n        font-size: 0.86rem;\n        line-height: 1.5;\n    }\n\n    .btq-slide-controls {\n        top: 46%;\n        padding: 0 20px;\n    }\n\n    .btq-slide-arrow {\n        width: 42px;\n        height: 42px;\n        font-size: 1.3rem;\n        border-color: rgba(197, 168, 128, 0.5) !important;\n        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32) !important;\n    }\n\n    .btq-slide-indicators {\n        top: 22px;\n        right: 22px;\n        gap: 8px;\n    }\n\n    .btq-indicator-dot {\n        width: 7px;\n        height: 7px;\n        background-color: rgba(255, 255, 255, 0.45);\n    }\n\n    .btq-gallery-cta {\n        width: calc(100% - 10vw);\n        margin-left: 5vw;\n        margin-right: 5vw;\n        padding: 18px 20px;\n    }\n}\n\n@media (max-width: 360px) {\n    .btq-gallery-tab {\n        min-width: 78px;\n        font-size: 0.68rem;\n        letter-spacing: 1px;\n    }\n\n    .btq-gallery-item,\n    .btq-gallery-item.hero-tall,\n    .btq-gallery-item.small-box,\n    .btq-gallery-item.wide-row {\n        height: 118vw;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .btq-gallery-item,\n    .btq-gallery-img,\n    .btq-gallery-tab,\n    .btq-slide-arrow {\n        transition-duration: 0.01ms !important;\n        animation-duration: 0.01ms !important;\n    }\n}\n\n\/* Four unique instruments: consistent landscape presentation on desktop. *\/\n@media (min-width: 769px) {\n    .btq-gallery-grid,\n    .btq-gallery-grid.is-filtered {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        grid-auto-rows: auto;\n        gap: 24px;\n        justify-content: center;\n        align-items: start;\n    }\n\n    .btq-gallery-grid .btq-gallery-item,\n    .btq-gallery-grid .btq-gallery-item.hero-tall,\n    .btq-gallery-grid .btq-gallery-item.small-box,\n    .btq-gallery-grid .btq-gallery-item.wide-row {\n        grid-column: span 1;\n        grid-row: span 1;\n        width: 100%;\n        height: auto;\n        aspect-ratio: 16 \/ 9;\n    }\n\n    .btq-gallery-grid.is-filtered {\n        grid-template-columns: minmax(0, 900px);\n        grid-auto-rows: auto;\n    }\n\n    .btq-gallery-grid.is-filtered .btq-gallery-item:not(.is-hidden) {\n        grid-column: 1;\n        grid-row: 1;\n        width: 100%;\n        max-width: 900px;\n        aspect-ratio: 16 \/ 9;\n    }\n\n    \/* All photographs now fill the exact same frame; cropping is intentional. *\/\n    .btq-gallery-img-container::before {\n        display: none;\n    }\n\n    .btq-gallery-slides {\n        z-index: 1;\n    }\n\n    .btq-gallery-img {\n        filter: none;\n    }\n}\n\n@media (min-width: 1101px) {\n    .btq-gallery-grid:not(.is-filtered) {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        grid-auto-rows: auto;\n        gap: 24px;\n    }\n\n    .btq-gallery-grid.is-filtered {\n        grid-template-columns: minmax(0, 900px);\n        grid-auto-rows: auto;\n    }\n\n    .btq-gallery-grid:not(.is-filtered) .btq-gallery-meta {\n        padding: 28px 24px;\n    }\n\n    .btq-gallery-grid:not(.is-filtered) .btq-gallery-card-title {\n        font-size: clamp(1.35rem, 1.7vw, 1.8rem);\n        line-height: 1.22;\n    }\n\n    .btq-gallery-grid:not(.is-filtered) .btq-gallery-caption {\n        font-size: 0.9rem;\n    }\n}\n\n\/* Elementor colour shield: keep every interactive state inside this gallery black and gold. *\/\n.btq-gallery-section {\n    --e-global-color-primary: #c5a880 !important;\n    --e-global-color-accent: #c5a880 !important;\n    --e-a-color-primary: #c5a880 !important;\n    accent-color: #c5a880 !important;\n}\n\n.btq-gallery-section .btq-slide-arrow,\n.btq-gallery-section .btq-slide-arrow:link,\n.btq-gallery-section .btq-slide-arrow:visited,\n.btq-gallery-section .btq-slide-arrow:active,\n.btq-gallery-section .btq-slide-arrow:focus {\n    background: rgba(5, 5, 5, 0.88) !important;\n    background-color: rgba(5, 5, 5, 0.88) !important;\n    border: 1px solid rgba(197, 168, 128, 0.58) !important;\n    color: #c5a880 !important;\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.38) !important;\n    outline: none !important;\n}\n\n.btq-gallery-section .btq-slide-arrow:hover {\n    background: #c5a880 !important;\n    background-color: #c5a880 !important;\n    border-color: #c5a880 !important;\n    color: #050505 !important;\n}\n\n.btq-gallery-section .btq-slide-arrow:focus-visible {\n    outline: 1px solid #c5a880 !important;\n    outline-offset: 3px !important;\n}\n\n.btq-gallery-section .btq-gallery-tab,\n.btq-gallery-section .btq-gallery-tab:hover,\n.btq-gallery-section .btq-gallery-tab:focus,\n.btq-gallery-section .btq-gallery-tab:active {\n    background: transparent !important;\n    background-color: transparent !important;\n    border-color: transparent !important;\n    color: #888888 !important;\n    box-shadow: none !important;\n}\n\n.btq-gallery-section .btq-gallery-tab.active,\n.btq-gallery-section .btq-gallery-tab.active:hover,\n.btq-gallery-section .btq-gallery-tab.active:focus,\n.btq-gallery-section .btq-gallery-tab.active:active {\n    background: transparent !important;\n    background-color: transparent !important;\n    border-color: transparent !important;\n    color: #c5a880 !important;\n}\n\n@media (max-width: 768px) {\n    \/* The uploaded gallery set is landscape: keep the full scene comfortable on phones. *\/\n    .btq-gallery-section .btq-gallery-item,\n    .btq-gallery-section .btq-gallery-item.hero-tall,\n    .btq-gallery-section .btq-gallery-item.small-box,\n    .btq-gallery-section .btq-gallery-item.wide-row,\n    .btq-gallery-section .btq-gallery-grid.is-filtered .btq-gallery-item:not(.is-hidden) {\n        width: 100% !important;\n        height: auto !important;\n        min-height: 0 !important;\n        aspect-ratio: 4 \/ 3 !important;\n    }\n\n    .btq-gallery-section .btq-gallery-img {\n        object-fit: cover !important;\n        object-position: center center !important;\n    }\n\n    .btq-gallery-section .btq-gallery-meta {\n        padding: 22px 21px !important;\n    }\n\n    .btq-gallery-section .btq-gallery-caption {\n        display: block;\n        font-size: 0.78rem;\n        line-height: 1.4;\n    }\n\n    .btq-gallery-section .btq-gallery-tab,\n    .btq-gallery-section .btq-gallery-tab:hover,\n    .btq-gallery-section .btq-gallery-tab:focus,\n    .btq-gallery-section .btq-gallery-tab:active {\n        border: 1px solid rgba(197, 168, 128, 0.25) !important;\n    }\n\n    .btq-gallery-section .btq-gallery-tab.active,\n    .btq-gallery-section .btq-gallery-tab.active:hover,\n    .btq-gallery-section .btq-gallery-tab.active:focus,\n    .btq-gallery-section .btq-gallery-tab.active:active {\n        background: #c5a880 !important;\n        background-color: #c5a880 !important;\n        border-color: #c5a880 !important;\n        color: #050505 !important;\n    }\n}\n<\/style>\n\n<!-- HTML Structure -->\n<div class=\"btq-gallery-section\" id=\"gallery\">\n    \n    <!-- Background Watermarks -->\n    <div class=\"btq-gallery-bg-elements\">\n        <div class=\"btq-gallery-staff-lines\">\n            <div class=\"btq-gallery-staff-line\"><\/div>\n            <div class=\"btq-gallery-staff-line\"><\/div>\n            <div class=\"btq-gallery-staff-line\"><\/div>\n            <div class=\"btq-gallery-staff-line\"><\/div>\n            <div class=\"btq-gallery-staff-line\"><\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"btq-gallery-container\">\n        \n        <!-- Header -->\n        <div class=\"btq-gallery-header\">\n            <span class=\"btq-gallery-eyebrow\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M9 18V5l12-2v13\"><\/path>\n                    <circle cx=\"6\" cy=\"18\" r=\"3\"><\/circle>\n                    <circle cx=\"18\" cy=\"16\" r=\"3\"><\/circle>\n                <\/svg>\n                Academy Gallery\n            <\/span>\n            <h2 class=\"btq-gallery-title\">Moments That Shape Musicians<\/h2>\n            <p class=\"btq-gallery-subtitle\">Choose an instrument to discover the learning moments, performances, and progress behind every musical journey.<\/p>\n        <\/div>\n\n        <!-- Filter Navigation Tabs -->\n        <div class=\"btq-gallery-tabs\" role=\"group\" aria-label=\"Filter gallery by instrument\">\n            <button class=\"btq-gallery-tab active\" data-filter=\"all\" aria-pressed=\"true\">All<\/button>\n            <button class=\"btq-gallery-tab\" data-filter=\"piano\" aria-pressed=\"false\">Piano<\/button>\n            <button class=\"btq-gallery-tab\" data-filter=\"guitar\" aria-pressed=\"false\">Guitar<\/button>\n            <button class=\"btq-gallery-tab\" data-filter=\"violin\" aria-pressed=\"false\">Violin<\/button>\n            <button class=\"btq-gallery-tab\" data-filter=\"vocal\" aria-pressed=\"false\">Vocal<\/button>\n        <\/div>\n\n        <p class=\"btq-gallery-status\" id=\"btqGalleryStatus\" aria-live=\"polite\">Showing all 4 moments<\/p>\n\n        <!-- Dynamic Editorial Grid Collage -->\n        <div class=\"btq-gallery-grid\" id=\"btqGalleryGrid\" aria-live=\"polite\">\n            \n            <!-- Item 1: Large Hero (Recital Slider) -->\n            <div class=\"btq-gallery-item hero-tall\" data-category=\"piano\">\n                <div class=\"btq-gallery-img-container\">\n                    <div class=\"btq-gallery-slides\">\n                        <img loading=\"eager\" fetchpriority=\"high\" decoding=\"async\" class=\"btq-gallery-img active\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/Generated-image-3.webp\" onerror=\"this.onerror=null;this.src='https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/Generated-image-1-1.webp';\" alt=\"Piano performance at Helen's Music Centre\">\n                        <img loading=\"lazy\" decoding=\"async\" class=\"btq-gallery-img\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/Generated-image-1-1.webp\" alt=\"Piano learning moment at Helen's Music Centre\">\n                        <img loading=\"lazy\" decoding=\"async\" class=\"btq-gallery-img\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/Inspected-image-300x200.jpeg\" data-hd=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/Inspected-image.jpeg\" data-hd-alt=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/Inspected-image-scaled.jpeg\" alt=\"Piano student at Helen's Music Centre\">\n                    <\/div>\n                <\/div>\n                <!-- Indicators -->\n                <div class=\"btq-slide-indicators\">\n                    <span class=\"btq-indicator-dot active\"><\/span>\n                    <span class=\"btq-indicator-dot\"><\/span>\n                    <span class=\"btq-indicator-dot\"><\/span>\n                <\/div>\n                <!-- Controls -->\n                <div class=\"btq-slide-controls\">\n                    <button class=\"btq-slide-arrow prev\" aria-label=\"Previous image\">&lsaquo;<\/button>\n                    <button class=\"btq-slide-arrow next\" aria-label=\"Next image\">&rsaquo;<\/button>\n                <\/div>\n                <div class=\"btq-gallery-meta\">\n                    <span class=\"btq-gallery-tag\">Piano<\/span>\n                    <h3 class=\"btq-gallery-card-title\">Grand Piano Performance<\/h3>\n                    <p class=\"btq-gallery-caption\">Building confident technique and expressive interpretation from studio to stage.<\/p>\n                <\/div>\n            <\/div>\n\n\n            <!-- Item 3: Small Box (Faculty Coaching String details) -->\n            <div class=\"btq-gallery-item small-box\" data-category=\"violin\">\n                <div class=\"btq-gallery-img-container\">\n                    <div class=\"btq-gallery-slides\">\n                        <img loading=\"eager\" fetchpriority=\"high\" decoding=\"async\" class=\"btq-gallery-img active\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/IMG_2345-300x200.jpeg\" data-hd=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/IMG_2345.jpeg\" data-hd-alt=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/IMG_2345-scaled.jpeg\" onerror=\"this.onerror=null;this.src='https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/0C6A5694-scaled-1-300x200.jpg';\" alt=\"Violin learning moment at Helen's Music Centre\">\n                        <img loading=\"lazy\" decoding=\"async\" class=\"btq-gallery-img\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/0C6A5694-scaled-1-300x200.jpg\" data-hd=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/0C6A5694-scaled-1.jpg\" alt=\"Violin performance at Helen's Music Centre\">\n                        <img loading=\"lazy\" decoding=\"async\" class=\"btq-gallery-img\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/0C6A5828-300x200.jpg\" data-hd=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/0C6A5828.jpg\" data-hd-alt=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/0C6A5828-scaled.jpg\" alt=\"Violin student at Helen's Music Centre\">\n                    <\/div>\n                <\/div>\n                <!-- Indicators -->\n                <div class=\"btq-slide-indicators\">\n                    <span class=\"btq-indicator-dot active\"><\/span>\n                    <span class=\"btq-indicator-dot\"><\/span>\n                    <span class=\"btq-indicator-dot\"><\/span>\n                <\/div>\n                <!-- Controls -->\n                <div class=\"btq-slide-controls\">\n                    <button class=\"btq-slide-arrow prev\" aria-label=\"Previous image\">&lsaquo;<\/button>\n                    <button class=\"btq-slide-arrow next\" aria-label=\"Next image\">&rsaquo;<\/button>\n                <\/div>\n                <div class=\"btq-gallery-meta\">\n                    <span class=\"btq-gallery-tag\">Violin<\/span>\n                    <h3 class=\"btq-gallery-card-title\">String Guidance<\/h3>\n                    <p class=\"btq-gallery-caption\">One-on-one professional alignment and precise pitch posture control.<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Item 4: Small Box (Achievements Highlight) -->\n            <div class=\"btq-gallery-item small-box\" data-category=\"vocal\">\n                <div class=\"btq-gallery-img-container\">\n                    <div class=\"btq-gallery-slides\">\n                        <img loading=\"eager\" fetchpriority=\"high\" decoding=\"async\" class=\"btq-gallery-img active\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/0C6A6023-scaled-1.jpg\" onerror=\"this.onerror=null;this.src='https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/0C6A5807-1-scaled-1-300x200.jpg';\" alt=\"Vocal performance at Helen's Music Centre\">\n                        <img loading=\"lazy\" decoding=\"async\" class=\"btq-gallery-img\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/0C6A5807-1-scaled-1-300x200.jpg\" data-hd=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/0C6A5807-1-scaled-1.jpg\" alt=\"Vocal student at Helen's Music Centre\">\n                        <img loading=\"lazy\" decoding=\"async\" class=\"btq-gallery-img\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/IMG_2350-300x200.jpeg\" data-hd=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/IMG_2350.jpeg\" data-hd-alt=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/IMG_2350-scaled.jpeg\" alt=\"Vocal learning moment at Helen's Music Centre\">\n                    <\/div>\n                <\/div>\n                <!-- Indicators -->\n                <div class=\"btq-slide-indicators\">\n                    <span class=\"btq-indicator-dot active\"><\/span>\n                    <span class=\"btq-indicator-dot\"><\/span>\n                    <span class=\"btq-indicator-dot\"><\/span>\n                <\/div>\n                <!-- Controls -->\n                <div class=\"btq-slide-controls\">\n                    <button class=\"btq-slide-arrow prev\" aria-label=\"Previous image\">&lsaquo;<\/button>\n                    <button class=\"btq-slide-arrow next\" aria-label=\"Next image\">&rsaquo;<\/button>\n                <\/div>\n                <div class=\"btq-gallery-meta\">\n                    <span class=\"btq-gallery-tag\">Vocal<\/span>\n                    <h3 class=\"btq-gallery-card-title\">Vocal Confidence<\/h3>\n                    <p class=\"btq-gallery-caption\">Developing healthy projection, musical phrasing, and confident stage presence.<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Item 5: Small Box (Heritage Archive) -->\n            <div class=\"btq-gallery-item small-box\" data-category=\"guitar\">\n                <div class=\"btq-gallery-img-container\">\n                    <div class=\"btq-gallery-slides\">\n                        <img loading=\"eager\" fetchpriority=\"high\" decoding=\"async\" class=\"btq-gallery-img active\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/Generated-image-2.webp\" onerror=\"this.onerror=null;this.src='https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/IMG_2342-300x200.jpeg';\" alt=\"Guitar learning moment at Helen's Music Centre\">\n                        <img loading=\"lazy\" decoding=\"async\" class=\"btq-gallery-img\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/IMG_2341-scaled.jpeg\" alt=\"Guitar performance at Helen's Music Centre\">\n                        <img loading=\"lazy\" decoding=\"async\" class=\"btq-gallery-img\" src=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/IMG_2342-300x200.jpeg\" data-hd=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/IMG_2342.jpeg\" data-hd-alt=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/IMG_2342-scaled.jpeg\" alt=\"Guitar student at Helen's Music Centre\">\n                    <\/div>\n                <\/div>\n                <!-- Indicators -->\n                <div class=\"btq-slide-indicators\">\n                    <span class=\"btq-indicator-dot active\"><\/span>\n                    <span class=\"btq-indicator-dot\"><\/span>\n                    <span class=\"btq-indicator-dot\"><\/span>\n                <\/div>\n                <!-- Controls -->\n                <div class=\"btq-slide-controls\">\n                    <button class=\"btq-slide-arrow prev\" aria-label=\"Previous image\">&lsaquo;<\/button>\n                    <button class=\"btq-slide-arrow next\" aria-label=\"Next image\">&rsaquo;<\/button>\n                <\/div>\n                <div class=\"btq-gallery-meta\">\n                    <span class=\"btq-gallery-tag\">Guitar<\/span>\n                    <h3 class=\"btq-gallery-card-title\">Acoustic Foundations<\/h3>\n                    <p class=\"btq-gallery-caption\">Learning clean chords, steady rhythm, and the confidence to play complete songs.<\/p>\n                <\/div>\n            <\/div>\n\n\n        <\/div>\n\n        <!-- Section Call to Action -->\n        <a href=\"https:\/\/calendly.com\/booking-helensmusiccentre\/30min\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"btq-gallery-cta\">Book a Free Trial Session<\/a>\n\n    <\/div>\n<\/div>\n\n<!-- Immersive Gallery Filtering & Micro-Slider Controller -->\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    const root = document.querySelector('.btq-gallery-section');\n    if (!root) return;\n\n    const filterTabs = root.querySelectorAll('.btq-gallery-tab');\n    const galleryItems = root.querySelectorAll('.btq-gallery-item');\n    const galleryGrid = root.querySelector('.btq-gallery-grid');\n    const galleryStatus = root.querySelector('.btq-gallery-status');\n\n    filterTabs.forEach(tab => {\n        tab.addEventListener('click', function() {\n            filterTabs.forEach(btn => {\n                btn.classList.remove('active');\n                btn.setAttribute('aria-pressed', 'false');\n            });\n            this.classList.add('active');\n            this.setAttribute('aria-pressed', 'true');\n\n            const filterValue = this.getAttribute('data-filter');\n            galleryGrid.classList.toggle('is-filtered', filterValue !== 'all');\n            let visibleCount = 0;\n\n            galleryItems.forEach((item, index) => {\n                const itemCategory = item.getAttribute('data-category');\n                const shouldShow = filterValue === 'all' || itemCategory === filterValue;\n\n                item.classList.toggle('is-hidden', !shouldShow);\n                item.classList.remove('dimmed', 'is-entering');\n                item.setAttribute('aria-hidden', shouldShow ? 'false' : 'true');\n\n                if (shouldShow) {\n                    visibleCount += 1;\n                    window.setTimeout(() => item.classList.add('is-entering'), index * 35);\n                }\n            });\n\n            if (galleryStatus) {\n                const label = filterValue === 'all'\n                    ? `Showing all ${visibleCount} moments`\n                    : `Showing ${visibleCount} ${this.textContent.trim()} moment${visibleCount === 1 ? '' : 's'}`;\n                galleryStatus.textContent = label;\n            }\n\n            if (window.innerWidth > 768) {\n                galleryGrid.scrollTo({ left: 0, behavior: 'smooth' });\n                this.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });\n            }\n        });\n    });\n\n    \/* --- Independent Micro-Slider Loop --- *\/\n    galleryItems.forEach((item, itemIndex) => {\n        const slides = item.querySelectorAll('.btq-gallery-img');\n        const dots = item.querySelectorAll('.btq-indicator-dot');\n        const prevBtn = item.querySelector('.btq-slide-arrow.prev');\n        const nextBtn = item.querySelector('.btq-slide-arrow.next');\n        const imageArea = item.querySelector('.btq-gallery-img-container');\n\n        function updateDesktopBackdrop(slide) {\n            if (!imageArea || !slide) return;\n            imageArea.style.setProperty('--active-gallery-image', `url(\"${slide.currentSrc || slide.src}\")`);\n        }\n\n        \/* Never leave a blank slide: retain its confirmed thumbnail before attempting HD. *\/\n        slides.forEach(slide => {\n            slide.dataset.thumbnailSrc = slide.getAttribute('src');\n\n            slide.addEventListener('error', function() {\n                const thumbnail = this.dataset.thumbnailSrc;\n                const firstCardImage = slides[0] ? slides[0].dataset.thumbnailSrc : '';\n\n                if (thumbnail && this.src !== thumbnail) {\n                    this.src = thumbnail;\n                } else if (firstCardImage && this.src !== firstCardImage) {\n                    this.src = firstCardImage;\n                }\n            });\n        });\n\n        function upgradeToHd(slide) {\n            if (!slide || slide.dataset.hdAttempted === 'true') return;\n            slide.dataset.hdAttempted = 'true';\n\n            const hdSources = [\n                slide.getAttribute('data-hd'),\n                slide.getAttribute('data-hd-alt')\n            ].filter(Boolean);\n\n            let hdIndex = 0;\n\n            function tryNextHdSource() {\n                if (hdIndex >= hdSources.length) return;\n\n                const candidate = hdSources[hdIndex++];\n                const preloader = new Image();\n\n                preloader.onload = function() {\n                    slide.src = candidate;\n                    slide.classList.add('hd-ready');\n                    if (slide.classList.contains('active')) updateDesktopBackdrop(slide);\n                };\n                preloader.onerror = tryNextHdSource;\n                preloader.src = candidate;\n            }\n\n            tryNextHdSource();\n        }\n\n        if (slides.length <= 1) return;\n\n        let currentIndex = 0;\n\n        function showSlide(index) {\n            if (index >= slides.length) {\n                currentIndex = 0;\n            } else if (index < 0) {\n                currentIndex = slides.length - 1;\n            } else {\n                currentIndex = index;\n            }\n\n            slides.forEach((slide, i) => {\n                if (i === currentIndex) {\n                    slide.classList.add('active');\n                    slide.setAttribute('aria-hidden', 'false');\n                } else {\n                    slide.classList.remove('active');\n                    slide.setAttribute('aria-hidden', 'true');\n                }\n            });\n\n            dots.forEach((dot, i) => {\n                if (i === currentIndex) {\n                    dot.classList.add('active');\n                    dot.setAttribute('aria-current', 'true');\n                } else {\n                    dot.classList.remove('active');\n                    dot.removeAttribute('aria-current');\n                }\n            });\n\n            updateDesktopBackdrop(slides[currentIndex]);\n            window.setTimeout(function() {\n                upgradeToHd(slides[currentIndex]);\n            }, 300 + (itemIndex * 180));\n        }\n\n        if (nextBtn) {\n            nextBtn.addEventListener('click', function(e) {\n                e.stopPropagation(); \n                showSlide(currentIndex + 1);\n            });\n        }\n\n        if (prevBtn) {\n            prevBtn.addEventListener('click', function(e) {\n                e.stopPropagation();\n                showSlide(currentIndex - 1);\n            });\n        }\n\n        dots.forEach((dot, index) => {\n            dot.setAttribute('role', 'button');\n            dot.setAttribute('tabindex', '0');\n            dot.setAttribute('aria-label', 'Show image ' + (index + 1));\n            dot.addEventListener('click', function(e) {\n                e.stopPropagation();\n                showSlide(index);\n            });\n            dot.addEventListener('keydown', function(e) {\n                if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault();\n                    showSlide(index);\n                }\n            });\n        });\n\n        \/* Horizontal swipe changes the image; vertical movement remains page scrolling. *\/\n        if (imageArea) {\n            let touchStartX = 0;\n            let touchStartY = 0;\n\n            imageArea.addEventListener('touchstart', function(e) {\n                if (!e.touches || e.touches.length !== 1) return;\n                touchStartX = e.touches[0].clientX;\n                touchStartY = e.touches[0].clientY;\n            }, { passive: true });\n\n            imageArea.addEventListener('touchend', function(e) {\n                if (!e.changedTouches || e.changedTouches.length !== 1) return;\n                const deltaX = e.changedTouches[0].clientX - touchStartX;\n                const deltaY = e.changedTouches[0].clientY - touchStartY;\n\n                if (Math.abs(deltaX) > 48 && Math.abs(deltaX) > Math.abs(deltaY) * 1.25) {\n                    showSlide(deltaX < 0 ? currentIndex + 1 : currentIndex - 1);\n                }\n            }, { passive: true });\n        }\n\n        showSlide(0);\n    });\n\n    \/* Keep accidental double-taps from zooming this interactive section. *\/\n    root.addEventListener('dblclick', function(e) { e.preventDefault(); }, { passive: false });\n    let lastTouchEnd = 0;\n    root.addEventListener('touchend', function(e) {\n        const now = Date.now();\n        if (now - lastTouchEnd <= 280) e.preventDefault();\n        lastTouchEnd = now;\n    }, { passive: false });\n});\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-aefb50b e-con-full e-flex e-con e-parent\" data-id=\"aefb50b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5e76742 elementor-widget elementor-widget-html\" data-id=\"5e76742\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Cinematic \"All of Me\" Scroll Score Styles -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@1,400;1,600&display=swap');\n\n\/* --- Immersive Viewport Bottom Container --- *\/\n.cinematic-score-wrapper {\n    position: fixed !important;\n    inset: auto 0 0 0 !important;\n    top: auto !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    left: 0 !important;\n    width: 100vw !important;\n    max-width: none !important;\n    margin: 0 !important;\n    transform: none !important;\n    height: 80px; \n    \/* Deep theatrical shadow fading up into the page *\/\n    background: linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(5,5,5,0.9) 30%, #050505 100%);\n    z-index: 9000 !important; \/* Remains below the website navigation and mobile menu *\/\n    pointer-events: none; \/* Passes clicks to the website behind it *\/\n    overflow: hidden;\n}\n\n\/* Atmospheric Background Light Leak *\/\n.c-glow-overlay {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: radial-gradient(ellipse at 50% 100%, rgba(197, 168, 128, 0.08) 0%, transparent 70%);\n    pointer-events: none;\n    z-index: 1;\n}\n\n\/* --- The Master Manuscript Staff --- *\/\n.c-staff-container {\n    position: absolute;\n    bottom: 28px; \n    left: 0;\n    width: 100%;\n    height: 24px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    z-index: 2;\n    \/* Cinematic fade out at the extreme left and right edges *\/\n    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);\n    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);\n}\n\n.c-staff-line {\n    width: 100%;\n    height: 1px;\n    background: linear-gradient(90deg, rgba(197, 168, 128, 0.1) 0%, rgba(197, 168, 128, 0.25) 50%, rgba(197, 168, 128, 0.1) 100%);\n    transition: background-color 0.3s ease;\n}\n\n\/* The illuminated trail left behind the playhead *\/\n.c-staff-fill {\n    position: absolute;\n    bottom: 28px;\n    left: 0;\n    width: 0%; \n    height: 24px;\n    z-index: 3;\n    background: repeating-linear-gradient(\n        0deg, \n        rgba(197, 168, 128, 0.5) 0px, rgba(197, 168, 128, 0.5) 1px, \n        transparent 1px, transparent 5.75px\n    );\n    transition: width 0.1s linear;\n}\n\n\/* --- Static Start Anchors (Fine-Line Clef & Key Signature) --- *\/\n.c-clef-group {\n    position: absolute;\n    bottom: 22px;\n    left: 3%;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    z-index: 4;\n}\n\n.c-treble-clef {\n    width: 20px;\n    height: auto;\n    filter: drop-shadow(0 0 4px rgba(197, 168, 128, 0.3));\n}\n\n.c-key-signature {\n    display: flex;\n    gap: 3px;\n    filter: drop-shadow(0 0 3px rgba(197, 168, 128, 0.2));\n}\n\n\/* Ab Major Flats (Bb, Eb, Ab, Db) *\/\n.c-flat {\n    width: 6px;\n    height: auto;\n}\n.c-flat:nth-child(1) { transform: translateY(2px); }\n.c-flat:nth-child(2) { transform: translateY(-6px); }\n.c-flat:nth-child(3) { transform: translateY(6px); }\n.c-flat:nth-child(4) { transform: translateY(-2px); }\n\n\/* --- The Glowing Anamorphic Playhead --- *\/\n.c-playhead {\n    position: absolute;\n    right: -1px;\n    bottom: -18px;\n    width: 2px;\n    height: 60px;\n    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 30%, #ffffff 70%, rgba(255,255,255,0) 100%);\n    border-radius: 2px;\n    z-index: 10;\n    box-shadow: \n        0 0 8px 1px rgba(255, 255, 255, 0.9),\n        0 0 20px 4px rgba(197, 168, 128, 0.8),\n        0 0 40px 10px rgba(197, 168, 128, 0.3);\n}\n\n\/* Horizontal Cinema Lens Flare *\/\n.c-playhead::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 140px;\n    height: 3px;\n    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(197, 168, 128, 0.7) 30%, rgba(197, 168, 128, 0) 80%);\n    filter: blur(1px);\n}\n\n\/* --- Detailed Engraved Notes --- *\/\n.c-note-cluster {\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    bottom: 25px;\n    transform: translateX(-50%);\n    z-index: 5;\n}\n\n.c-note {\n    width: 16px;\n    height: 24px;\n    color: rgba(197, 168, 128, 0.25);\n    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n    position: absolute;\n}\n\n.c-note svg {\n    width: 100%;\n    height: 100%;\n}\n\n\/* Pitch positions calibrated to the staff *\/\n.pitch-f  { bottom: 17px; } \/* F4 *\/\n.pitch-e  { bottom: 12px; } \/* Eb4 *\/\n.pitch-db { bottom: 7px; }  \/* Db4 *\/\n.pitch-c  { bottom: 2px; }  \/* C4 *\/\n\n\/* --- Note Struck \/ Played Animations --- *\/\n.c-note-cluster.played .c-note {\n    color: #ffffff; \/* Bursts white *\/\n    transform: translateY(-5px) scale(1.15) rotate(-3deg);\n    filter: drop-shadow(0 0 8px rgba(197, 168, 128, 0.8)) drop-shadow(0 0 2px #ffffff);\n}\n\n\/* Ripple effect on impact *\/\n.c-impact-ripple {\n    position: absolute;\n    width: 24px;\n    height: 24px;\n    border: 1px solid #c5a880;\n    border-radius: 50%;\n    opacity: 0;\n    pointer-events: none;\n}\n\n.c-note-cluster.played .c-impact-ripple {\n    animation: noteStrike 0.9s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;\n}\n\n@keyframes noteStrike {\n    0% { transform: scale(0.4); opacity: 1; border-width: 1.5px; }\n    100% { transform: scale(2.8); opacity: 0; border-width: 0px; filter: blur(1px); }\n}\n\n\/* Dynamic Particle Embers *\/\n.c-particle {\n    position: absolute;\n    width: 3px;\n    height: 3px;\n    background: radial-gradient(circle, #ffffff 0%, #c5a880 80%);\n    border-radius: 50%;\n    pointer-events: none;\n    box-shadow: 0 0 6px #c5a880;\n    animation: floatRise 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;\n    z-index: 15;\n}\n\n@keyframes floatRise {\n    0% { transform: translate(0, 0) scale(1); opacity: 1; }\n    100% { transform: translate(var(--x), var(--y)) scale(0); opacity: 0; }\n}\n\n\/* Mobile Adjustments *\/\n@media (max-width: 768px) {\n    html body .cinematic-score-wrapper {\n        display: none !important;\n        position: fixed !important;\n        inset: auto 0 0 0 !important;\n        top: auto !important;\n        right: 0 !important;\n        bottom: 0 !important;\n        left: 0 !important;\n        width: 100vw !important;\n        max-width: 100vw !important;\n        margin: 0 !important;\n        translate: none !important;\n        transform: none !important;\n        height: calc(56px + env(safe-area-inset-bottom, 0px));\n        background: linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(5,5,5,0.92) 28%, #050505 76%);\n        contain: layout paint;\n    }\n\n    .c-glow-overlay {\n        opacity: 0.65;\n    }\n\n    .c-clef-group {\n        display: none;\n    }\n\n    .c-staff-container,\n    .c-staff-fill {\n        bottom: calc(16px + env(safe-area-inset-bottom, 0px));\n        height: 18px;\n    }\n\n    .c-staff-container {\n        left: 4%;\n        width: 92%;\n        mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);\n        -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);\n    }\n\n    .c-staff-fill {\n        left: 4%;\n        max-width: 92%;\n        background: repeating-linear-gradient(\n            0deg,\n            rgba(197, 168, 128, 0.48) 0px,\n            rgba(197, 168, 128, 0.48) 1px,\n            transparent 1px,\n            transparent 4.25px\n        );\n        transition: none;\n    }\n\n    .c-note-cluster {\n        bottom: calc(15px + env(safe-area-inset-bottom, 0px));\n    }\n\n    .c-note {\n        width: 12px;\n        height: 18px;\n        transition-duration: 0.28s;\n    }\n\n    .pitch-f  { bottom: 12px; }\n    .pitch-e  { bottom: 9px; }\n    .pitch-db { bottom: 5px; }\n    .pitch-c  { bottom: 1px; }\n\n    .c-note-cluster.played .c-note {\n        transform: translateY(-2px) scale(1.08) rotate(-2deg);\n        filter: drop-shadow(0 0 5px rgba(197, 168, 128, 0.7));\n    }\n\n    .c-impact-ripple {\n        width: 18px;\n        height: 18px;\n    }\n\n    .c-playhead {\n        bottom: -13px;\n        height: 44px;\n        box-shadow:\n            0 0 6px 1px rgba(255, 255, 255, 0.8),\n            0 0 14px 3px rgba(197, 168, 128, 0.6),\n            0 0 24px 6px rgba(197, 168, 128, 0.2);\n    }\n\n    .c-playhead::after {\n        width: 72px;\n        height: 2px;\n    }\n\n    .c-particle {\n        width: 2px;\n        height: 2px;\n    }\n}\n\n@media (max-width: 768px) and (orientation: landscape),\n       (max-width: 768px) and (max-height: 500px) {\n    .cinematic-score-wrapper {\n        height: calc(42px + env(safe-area-inset-bottom, 0px));\n    }\n\n    .c-staff-container,\n    .c-staff-fill {\n        bottom: calc(11px + env(safe-area-inset-bottom, 0px));\n        height: 15px;\n    }\n\n    .c-note-cluster {\n        bottom: calc(10px + env(safe-area-inset-bottom, 0px));\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .c-note,\n    .c-staff-fill,\n    .c-playhead {\n        transition: none !important;\n    }\n\n    .c-impact-ripple,\n    .c-particle {\n        display: none !important;\n        animation: none !important;\n    }\n}\n<\/style>\n\n<!-- Hidden SVG Assets containing the Metallic Gold Gradient Definition -->\n<svg style=\"position: absolute; width: 0; height: 0; overflow: hidden;\" aria-hidden=\"true\">\n    <defs>\n        <linearGradient id=\"goldGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n            <stop offset=\"0%\" stop-color=\"#FFE8C5\" \/>\n            <stop offset=\"40%\" stop-color=\"#C5A880\" \/>\n            <stop offset=\"100%\" stop-color=\"#8A6E45\" \/>\n        <\/linearGradient>\n    <\/defs>\n<\/svg>\n\n<!-- HTML Structure -->\n<div class=\"cinematic-score-wrapper\" aria-hidden=\"true\" style=\"position:fixed!important;inset:auto 0 0 0!important;top:auto!important;right:0!important;bottom:0!important;left:0!important;width:100vw!important;max-width:none!important;margin:0!important;transform:none!important;z-index:9000!important;\">\n    <div class=\"c-glow-overlay\"><\/div>\n\n    <!-- The Empty Staff Base -->\n    <div class=\"c-staff-container\">\n        <div class=\"c-staff-line\"><\/div>\n        <div class=\"c-staff-line\"><\/div>\n        <div class=\"c-staff-line\"><\/div>\n        <div class=\"c-staff-line\"><\/div>\n        <div class=\"c-staff-line\"><\/div>\n    <\/div>\n\n    <!-- Start Anchor: Treble Clef & Ab Major Key Signature with Gradient Fill -->\n    <div class=\"c-clef-group\">\n        <svg class=\"c-treble-clef\" viewBox=\"0 0 320 512\" fill=\"url(#goldGradient)\">\n            <path d=\"M207.6 15.2c-8.8-9.8-21.4-15.2-34.7-15.2c-28.8 0-52.6 22-56.5 50.4l-10.7 75.2c-33.2 12.3-57.7 43.9-57.7 79.7c0 42.6 28.2 78.8 68.1 90.7l-13 90.7c-2.1 15-1.7 30.4 3.2 44.8c5.7 16.7 16.6 31.3 31.3 42c12.7 9.3 28.5 14.5 44.6 14.5c36.2 0 66.7-29 68.7-65.1c.6-10.4-2.8-20.7-9.3-28.7c-7.3-9.1-17.1-14-27.4-14c-10.8 0-21.2 5.3-27.9 14c-6.4 8.2-9.4 18.7-8.3 29.2c2.2 19.8 20.5 34.2 40.4 32.1c0 0 0 0-.1 0c-5.3 .7-10.7 0-15.6-2c-8.5-3.5-15.4-9.7-19.6-18c-3.8-7.5-5-16.1-3.4-24.4l13.6-91.5c44.6-6 78.7-45 78.7-81.6c0-36.8-26.1-68.9-65.9-76.3l8.9-62.3c1.7-14.1-.3-28.2-5.8-41.3c-.4-.8-.8-1.7-1.3-2.5l14.8 11.2c5.9 4.5 14.4 3.3 18.9-2.6c4.5-5.9 3.3-14.4-2.6-18.9l-31.4-30.1zM157.9 187.9l-14.9 103.7c-21.3-9.6-38.1-30.4-38.1-53.6c0-28.5 20.8-51.8 48.3-56.3c1.6-.2 3.2-.4 4.9-.4l-.2 6.6zm38.5 98.3l-14.4 100.9c-1.6-2.3-3.4-4.4-5.4-6.3c-9.3-8.9-21.9-14.1-35-14.1c-11.9 0-23.1 4.2-32.2 11.4c5.6-10 13.5-18.6 23.1-25.1l63.9-66.8z\"\/>\n        <\/svg>\n        <div class=\"c-key-signature\" fill=\"url(#goldGradient)\">\n            <!-- 4 Flats (Bb, Eb, Ab, Db) -->\n            <svg class=\"c-flat\" viewBox=\"0 0 256 512\" fill=\"url(#goldGradient)\"><path d=\"M112 16c0-8.8-7.2-16-16-16S80 7.2 80 16v136.6C59.7 141.2 36.3 128 16 128C7.2 128 0 135.2 0 144s7.2 16 16 16c27 0 49 20.9 50.8 47.5L34 329.1C13.2 355.2 0 388.2 0 424c0 38.6 15 72.4 39.5 96.6c24.1 23.7 56 38.1 90.7 39.3c5.3 .2 10.3-2.6 13.1-7.1l104-168c4.2-6.8 3.5-15.6-1.7-21.7s-13.8-6.6-20.1-1.3L135.8 436.5C108 427.5 87 398.4 87 364c0-23.8 9.3-45.5 24.5-61.5l30.4-38c26.1-32.6 42.1-72.8 42.1-116.5c0-45.7-16-87.1-42.3-120H112z\"\/><\/svg>\n            <svg class=\"c-flat\" viewBox=\"0 0 256 512\" fill=\"url(#goldGradient)\"><path d=\"M112 16c0-8.8-7.2-16-16-16S80 7.2 80 16v136.6C59.7 141.2 36.3 128 16 128C7.2 128 0 135.2 0 144s7.2 16 16 16c27 0 49 20.9 50.8 47.5L34 329.1C13.2 355.2 0 388.2 0 424c0 38.6 15 72.4 39.5 96.6c24.1 23.7 56 38.1 90.7 39.3c5.3 .2 10.3-2.6 13.1-7.1l104-168c4.2-6.8 3.5-15.6-1.7-21.7s-13.8-6.6-20.1-1.3L135.8 436.5C108 427.5 87 398.4 87 364c0-23.8 9.3-45.5 24.5-61.5l30.4-38c26.1-32.6 42.1-72.8 42.1-116.5c0-45.7-16-87.1-42.3-120H112z\"\/><\/svg>\n            <svg class=\"c-flat\" viewBox=\"0 0 256 512\" fill=\"url(#goldGradient)\"><path d=\"M112 16c0-8.8-7.2-16-16-16S80 7.2 80 16v136.6C59.7 141.2 36.3 128 16 128C7.2 128 0 135.2 0 144s7.2 16 16 16c27 0 49 20.9 50.8 47.5L34 329.1C13.2 355.2 0 388.2 0 424c0 38.6 15 72.4 39.5 96.6c24.1 23.7 56 38.1 90.7 39.3c5.3 .2 10.3-2.6 13.1-7.1l104-168c4.2-6.8 3.5-15.6-1.7-21.7s-13.8-6.6-20.1-1.3L135.8 436.5C108 427.5 87 398.4 87 364c0-23.8 9.3-45.5 24.5-61.5l30.4-38c26.1-32.6 42.1-72.8 42.1-116.5c0-45.7-16-87.1-42.3-120H112z\"\/><\/svg>\n            <svg class=\"c-flat\" viewBox=\"0 0 256 512\" fill=\"url(#goldGradient)\"><path d=\"M112 16c0-8.8-7.2-16-16-16S80 7.2 80 16v136.6C59.7 141.2 36.3 128 16 128C7.2 128 0 135.2 0 144s7.2 16 16 16c27 0 49 20.9 50.8 47.5L34 329.1C13.2 355.2 0 388.2 0 424c0 38.6 15 72.4 39.5 96.6c24.1 23.7 56 38.1 90.7 39.3c5.3 .2 10.3-2.6 13.1-7.1l104-168c4.2-6.8 3.5-15.6-1.7-21.7s-13.8-6.6-20.1-1.3L135.8 436.5C108 427.5 87 398.4 87 364c0-23.8 9.3-45.5 24.5-61.5l30.4-38c26.1-32.6 42.1-72.8 42.1-116.5c0-45.7-16-87.1-42.3-120H112z\"\/><\/svg>\n        <\/div>\n    <\/div>\n\n    <!-- The Illuminated Gold Progress Fill & Laser Playhead -->\n    <div class=\"c-staff-fill\" id=\"cScoreTrack\">\n        <div class=\"c-playhead\"><\/div>\n    <\/div>\n\n    <!-- Melody Notes Sequence (F4, F4, F4, C4, Eb4, Eb4, Db4, C4) -->\n    <div class=\"c-note-cluster\" data-trigger=\"15\" style=\"left: 15%;\">\n        <div class=\"c-impact-ripple pitch-f\"><\/div>\n        <div class=\"c-note pitch-f\">\n            <svg viewBox=\"0 0 20 30\">\n                <ellipse cx=\"6\" cy=\"18\" rx=\"6\" ry=\"4\" transform=\"rotate(-20 6 18)\" fill=\"currentColor\"\/>\n                <line x1=\"11\" y1=\"18\" x2=\"11\" y2=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n            <\/svg>\n        <\/div>\n    <\/div>\n\n    <div class=\"c-note-cluster\" data-trigger=\"25\" style=\"left: 25%;\">\n        <div class=\"c-impact-ripple pitch-f\"><\/div>\n        <div class=\"c-note pitch-f\">\n            <svg viewBox=\"0 0 20 30\">\n                <ellipse cx=\"6\" cy=\"18\" rx=\"6\" ry=\"4\" transform=\"rotate(-20 6 18)\" fill=\"currentColor\"\/>\n                <line x1=\"11\" y1=\"18\" x2=\"11\" y2=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n            <\/svg>\n        <\/div>\n    <\/div>\n\n    <div class=\"c-note-cluster\" data-trigger=\"35\" style=\"left: 35%;\">\n        <div class=\"c-impact-ripple pitch-f\"><\/div>\n        <div class=\"c-note pitch-f\">\n            <svg viewBox=\"0 0 20 30\">\n                <ellipse cx=\"6\" cy=\"18\" rx=\"6\" ry=\"4\" transform=\"rotate(-20 6 18)\" fill=\"currentColor\"\/>\n                <line x1=\"11\" y1=\"18\" x2=\"11\" y2=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n            <\/svg>\n        <\/div>\n    <\/div>\n\n    <div class=\"c-note-cluster\" data-trigger=\"45\" style=\"left: 45%;\">\n        <div class=\"c-impact-ripple pitch-c\"><\/div>\n        <div class=\"c-note pitch-c\">\n            <svg viewBox=\"0 0 20 30\">\n                <ellipse cx=\"6\" cy=\"18\" rx=\"6\" ry=\"4\" transform=\"rotate(-20 6 18)\" fill=\"currentColor\"\/>\n                <line x1=\"11\" y1=\"18\" x2=\"11\" y2=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n            <\/svg>\n        <\/div>\n    <\/div>\n\n    <div class=\"c-note-cluster\" data-trigger=\"60\" style=\"left: 60%;\">\n        <div class=\"c-impact-ripple pitch-e\"><\/div>\n        <div class=\"c-note pitch-e\">\n            <svg viewBox=\"0 0 20 30\">\n                <ellipse cx=\"6\" cy=\"18\" rx=\"6\" ry=\"4\" transform=\"rotate(-20 6 18)\" fill=\"currentColor\"\/>\n                <line x1=\"11\" y1=\"18\" x2=\"11\" y2=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n            <\/svg>\n        <\/div>\n    <\/div>\n\n    <div class=\"c-note-cluster\" data-trigger=\"70\" style=\"left: 70%;\">\n        <div class=\"c-impact-ripple pitch-e\"><\/div>\n        <div class=\"c-note pitch-e\">\n            <svg viewBox=\"0 0 20 30\">\n                <ellipse cx=\"6\" cy=\"18\" rx=\"6\" ry=\"4\" transform=\"rotate(-20 6 18)\" fill=\"currentColor\"\/>\n                <line x1=\"11\" y1=\"18\" x2=\"11\" y2=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n            <\/svg>\n        <\/div>\n    <\/div>\n\n    <div class=\"c-note-cluster\" data-trigger=\"80\" style=\"left: 80%;\">\n        <div class=\"c-impact-ripple pitch-db\"><\/div>\n        <div class=\"c-note pitch-db\">\n            <svg viewBox=\"0 0 20 30\">\n                <ellipse cx=\"6\" cy=\"18\" rx=\"6\" ry=\"4\" transform=\"rotate(-20 6 18)\" fill=\"currentColor\"\/>\n                <line x1=\"11\" y1=\"18\" x2=\"11\" y2=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n            <\/svg>\n        <\/div>\n    <\/div>\n\n    <div class=\"c-note-cluster\" data-trigger=\"92\" style=\"left: 92%;\">\n        <div class=\"c-impact-ripple pitch-c\"><\/div>\n        <!-- Sustained Half Note Head (Hollow Center) -->\n        <div class=\"c-note pitch-c\">\n            <svg viewBox=\"0 0 20 30\">\n                <ellipse cx=\"6\" cy=\"18\" rx=\"6\" ry=\"4\" transform=\"rotate(-20 6 18)\" stroke=\"currentColor\" stroke-width=\"2.2\" fill=\"none\"\/>\n                <line x1=\"11\" y1=\"18\" x2=\"11\" y2=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n            <\/svg>\n        <\/div>\n    <\/div>\n\n<\/div>\n\n<!-- Cinematic Scroll Controller -->\n<script>\nfunction initCinematicScore() {\n    const allScoreWrappers = Array.from(document.querySelectorAll('.cinematic-score-wrapper'));\n    if (!allScoreWrappers.length || !document.body) return;\n\n    \/* Elementor can output separate desktop\/mobile copies. Keep one canonical\n       score so a second copy cannot remain trapped in the middle of the page. *\/\n    const scoreWrapper = allScoreWrappers.find(function(wrapper) {\n        return wrapper.dataset.scoreReady === 'true';\n    }) || allScoreWrappers[0];\n\n    allScoreWrappers.forEach(function(wrapper) {\n        if (wrapper !== scoreWrapper) wrapper.remove();\n    });\n\n    \/* Elementor containers can trap fixed children. Moving the visual directly\n       under body guarantees that it stays attached to the viewport bottom. *\/\n    if (scoreWrapper.parentElement !== document.body) {\n        document.body.appendChild(scoreWrapper);\n    }\n\n    if (scoreWrapper.dataset.scoreReady === 'true') return;\n    scoreWrapper.dataset.scoreReady = 'true';\n\n    const playheadTrack = scoreWrapper.querySelector('#cScoreTrack');\n    if (!scoreWrapper || !playheadTrack) return;\n\n    const noteClusters = scoreWrapper.querySelectorAll('.c-note-cluster');\n    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');\n    const mobileView = window.matchMedia('(max-width: 768px)');\n    let scrollTicking = false;\n    let viewportPinTicking = false;\n    let mobileViewportShift = 0;\n\n    \/* iOS browsers can enlarge the visible viewport when their bottom toolbar\n       changes state without moving a fixed element that was pinned earlier.\n       Measure the real visual bottom and correct only the difference. *\/\n    function syncScoreToVisibleBottom() {\n        viewportPinTicking = false;\n\n        if (!window.visualViewport || !mobileView.matches) {\n            mobileViewportShift = 0;\n            scoreWrapper.style.setProperty('transform', 'none', 'important');\n            return;\n        }\n\n        const visualBottom = window.visualViewport.offsetTop + window.visualViewport.height;\n        const currentBottom = scoreWrapper.getBoundingClientRect().bottom;\n        const correction = visualBottom - currentBottom;\n\n        if (Math.abs(correction) < 0.75) return;\n\n        mobileViewportShift += correction;\n        scoreWrapper.style.setProperty(\n            'transform',\n            `translate3d(0, ${mobileViewportShift.toFixed(2)}px, 0)`,\n            'important'\n        );\n    }\n\n    function scheduleViewportPin() {\n        if (viewportPinTicking) return;\n        viewportPinTicking = true;\n        window.requestAnimationFrame(syncScoreToVisibleBottom);\n    }\n\n    function updateScoreProgress() {\n        \/\/ Calculate Scroll Percentage\n        const winScroll = Math.max(window.scrollY || document.documentElement.scrollTop || 0, 0);\n        const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;\n        const scrolled = height > 0 ? Math.min((winScroll \/ height) * 100, 100) : 0;\n\n        \/\/ Drive the golden track progress\n        playheadTrack.style.width = scrolled + '%';\n\n        \/\/ Trigger cinematic events when playhead sweeps over notes\n        noteClusters.forEach(cluster => {\n            const triggerPoint = parseFloat(cluster.getAttribute('data-trigger'));\n            \n            if (scrolled >= triggerPoint) {\n                if (!cluster.classList.contains('played')) {\n                    cluster.classList.add('played');\n                    if (!reduceMotion.matches) triggerSparkles(cluster);\n                }\n            } else {\n                cluster.classList.remove('played');\n                cluster.dataset.sparkled = 'false'; \/\/ Reset trigger so scrolling back up rearms sparkles\n            }\n        });\n\n        scrollTicking = false;\n    }\n\n    window.addEventListener('scroll', function() {\n        scheduleViewportPin();\n        if (!scrollTicking) {\n            window.requestAnimationFrame(updateScoreProgress);\n            scrollTicking = true;\n        }\n    }, { passive: true });\n\n    window.addEventListener('resize', function() {\n        scheduleViewportPin();\n        if (!scrollTicking) {\n            window.requestAnimationFrame(updateScoreProgress);\n            scrollTicking = true;\n        }\n    }, { passive: true });\n\n    window.addEventListener('orientationchange', scheduleViewportPin, { passive: true });\n\n    if (window.visualViewport) {\n        window.visualViewport.addEventListener('resize', scheduleViewportPin, { passive: true });\n        window.visualViewport.addEventListener('scroll', scheduleViewportPin, { passive: true });\n    }\n\n    \/\/ Particle Emitter Function for Cinematic Embers\n    function triggerSparkles(cluster) {\n        if (cluster.dataset.sparkled === 'true') return;\n        cluster.dataset.sparkled = 'true';\n\n        const particleCount = mobileView.matches ? 3 : 8;\n\n        for (let i = 0; i < particleCount; i++) {\n            const particle = document.createElement('div');\n            particle.className = 'c-particle';\n\n            \/\/ Upward dispersion mathematics\n            const angle = (Math.random() * Math.PI) - Math.PI; \n            const speed = 15 + Math.random() * 35;\n            const x = Math.cos(angle) * speed;\n            const y = Math.sin(angle) * speed - 15;\n\n            particle.style.setProperty('--x', `${x}px`);\n            particle.style.setProperty('--y', `${y}px`);\n\n            \/\/ Randomize size variation\n            const scale = 0.5 + Math.random() * 0.5;\n            particle.style.transform = `scale(${scale})`;\n            particle.style.left = '50%';\n            particle.style.bottom = '15px';\n\n            cluster.appendChild(particle);\n\n            \/\/ Clean up DOM after animation completes\n            setTimeout(() => {\n                particle.remove();\n            }, 1000);\n        }\n    }\n\n    \/\/ Set the correct progress immediately, even before the first user scroll.\n    updateScoreProgress();\n    scheduleViewportPin();\n}\n\nif (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initCinematicScore, { once: true });\n} else {\n    initCinematicScore();\n}\n\n\/* Elementor may render an HTML widget after the page DOM is already ready. *\/\nwindow.addEventListener('elementor\/frontend\/init', initCinematicScore);\nwindow.setTimeout(initCinematicScore, 250);\n\n\/* Catch responsive Elementor copies inserted after initial page rendering. *\/\nif (!window.__cinematicScoreObserver && document.documentElement) {\n    window.__cinematicScoreObserver = new MutationObserver(function(mutations) {\n        const scoreWasAdded = mutations.some(function(mutation) {\n            return Array.from(mutation.addedNodes).some(function(node) {\n                return node.nodeType === 1 && (\n                    node.matches?.('.cinematic-score-wrapper') ||\n                    node.querySelector?.('.cinematic-score-wrapper')\n                );\n            });\n        });\n\n        if (scoreWasAdded) window.requestAnimationFrame(initCinematicScore);\n    });\n\n    window.__cinematicScoreObserver.observe(document.documentElement, {\n        childList: true,\n        subtree: true\n    });\n}\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>From our archives The memories behind the music. Before today\u2019s stages and classrooms, there were first lessons, annual concerts and small moments that shaped generations of musicians. A glimpse into our early Kawai years. Helen\u2019s archive 01 \/ 10 Where every journey began Quiet practice, patient guidance and the first notes of a lifelong relationship [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Home - Helen<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/helensmusiccentre.com.my\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home - Helen\" \/>\n<meta property=\"og:description\" content=\"From our archives The memories behind the music. Before today\u2019s stages and classrooms, there were first lessons, annual concerts and small moments that shaped generations of musicians. A glimpse into our early Kawai years. Helen\u2019s archive 01 \/ 10 Where every journey began Quiet practice, patient guidance and the first notes of a lifelong relationship [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/helensmusiccentre.com.my\/\" \/>\n<meta property=\"og:site_name\" content=\"Helen\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-17T02:53:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/01-early-piano-lesson-scaled.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"67 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/helensmusiccentre.com.my\\\/\",\"url\":\"https:\\\/\\\/helensmusiccentre.com.my\\\/\",\"name\":\"Home - Helen\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/helensmusiccentre.com.my\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/helensmusiccentre.com.my\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/helensmusiccentre.com.my\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/helensmusiccentre.com.my\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/01-early-piano-lesson-scaled.jpg\",\"datePublished\":\"2026-07-01T02:51:02+00:00\",\"dateModified\":\"2026-07-17T02:53:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/helensmusiccentre.com.my\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/helensmusiccentre.com.my\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/helensmusiccentre.com.my\\\/#primaryimage\",\"url\":\"https:\\\/\\\/helensmusiccentre.com.my\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/01-early-piano-lesson-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/helensmusiccentre.com.my\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/01-early-piano-lesson-scaled.jpg\",\"width\":1760,\"height\":2560},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/helensmusiccentre.com.my\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/helensmusiccentre.com.my\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/helensmusiccentre.com.my\\\/#website\",\"url\":\"https:\\\/\\\/helensmusiccentre.com.my\\\/\",\"name\":\"Helen\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/helensmusiccentre.com.my\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Home - Helen","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/helensmusiccentre.com.my\/","og_locale":"en_US","og_type":"article","og_title":"Home - Helen","og_description":"From our archives The memories behind the music. Before today\u2019s stages and classrooms, there were first lessons, annual concerts and small moments that shaped generations of musicians. A glimpse into our early Kawai years. Helen\u2019s archive 01 \/ 10 Where every journey began Quiet practice, patient guidance and the first notes of a lifelong relationship [&hellip;]","og_url":"https:\/\/helensmusiccentre.com.my\/","og_site_name":"Helen","article_modified_time":"2026-07-17T02:53:24+00:00","og_image":[{"url":"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/01-early-piano-lesson-scaled.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"67 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/helensmusiccentre.com.my\/","url":"https:\/\/helensmusiccentre.com.my\/","name":"Home - Helen","isPartOf":{"@id":"https:\/\/helensmusiccentre.com.my\/#website"},"primaryImageOfPage":{"@id":"https:\/\/helensmusiccentre.com.my\/#primaryimage"},"image":{"@id":"https:\/\/helensmusiccentre.com.my\/#primaryimage"},"thumbnailUrl":"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/01-early-piano-lesson-scaled.jpg","datePublished":"2026-07-01T02:51:02+00:00","dateModified":"2026-07-17T02:53:24+00:00","breadcrumb":{"@id":"https:\/\/helensmusiccentre.com.my\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/helensmusiccentre.com.my\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/helensmusiccentre.com.my\/#primaryimage","url":"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/01-early-piano-lesson-scaled.jpg","contentUrl":"https:\/\/helensmusiccentre.com.my\/wp-content\/uploads\/2026\/07\/01-early-piano-lesson-scaled.jpg","width":1760,"height":2560},{"@type":"BreadcrumbList","@id":"https:\/\/helensmusiccentre.com.my\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/helensmusiccentre.com.my\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/helensmusiccentre.com.my\/#website","url":"https:\/\/helensmusiccentre.com.my\/","name":"Helen","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/helensmusiccentre.com.my\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/helensmusiccentre.com.my\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/helensmusiccentre.com.my\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/helensmusiccentre.com.my\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/helensmusiccentre.com.my\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/helensmusiccentre.com.my\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":230,"href":"https:\/\/helensmusiccentre.com.my\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":371,"href":"https:\/\/helensmusiccentre.com.my\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/371"}],"wp:attachment":[{"href":"https:\/\/helensmusiccentre.com.my\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}