{"id":593,"date":"2026-03-02T17:36:34","date_gmt":"2026-03-02T17:36:34","guid":{"rendered":"https:\/\/curiouslearneracademy.com\/newzealand\/?page_id=593"},"modified":"2026-07-25T06:31:18","modified_gmt":"2026-07-25T06:31:18","slug":"faq","status":"publish","type":"page","link":"https:\/\/curiouslearneracademy.com\/newzealand\/faq\/","title":{"rendered":"FAQ"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@400;600;700;800;900&display=swap');\n\n\/* ==========================================================================\n   1. WORDPRESS GUTENBERG CONTAINER UNLOCKS\n   ========================================================================== *\/\n\n\/* Overrides WordPress editor wrapper box height & scroll traps *\/\n.wp-block-custom-html:has(#cl-matrix-hub-wrapper),\n.entry-content > .wp-block-custom-html:has(#cl-matrix-hub-wrapper),\n.wp-block-post-content > .wp-block-custom-html:has(#cl-matrix-hub-wrapper) {\n    height: auto !important;\n    min-height: 0 !important;\n    max-height: none !important;\n    overflow: visible !important;\n    box-sizing: border-box !important;\n}\n\n\/* Suppress all internal scrollbars *\/\n#cl-matrix-hub-wrapper,\n#cl-matrix-hub-wrapper * {\n    box-sizing: border-box !important;\n    -ms-overflow-style: none !important;\n    scrollbar-width: none !important;\n}\n\n#cl-matrix-hub-wrapper::-webkit-scrollbar,\n#cl-matrix-hub-wrapper *::-webkit-scrollbar {\n    display: none !important;\n    width: 0 !important;\n    height: 0 !important;\n    background: transparent !important;\n}\n\n\/* ==========================================================================\n   2. MATRIX HUB STYLES (WITH INCREASED TOP MARGIN)\n   ========================================================================== *\/\n\n:root {\n    --cyan: #00e7ff; \n    --pink: #ff007a; \n    --green: #00ff88;\n    --border: #e2e8f0;\n}\n\n#cl-matrix-hub-wrapper {\n    display: block !important;\n    width: 100% !important;\n    max-width: 100% !important;\n    background-color: #ffffff !important;\n    font-family: 'Outfit', sans-serif !important;\n    \/* Increased top spacing with fluid clamping *\/\n    padding-top: clamp(10px, 8vw, 110px) !important;\n    padding-bottom: clamp(50px, 6vw, 80px) !important;\n    margin-top: 0 !important;\n    position: relative !important;\n    overflow: visible !important;\n}\n\n#cl-matrix-hub-wrapper .container { \n    max-width: min(1200px, 94vw); \n    margin: 0 auto; \n    padding: 0 clamp(16px, 3vw, 20px);\n    text-align: center; \n}\n\n\/* --- BADGES & HEADINGS --- *\/\n#cl-matrix-hub-wrapper .live-badge {\n    display: inline-block; \n    padding: 10px 24px;\n    background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);\n    color: #ffffff; \n    border-radius: 100px; \n    font-weight: 800; \n    font-size: clamp(0.7rem, 0.9vw, 0.75rem);\n    letter-spacing: 2px; \n    text-transform: uppercase; \n    margin-bottom: 25px;\n    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.25);\n}\n\n#cl-matrix-hub-wrapper h1 {\n    font-size: clamp(2.8rem, 8vw, 7.5rem) !important;\n    font-weight: 900; \n    margin: 0; \n    text-transform: uppercase; \n    line-height: 0.95;\n    background: linear-gradient(to right, #11cdef 20%, #11cdef 40%, #e91e63 60%, #e91e63 80%);\n    background-size: 200% auto;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    animation: shine 4s linear infinite;\n    word-break: break-word;\n}\n\n@keyframes shine { \n    to { background-position: 200% center; } \n}\n\n#cl-matrix-hub-wrapper .sub-desc { \n    max-width: 850px; \n    margin: 25px auto 0; \n    color: #64748b; \n    font-size: clamp(1.05rem, 1.4vw, 1.35rem); \n    line-height: 1.6; \n}\n\n#cl-matrix-hub-wrapper .sub-desc strong {\n    color: #0c4a6e;\n}\n\n#cl-matrix-hub-wrapper .how-title { \n    color: #11cdef; \n    font-size: clamp(1.8rem, 3.5vw, 2.5rem); \n    font-weight: 900; \n    text-transform: uppercase; \n    margin: clamp(50px, 6vw, 80px) 0 clamp(30px, 4vw, 50px); \n}\n\n\/* --- 3D FLIP CARDS GRID --- *\/\n#cl-matrix-hub-wrapper .step-row {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: clamp(20px, 3vw, 30px);\n    perspective: 1200px;\n}\n\n#cl-matrix-hub-wrapper .flip-card {\n    height: clamp(340px, 40vh, 380px);\n    cursor: pointer;\n    position: relative;\n    transform-style: preserve-3d;\n    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;\n}\n\n#cl-matrix-hub-wrapper .flip-card.is-flipped { \n    transform: rotateY(180deg); \n}\n\n#cl-matrix-hub-wrapper .flip-front, \n#cl-matrix-hub-wrapper .flip-back {\n    position: absolute; \n    width: 100%; \n    height: 100%;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n    border-radius: clamp(28px, 4vw, 40px); \n    display: flex; \n    flex-direction: column;\n    justify-content: center; \n    align-items: center; \n    padding: clamp(25px, 4vw, 40px);\n    box-sizing: border-box; \n    box-shadow: 0 15px 35px rgba(0,0,0,0.08);\n}\n\n#cl-matrix-hub-wrapper .flip-front { \n    background: #000000; \n    color: #ffffff; \n}\n\n#cl-matrix-hub-wrapper .flip-back { \n    transform: rotateY(180deg); \n    color: #000000; \n    text-align: center; \n}\n\n#cl-matrix-hub-wrapper .flip-back p { \n    font-size: clamp(1rem, 1.2vw, 1.2rem); \n    font-weight: 700; \n    line-height: 1.6; \n    margin: 0; \n}\n\n#cl-matrix-hub-wrapper .step-badge {\n    position: absolute; \n    top: -15px; \n    left: 30px;\n    background: #ffffff; \n    color: #000000; \n    width: 45px; \n    height: 45px;\n    display: flex; \n    align-items: center; \n    justify-content: center;\n    border-radius: 14px; \n    font-weight: 900; \n    font-size: 1.2rem;\n    box-shadow: 0 4px 15px rgba(0,0,0,0.15);\n}\n\n#cl-matrix-hub-wrapper .flip-front h3 { \n    font-size: clamp(2rem, 3vw, 2.5rem); \n    font-weight: 900; \n    text-transform: uppercase; \n    margin: 0; \n}\n\n\/* Color Themes per Card *\/\n#cl-matrix-hub-wrapper .card-assess:hover { box-shadow: 0 0 45px rgba(0, 231, 255, 0.4); }\n#cl-matrix-hub-wrapper .card-assess .flip-back { background: var(--cyan); }\n#cl-matrix-hub-wrapper .card-assess .flip-front h3 { color: var(--cyan); }\n\n#cl-matrix-hub-wrapper .card-plan:hover { box-shadow: 0 0 45px rgba(255, 0, 122, 0.4); }\n#cl-matrix-hub-wrapper .card-plan .flip-back { background: var(--pink); }\n#cl-matrix-hub-wrapper .card-plan .flip-front h3 { color: var(--pink); }\n\n#cl-matrix-hub-wrapper .card-progress:hover { box-shadow: 0 0 45px rgba(0, 255, 136, 0.4); }\n#cl-matrix-hub-wrapper .card-progress .flip-back { background: var(--green); }\n#cl-matrix-hub-wrapper .card-progress .flip-front h3 { color: var(--green); }\n\n\/* ==========================================================================\n   3. RESPONSIVE BREAKPOINTS (< 900px)\n   ========================================================================== *\/\n\n@media (max-width: 900px) {\n    #cl-matrix-hub-wrapper .step-row { \n        grid-template-columns: 1fr; \n        gap: 30px; \n    }\n    \n    #cl-matrix-hub-wrapper .flip-card {\n        height: 280px;\n    }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener('DOMContentLoaded', () => {\n    \/\/ Target all flip cards within the matrix hub wrapper\n    const flipCards = document.querySelectorAll('#cl-matrix-hub-wrapper .flip-card');\n\n    flipCards.forEach(card => {\n        card.addEventListener('click', () => {\n            \/\/ Toggle flipped state on click\n            card.classList.toggle('is-flipped');\n        });\n    });\n});\n<\/script>\n\n<div id=\"cl-matrix-hub-wrapper\">\n    <div class=\"container\">\n        <!-- Live Status Badge -->\n        <div class=\"live-badge\">See Exactly Where Your Child Stands<\/div>\n        \n        <!-- Main Heading -->\n        <h1>FAQ &amp; Diagnostic Matrix<\/h1>\n        \n        <!-- Subtitle Description -->\n        <p class=\"sub-desc\">\n            Our interactive Diagnostic Matrix gives you a clear picture of your child\u2019s learning \u2014 strengths, gaps, and progression. <strong>Think of it as your child\u2019s academic roadmap.<\/strong>\n        <\/p>\n\n        <!-- Section Subheading -->\n        <h2 class=\"how-title\">How It Works<\/h2>\n        \n        <!-- 3D Flip Step Cards Grid -->\n        <div class=\"step-row\">\n            <!-- Step 1: Assess -->\n            <div class=\"flip-card card-assess\" data-step=\"1\">\n                <div class=\"flip-front\">\n                    <div class=\"step-badge\">1<\/div>\n                    <h3>Assess<\/h3>\n                <\/div>\n                <div class=\"flip-back\">\n                    <p>We begin with a detailed diagnostic assessment to understand your child\u2019s current skill level and identify any learning gaps.<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Step 2: Plan -->\n            <div class=\"flip-card card-plan\" data-step=\"2\">\n                <div class=\"flip-front\">\n                    <div class=\"step-badge\">2<\/div>\n                    <h3>Plan<\/h3>\n                <\/div>\n                <div class=\"flip-back\">\n                    <p>Using our structured learning blueprint, we create a personalised pathway that targets missing skills while building foundations.<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Step 3: Progress -->\n            <div class=\"flip-card card-progress\" data-step=\"3\">\n                <div class=\"flip-front\">\n                    <div class=\"step-badge\">3<\/div>\n                    <h3>Progress<\/h3>\n                <\/div>\n                <div class=\"flip-back\">\n                    <p>Through one-on-one lessons and ongoing tracking, your child strengthens skills with measurable improvement in real time.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Curious Learner FAQ Hub<\/title>\n    <style>\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@400;600;900&display=swap');\n\n        :root {\n            --cyan: #00e7ff; --pink: #ff007a; --green: #00ff88; --orange: #f97316; --purple: #6B1AB7;\n            --bg: #000000; --card-bg: #0a0a0a; --border: #1a1a1a;\n        }\n\n        body { \n            margin: 0; font-family: 'Outfit', sans-serif; background: var(--bg); color: white; \n            line-height: 1.6; transition: background 0.6s ease;\n        }\n\n        .faq-container { max-width: 1000px; margin: 40px auto; padding: 0 20px; }\n\n        \/* --- MAIN HEADING --- *\/\n        .faq-header { text-align: center; margin-bottom: 30px; }\n        .main-title { font-size: 3.5rem; font-weight: 900; margin: 0; letter-spacing: -1px; text-transform: uppercase; }\n\n        \/* --- CATEGORY TABS --- *\/\n        .faq-tabs { \n            display: flex; justify-content: center; gap: 8px; \n            margin-bottom: 40px; flex-wrap: wrap; position: sticky; top: 20px; z-index: 100;\n        }\n        .tab-btn {\n            background: rgba(15, 15, 15, 0.95); border: 1px solid var(--border); color: #888;\n            padding: 14px 22px; border-radius: 100px; cursor: pointer; font-weight: 800;\n            transition: 0.4s; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 1px;\n            backdrop-filter: blur(15px);\n        }\n        .tab-btn.active[data-color=\"cyan\"] { background: var(--cyan); color: #000; box-shadow: 0 0 30px var(--cyan); border-color: var(--cyan); }\n        .tab-btn.active[data-color=\"pink\"] { background: var(--pink); color: #000; box-shadow: 0 0 30px var(--pink); border-color: var(--pink); }\n        .tab-btn.active[data-color=\"green\"] { background: var(--green); color: #000; box-shadow: 0 0 30px var(--green); border-color: var(--green); }\n        .tab-btn.active[data-color=\"orange\"] { background: var(--orange); color: #000; box-shadow: 0 0 30px var(--orange); border-color: var(--orange); }\n        .tab-btn.active[data-color=\"purple\"] { background: var(--purple); color: #000; box-shadow: 0 0 30px var(--purple); border-color: var(--purple); }\n\n        \/* --- FAQ ITEMS --- *\/\n        .faq-content-group { display: none; animation: slideUp 0.4s ease forwards; }\n        .faq-content-group.active { display: block; }\n        @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\n\n        .faq-item {\n            background: var(--card-bg); border: 1px solid var(--border);\n            border-radius: 20px; margin-bottom: 12px; transition: 0.3s; overflow: hidden;\n        }\n        .faq-item.active { border-color: var(--accent); }\n        \n        .faq-question {\n            padding: 22px 30px; cursor: pointer; display: flex;\n            justify-content: space-between; align-items: center; \n            font-weight: 700; font-size: 1.1rem; color: var(--accent);\n        }\n\n        .faq-answer { \n            max-height: 0; overflow: hidden; transition: 0.4s ease; \n            background: #fcfcfc; \/* Off-white for Black Text contrast *\/\n        }\n        .faq-answer-inner { \n            padding: 25px 30px; color: #000000; \/* PURE BLACK TEXT *\/\n            font-weight: 600; font-size: 1rem;\n        }\n        .faq-item.active .faq-answer { max-height: 600px; }\n        \n        .plus-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: #1a1a1a; border-radius: 50%; transition: 0.4s; color: white; }\n        .faq-item.active .plus-icon { transform: rotate(45deg); background: var(--accent); color: #000; }\n\n        \/* --- WHATSAPP CONTACT --- *\/\n        .whatsapp-container { text-align: center; margin-top: 60px; padding: 40px 20px 80px; }\n        .cta-statement { color: #888; font-size: 1.1rem; font-weight: 500; margin-bottom: 25px; }\n        \n        .btn-live {\n            position: relative; background: #25D366; color: white; border: none; \n            padding: 22px 60px; border-radius: 100px; font-weight: 900; cursor: pointer; \n            text-transform: uppercase; font-size: 1.1rem; text-decoration: none; \n            display: inline-flex; align-items: center; gap: 15px; transition: 0.4s;\n            box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);\n        }\n        .btn-live::before {\n            content: ''; width: 12px; height: 12px; background: #fff; border-radius: 50%;\n            animation: pulse-white 1.5s infinite;\n        }\n        @keyframes pulse-white { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } }\n        .btn-live:hover { transform: scale(1.08); background: #1eb954; }\n\n    <\/style>\n<\/head>\n<body>\n\n<div class=\"faq-container\">\n    <div class=\"faq-header\">\n        <h1 class=\"main-title\">Curious Learner <span style=\"color:var(--cyan)\">FAQ Hub<\/span><\/h1>\n    <\/div>\n\n    <div class=\"faq-tabs\">\n        <button class=\"tab-btn active\" data-color=\"cyan\" onclick=\"switchTab('understanding', this, 'cyan')\">Curriculum<\/button>\n        <button class=\"tab-btn\" data-color=\"pink\" onclick=\"switchTab('gaps', this, 'pink')\">Learning Gaps<\/button>\n        <button class=\"tab-btn\" data-color=\"green\" onclick=\"switchTab('assessments', this, 'green')\">Assessments<\/button>\n        <button class=\"tab-btn\" data-color=\"orange\" onclick=\"switchTab('outcomes', this, 'orange')\">Outcomes<\/button>\n        <button class=\"tab-btn\" data-color=\"purple\" onclick=\"switchTab('support', this, 'purple')\">Support<\/button>\n    <\/div>\n\n    <div id=\"understanding\" class=\"faq-content-group active\" style=\"--accent: var(--cyan)\">\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">How does your program align with the New Zealand Curriculum? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">We structure our learning pathways around New Zealand\u2019s curriculum expectations, translating broad goals into clear, measurable year-level milestones.<\/div><\/div><\/div>\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">What does \u201caligned with NZ learning expectations\u201d mean? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">It means our lessons reflect what students are expected to learn at each stage of school, while providing greater clarity and structure.<\/div><\/div><\/div>\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">How do I know if my child is on track for their year level? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">We assess your child\u2019s current ability and map it against year-level benchmarks, providing regular progress updates and next-step guidance.<\/div><\/div><\/div>\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">Why can the NZ Curriculum sometimes feel unclear for parents? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">The NZ Curriculum is intentionally flexible, allowing schools to design learning locally. However, this flexibility can make it harder for parents to see specific measurable benchmarks.<\/div><\/div><\/div>\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">What\u2019s the difference between school learning and your structured program? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">Schools provide broad curriculum delivery. We provide structured, skill-based progression with clear milestones and measurable outcomes.<\/div><\/div><\/div>\n    <\/div>\n\n    <div id=\"gaps\" class=\"faq-content-group\" style=\"--accent: var(--pink)\">\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">How do you identify learning gaps? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">Through diagnostic assessments and targeted questioning, we identify skills that need strengthening before moving forward.<\/div><\/div><\/div>\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">What are learning gaps? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">Learning gaps occur when foundational skills haven\u2019t been fully mastered, which can affect confidence and future learning.<\/div><\/div><\/div>\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">Can your program help if my child is behind? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">Yes. We rebuild foundational skills step by step, helping students regain confidence and catch up steadily.<\/div><\/div><\/div>\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">Do you support advanced students? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">Absolutely. We provide enrichment, deeper problem-solving, and extension tasks for students ready to move ahead.<\/div><\/div><\/div>\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">How do you ensure steady progress? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">We follow structured skill progression, monitor performance regularly, and adjust lessons to suit each learner\u2019s pace.<\/div><\/div><\/div>\n    <\/div>\n\n    <div id=\"assessments\" class=\"faq-content-group\" style=\"--accent: var(--green)\">\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">Does New Zealand have national benchmarking like NAPLAN? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">New Zealand does not have a nationwide standardised test like NAPLAN. Schools use various assessment tools, which can vary.<\/div><\/div><\/div>\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">How does ICAS fit into NZ schools? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">ICAS is an optional international assessment that some NZ students participate in to challenge higher-order thinking skills.<\/div><\/div><\/div>\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">Is ICAS required? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">No, ICAS is optional. It is an opportunity for students who wish to extend themselves academically.<\/div><\/div><\/div>\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">How do you prepare students for assessments? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">We focus on critical thinking, problem-solving, and strong foundational knowledge aligned with NZ standards.<\/div><\/div><\/div>\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">Will I receive progress updates? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">Yes. Parents receive clear feedback, performance insights, and recommendations for next steps.<\/div><\/div><\/div>\n    <\/div>\n\n    <div id=\"outcomes\" class=\"faq-content-group\" style=\"--accent: var(--orange)\">\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">What makes your curriculum structure different? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">We provide clear year-by-year pathways, skill-based progression, and measurable learning outcomes.<\/div><\/div><\/div>\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">Do you follow a year-level learning pathway? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">Yes. Our framework ensures students build skills progressively at each stage.<\/div><\/div><\/div>\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">How do you ensure measurable outcomes? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">We use milestone tracking, structured assessments, and consistent feedback to monitor improvement.<\/div><\/div><\/div>\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">What subjects do you cover? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">We focus on Mathematics, Literacy, and Science, aligned with New Zealand learning expectations.<\/div><\/div><\/div>\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">How do you build strong foundations? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">We prioritise mastery of core concepts before moving to advanced topics, ensuring long-term confidence.<\/div><\/div><\/div>\n    <\/div>\n\n    <div id=\"support\" class=\"faq-content-group\" style=\"--accent: var(--purple)\">\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">How will I know my child is improving? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">You\u2019ll see measurable progress through assessments, tutor feedback, and growing classroom confidence.<\/div><\/div><\/div>\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">How often will I receive feedback? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">Feedback is provided regularly after sessions, along with periodic progress reviews.<\/div><\/div><\/div>\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">Can lessons be tailored to my child\u2019s pace? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">Yes. Every session is personalised to match your child\u2019s learning style and speed.<\/div><\/div><\/div>\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">How flexible is scheduling? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">Our online sessions are designed to fit around busy family routines with flexible booking options.<\/div><\/div><\/div>\n        <div class=\"faq-item\"><div class=\"faq-question\" onclick=\"toggleAcc(this)\">What if my child lacks confidence? <span class=\"plus-icon\">+<\/span><\/div><div class=\"faq-answer\"><div class=\"faq-answer-inner\">We focus on building small wins, strengthening understanding, and creating a supportive environment where students feel safe to grow.<\/div><\/div><\/div>\n    <\/div>\n\n    <div class=\"whatsapp-container\">\n        <p class=\"cta-statement\">Still have doubts or looking for something specific?<\/p>\n        <a href=\"https:\/\/wa.me\/919251230015?text=Hi%20Curious%20Learner,%20I'd%20like%20to%20discuss%20a%20roadmap.\" class=\"btn-live\" target=\"_blank\">\n            Expert Online \u2014 Message Now \u2192\n        <\/a>\n    <\/div>\n<\/div>\n\n<script>\n    function switchTab(tabId, btn, colorName) {\n        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));\n        btn.classList.add('active');\n        document.querySelectorAll('.faq-content-group').forEach(group => group.classList.remove('active'));\n        document.getElementById(tabId).classList.add('active');\n        const glow = { cyan: 'rgba(0, 231, 255, 0.05)', pink: 'rgba(255, 0, 122, 0.05)', green: 'rgba(0, 255, 136, 0.05)', orange: 'rgba(249, 115, 22, 0.05)', purple: 'rgba(107, 26, 183, 0.05)' };\n        document.body.style.background = `radial-gradient(circle at top, ${glow[colorName]}, #000 70%)`;\n    }\n\n    function toggleAcc(el) {\n        const item = el.parentElement;\n        const isActive = item.classList.contains('active');\n        item.parentElement.querySelectorAll('.faq-item').forEach(i => i.classList.remove('active'));\n        if (!isActive) item.classList.add('active');\n    }\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<style data-wp-block-html=\"css\">\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600;700;800;900&display=swap');\n\n\/* ==========================================================================\n   1. WORDPRESS BLOCK EDITOR & OVERFLOW UNLOCKS\n   ========================================================================== *\/\n\n\/* Target parent WordPress Custom HTML block container to eliminate scrollbars *\/\n.wp-block-custom-html:has(.cl-report-container),\n.entry-content > .wp-block-custom-html:has(.cl-report-container),\n.wp-block-post-content > .wp-block-custom-html:has(.cl-report-container) {\n    height: auto !important;\n    min-height: 0 !important;\n    max-height: none !important;\n    overflow: visible !important;\n    box-sizing: border-box !important;\n}\n\n\/* Suppress all internal scrollbars *\/\n.cl-report-container,\n.cl-report-container * {\n    box-sizing: border-box !important;\n    -ms-overflow-style: none !important;\n    scrollbar-width: none !important;\n}\n\n.cl-report-container::-webkit-scrollbar,\n.cl-report-container *::-webkit-scrollbar {\n    display: none !important;\n    width: 0 !important;\n    height: 0 !important;\n    background: transparent !important;\n}\n\n\/* ==========================================================================\n   2. CORE REPORT CONTAINER STYLES (FLUID RESPONSIVE ENGINE)\n   ========================================================================== *\/\n\n:root {\n    --cyan: #00e7ff; \n    --pink: #ff007a; \n    --green: #00ff88; \n    --orange: #f97316;\n    --bg: #000000; \n    --panel: #0a0a0a; \n    --border: #1a1a1a;\n}\n\n.cl-report-container {\n    width: 100% !important;\n    max-width: 100% !important;\n    background: var(--bg) !important;\n    color: #ffffff !important;\n    font-family: 'Outfit', sans-serif !important;\n    padding: clamp(30px, 5vw, 60px) clamp(16px, 3vw, 20px) !important;\n    line-height: 1.6;\n    display: block !important;\n    height: auto !important;\n    overflow: visible !important;\n}\n\n\/* Hero Heading Area *\/\n.cl-report-container .hero-title-area {\n    text-align: center;\n    max-width: 800px;\n    margin: 0 auto clamp(30px, 5vw, 50px);\n}\n\n.cl-report-container .status-badge {\n    display: inline-block;\n    padding: 6px 16px;\n    border-radius: 100px;\n    background: rgba(0, 231, 255, 0.1);\n    color: var(--cyan);\n    font-size: clamp(0.7rem, 0.9vw, 0.75rem);\n    font-weight: 900;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    margin-bottom: 20px;\n    border: 1px solid rgba(0, 231, 255, 0.3);\n}\n\n.cl-report-container .hero-title-area h1 {\n    font-size: clamp(2.2rem, 5vw, 3.5rem) !important;\n    font-weight: 900;\n    margin: 0;\n    letter-spacing: -1px;\n    line-height: 1.1;\n    text-transform: uppercase;\n    color: #ffffff;\n    word-break: break-word;\n}\n\n.cl-report-container .cyan-text {\n    color: var(--cyan);\n}\n\n.cl-report-container .hero-title-area p {\n    font-size: clamp(1rem, 1.2vw, 1.2rem);\n    color: #64748b;\n    margin-top: 15px;\n    font-weight: 400;\n}\n\n\/* Report Main Card Wrapper *\/\n.cl-report-container .report-wrapper {\n    max-width: min(900px, 94vw);\n    margin: 0 auto;\n    background: var(--panel);\n    border-radius: clamp(24px, 4vw, 40px);\n    border: 1px solid var(--border);\n    overflow: hidden;\n    box-shadow: 0 0 100px rgba(0, 231, 255, 0.05);\n}\n\n\/* Header Info *\/\n.cl-report-container .report-header {\n    padding: clamp(24px, 4vw, 40px);\n    border-bottom: 1px solid var(--border);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 20px;\n    background: linear-gradient(to right, rgba(0, 231, 255, 0.05), transparent);\n    flex-wrap: wrap;\n}\n\n.cl-report-container .student-meta {\n    flex: 1;\n    min-width: 240px;\n}\n\n.cl-report-container .student-meta .meta-tag {\n    color: #64748b;\n    margin: 0 0 5px 0;\n    letter-spacing: 1px;\n    font-size: clamp(0.75rem, 0.9vw, 0.85rem);\n    font-weight: 700;\n}\n\n.cl-report-container .student-meta h2 {\n    margin: 0;\n    font-size: clamp(1.8rem, 3.5vw, 2.5rem);\n    font-weight: 900;\n    text-transform: uppercase;\n    color: #ffffff;\n    line-height: 1.1;\n}\n\n.cl-report-container .student-meta .meta-sub {\n    color: #64748b;\n    margin: 5px 0 0 0;\n    letter-spacing: 1px;\n    font-size: clamp(0.85rem, 1vw, 0.95rem);\n}\n\n.cl-report-container .score-orb {\n    text-align: center;\n    background: #000000;\n    padding: clamp(15px, 2vw, 20px) clamp(20px, 3vw, 30px);\n    border-radius: 28px;\n    border: 2px solid var(--cyan);\n    box-shadow: 0 0 30px rgba(0, 231, 255, 0.2);\n    flex-shrink: 0;\n}\n\n.cl-report-container .orb-val {\n    display: block;\n    font-size: clamp(1.8rem, 3vw, 2.2rem);\n    font-weight: 900;\n    color: var(--cyan);\n    line-height: 1;\n}\n\n.cl-report-container .orb-lbl {\n    font-size: 0.7rem;\n    font-weight: 900;\n    color: #64748b;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n}\n\n\/* Sections Common Styles *\/\n.cl-report-container .section-padding {\n    padding: clamp(24px, 4vw, 40px);\n}\n\n.cl-report-container .section-alt-bg {\n    background: rgba(255, 255, 255, 0.01);\n}\n\n.cl-report-container .section-title {\n    font-size: clamp(0.75rem, 0.9vw, 0.85rem);\n    font-weight: 900;\n    color: var(--pink);\n    text-transform: uppercase;\n    letter-spacing: 3px;\n    margin-bottom: 25px;\n    display: flex;\n    align-items: center;\n    gap: 15px;\n}\n\n.cl-report-container .section-title::after {\n    content: '';\n    flex: 1;\n    height: 1px;\n    background: var(--border);\n}\n\n\/* Competency Heatmap Grid *\/\n.cl-report-container .heatmap-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));\n    gap: 15px;\n}\n\n.cl-report-container .skill-bar-box {\n    background: #000000;\n    padding: 20px;\n    border-radius: 20px;\n    border: 1px solid var(--border);\n}\n\n.cl-report-container .skill-label {\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: 10px;\n    font-weight: 700;\n    font-size: clamp(0.85rem, 1vw, 0.95rem);\n}\n\n.cl-report-container .bar-bg {\n    width: 100%;\n    height: 8px;\n    background: #111111;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.cl-report-container .bar-fill {\n    height: 100%;\n    border-radius: 10px;\n    transition: width 1.5s cubic-bezier(0.1, 0, 0.2, 1);\n}\n\n\/* Micro-Gap Cards *\/\n.cl-report-container .gap-card {\n    padding: clamp(18px, 3vw, 25px);\n    border-radius: 22px;\n    margin-top: 15px;\n    display: flex;\n    gap: 18px;\n    align-items: flex-start;\n}\n\n.cl-report-container .gap-warning {\n    background: rgba(255, 0, 122, 0.03);\n    border: 1px solid rgba(255, 0, 122, 0.15);\n}\n\n.cl-report-container .gap-opportunity {\n    background: rgba(0, 231, 255, 0.03);\n    border: 1px solid rgba(0, 231, 255, 0.15);\n}\n\n.cl-report-container .gap-icon {\n    font-size: 1.5rem;\n    color: var(--pink);\n    line-height: 1;\n    flex-shrink: 0;\n}\n\n.cl-report-container .cyan-icon {\n    color: var(--cyan);\n}\n\n.cl-report-container .gap-content h4 {\n    margin: 0 0 6px 0;\n    color: #ffffff;\n    font-size: clamp(1rem, 1.2vw, 1.1rem);\n}\n\n.cl-report-container .gap-content p {\n    margin: 0;\n    color: #64748b;\n    font-size: clamp(0.88rem, 1vw, 0.95rem);\n    line-height: 1.6;\n}\n\n\/* Percentile Comparison Chart *\/\n.cl-report-container .comparison-wrap {\n    display: flex;\n    align-items: flex-end;\n    gap: clamp(15px, 4vw, 40px);\n    height: 220px;\n    padding: 30px 10px 40px 10px;\n    border-bottom: 1px solid var(--border);\n}\n\n.cl-report-container .comp-bar {\n    flex: 1;\n    background: #111111;\n    border-radius: 10px 10px 0 0;\n    position: relative;\n    transition: height 1s ease;\n}\n\n.cl-report-container .comp-bar::after {\n    content: attr(data-label);\n    position: absolute;\n    bottom: -35px;\n    left: 50%;\n    transform: translateX(-50%);\n    font-size: clamp(0.65rem, 0.8vw, 0.75rem);\n    color: #64748b;\n    font-weight: 800;\n    width: 100%;\n    text-align: center;\n    line-height: 1.2;\n}\n\n.cl-report-container .comp-val {\n    position: absolute;\n    top: -25px;\n    left: 50%;\n    transform: translateX(-50%);\n    font-weight: 900;\n    font-size: clamp(0.8rem, 1vw, 0.95rem);\n}\n\n.cl-report-container .bar-highlight {\n    background: var(--cyan) !important;\n    box-shadow: 0 0 20px rgba(0, 231, 255, 0.4);\n}\n\n.cl-report-container .bar-highlight .comp-val {\n    color: var(--cyan);\n}\n\n.cl-report-container .bar-excellence {\n    background: var(--green) !important;\n}\n\n.cl-report-container .bar-excellence .comp-val {\n    color: var(--green);\n}\n\n.cl-report-container .comparison-note {\n    margin-top: 50px;\n    font-size: clamp(0.85rem, 1vw, 0.95rem);\n    color: #64748b;\n    text-align: center;\n    line-height: 1.6;\n}\n\n\/* Footer CTA *\/\n.cl-report-container .cta-footer {\n    background: #000000;\n    padding: clamp(25px, 4vw, 40px);\n    text-align: center;\n    border-top: 1px solid var(--border);\n}\n\n.cl-report-container .btn-expert {\n    background: var(--cyan);\n    color: #000000;\n    border: none;\n    padding: clamp(16px, 2vw, 20px) clamp(25px, 4vw, 50px);\n    border-radius: 100px;\n    font-weight: 900;\n    text-transform: uppercase;\n    cursor: pointer;\n    font-size: clamp(0.88rem, 1.1vw, 1rem);\n    transition: all 0.3s ease;\n    width: fit-content;\n    max-width: 100%;\n}\n\n.cl-report-container .btn-expert:hover {\n    transform: scale(1.04);\n    box-shadow: 0 0 30px var(--cyan);\n}\n\n\/* Responsive Breakpoints (< 600px) *\/\n@media (max-width: 600px) {\n    .cl-report-container .report-header {\n        flex-direction: column;\n        text-align: center;\n    }\n\n    .cl-report-container .score-orb {\n        width: 100%;\n        margin-top: 10px;\n    }\n\n    .cl-report-container .gap-card {\n        flex-direction: column;\n        gap: 10px;\n    }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener('DOMContentLoaded', () => {\n    \/\/ Action Button Handler\n    const reviewBtn = document.getElementById('reviewBlueprintBtn');\n    if (reviewBtn) {\n        reviewBtn.addEventListener('click', () => {\n            window.open('https:\/\/wa.me\/919251230015', '_blank');\n        });\n    }\n});\n<\/script>\n\n<div class=\"cl-report-container\">\n    \n    <!-- Hero Title Section -->\n    <div class=\"hero-title-area\">\n        <div class=\"status-badge\">Sample Diagnostic Data<\/div>\n        <h1>The Matrix <span class=\"cyan-text\">Blueprint<\/span><\/h1>\n        <p>This is exactly how we visualize your child's academic DNA. No more vague school reports\u2014just surgical, data-driven insights.<\/p>\n    <\/div>\n\n    <!-- Main Diagnostic Card Wrapper -->\n    <div class=\"report-wrapper\">\n        \n        <!-- Header: Student Metadata & Score Orb -->\n        <div class=\"report-header\">\n            <div class=\"student-meta\">\n                <p class=\"meta-tag\">DIAGNOSTIC BLUEPRINT v4.2<\/p>\n                <h2>Liam Jenkins<\/h2>\n                <p class=\"meta-sub\">Year 6 Student | Auckland, NZ<\/p>\n            <\/div>\n            <div class=\"score-orb\">\n                <span class=\"orb-val\">84.2<\/span>\n                <span class=\"orb-lbl\">Matrix Score<\/span>\n            <\/div>\n        <\/div>\n\n        <!-- Section 1: Core Competency Heatmap -->\n        <div class=\"section-padding\">\n            <div class=\"section-title\">Core Competency Heatmap<\/div>\n            <div class=\"heatmap-grid\">\n                <div class=\"skill-bar-box\">\n                    <div class=\"skill-label\"><span>Logical Deduction<\/span><span>92%<\/span><\/div>\n                    <div class=\"bar-bg\"><div class=\"bar-fill\" style=\"width: 92%; background: var(--cyan);\"><\/div><\/div>\n                <\/div>\n                <div class=\"skill-bar-box\">\n                    <div class=\"skill-label\"><span>Fractional Logic<\/span><span>45%<\/span><\/div>\n                    <div class=\"bar-bg\"><div class=\"bar-fill\" style=\"width: 45%; background: var(--pink);\"><\/div><\/div>\n                <\/div>\n                <div class=\"skill-bar-box\">\n                    <div class=\"skill-label\"><span>Syntactic Cohesion<\/span><span>68%<\/span><\/div>\n                    <div class=\"bar-bg\"><div class=\"bar-fill\" style=\"width: 68%; background: var(--orange);\"><\/div><\/div>\n                <\/div>\n                <div class=\"skill-bar-box\">\n                    <div class=\"skill-label\"><span>Scientific Inquiry<\/span><span>81%<\/span><\/div>\n                    <div class=\"bar-bg\"><div class=\"bar-fill\" style=\"width: 81%; background: var(--green);\"><\/div><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Section 2: Micro-Gaps & Opportunities -->\n        <div class=\"section-padding section-alt-bg\">\n            <div class=\"section-title\">Micro-Gap Detected<\/div>\n            <div class=\"gap-card gap-warning\">\n                <div class=\"gap-icon\">\u26a0\ufe0f<\/div>\n                <div class=\"gap-content\">\n                    <h4>Decimal-Fraction Conversion Lag<\/h4>\n                    <p>Liam shows strong mental math but fails to translate abstract decimals into tangible fractions. This is a <strong>Year 7 foundation risk<\/strong> that will cause friction in Algebra next year if not repaired now.<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"gap-card gap-opportunity\">\n                <div class=\"gap-icon cyan-icon\">\ud83c\udfaf<\/div>\n                <div class=\"gap-content\">\n                    <h4>Opportunity: Advanced Analytical Reading<\/h4>\n                    <p>Liam's ability to decode subtext is at a <strong>Year 9 level<\/strong>. We recommend skipping Standard Year 6 Literacy and moving directly into <strong>Critical Analysis Modules<\/strong>.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Section 3: Percentile Comparison Chart -->\n        <div class=\"section-padding\">\n            <div class=\"section-title\">Global Percentile Comparison<\/div>\n            <div class=\"comparison-wrap\">\n                <div class=\"comp-bar\" style=\"height: 50%;\" data-label=\"NZ Year 6 Average\">\n                    <span class=\"comp-val\">50%<\/span>\n                <\/div>\n                <div class=\"comp-bar bar-highlight\" style=\"height: 84%;\" data-label=\"Liam Jenkins\">\n                    <span class=\"comp-val\">84%<\/span>\n                <\/div>\n                <div class=\"comp-bar bar-excellence\" style=\"height: 95%;\" data-label=\"Global Excellence\">\n                    <span class=\"comp-val\">95%<\/span>\n                <\/div>\n            <\/div>\n            <p class=\"comparison-note\">\n                Liam is currently performing in the <strong>top 16%<\/strong> of his peer group globally. <br>Our 12-week mission will target the remaining 11% gap to reach the Excellence Tier.\n            <\/p>\n        <\/div>\n\n        <!-- Section 4: Action Footer -->\n        <div class=\"cta-footer\">\n            <button class=\"btn-expert\" id=\"reviewBlueprintBtn\">Review Your Child's Blueprint \u2192<\/button>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n\n\n<style data-wp-block-html=\"css\">\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@400;600;700;800;900&display=swap');\n\n\/* ==========================================================================\n   1. WORDPRESS GUTENBERG BLOCK RESETS (SCOPED TO TESTIMONIAL BLOCK)\n   ========================================================================== *\/\n\n\/* Unlocks parent WordPress Gutenberg HTML wrapper to prevent internal scrollbars *\/\n.wp-block-custom-html:has(.cl-testimonial-wrapper),\n.entry-content > .wp-block-custom-html:has(.cl-testimonial-wrapper),\n.wp-block-post-content > .wp-block-custom-html:has(.cl-testimonial-wrapper) {\n    height: auto !important;\n    min-height: 0 !important;\n    max-height: none !important;\n    overflow: visible !important;\n    box-sizing: border-box !important;\n}\n\n\/* Suppresses internal scrollbar tracks *\/\n.cl-testimonial-wrapper,\n.cl-testimonial-wrapper * {\n    box-sizing: border-box !important;\n    -ms-overflow-style: none !important;\n    scrollbar-width: none !important;\n}\n\n.cl-testimonial-wrapper::-webkit-scrollbar,\n.cl-testimonial-wrapper *::-webkit-scrollbar {\n    display: none !important;\n    width: 0 !important;\n    height: 0 !important;\n    background: transparent !important;\n}\n\n\/* ==========================================================================\n   2. TESTIMONIAL IMPACT CARD FLUID RESPONSIVE STYLES\n   ========================================================================== *\/\n\n:root {\n    --t-cyan: #00e7ff;\n    --t-pink: #ff007a;\n    --t-bg: #050505;\n    --t-border: #1a1a1a;\n    --t-text-sub: #64748b;\n    --t-text-main: #cbd5e1;\n}\n\n.cl-testimonial-wrapper {\n    width: 100% !important;\n    max-width: 100% !important;\n    padding: clamp(20px, 4vw, 40px) clamp(16px, 3vw, 20px) !important;\n    background: #000000 !important;\n    font-family: 'Outfit', sans-serif !important;\n    display: block !important;\n    height: auto !important;\n    overflow: visible !important;\n}\n\n.testimonial-impact-card {\n    max-width: min(800px, 94vw);\n    margin: 0 auto;\n    background: var(--t-bg);\n    border-radius: clamp(20px, 4vw, 32px);\n    border: 1px solid var(--t-border);\n    padding: clamp(24px, 5vw, 40px);\n    position: relative;\n    overflow: hidden;\n    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);\n}\n\n\/* Ambient Radial Glow Background *\/\n.testimonial-impact-card::before {\n    content: '';\n    position: absolute;\n    top: -50%;\n    left: -50%;\n    width: 200%;\n    height: 200%;\n    background: radial-gradient(circle, rgba(255, 0, 122, 0.03) 0%, transparent 70%);\n    pointer-events: none;\n}\n\n\/* Header & Avatar *\/\n.testimonial-impact-card .t-header { \n    display: flex; \n    align-items: center; \n    gap: clamp(14px, 2vw, 20px); \n    margin-bottom: clamp(20px, 3vw, 30px); \n}\n\n.testimonial-impact-card .t-avatar { \n    width: clamp(48px, 6vw, 60px); \n    height: clamp(48px, 6vw, 60px); \n    border-radius: 50%; \n    background: linear-gradient(45deg, #1a1a1a, var(--t-cyan));\n    display: flex; \n    align-items: center; \n    justify-content: center;\n    font-weight: 900; \n    color: #ffffff; \n    font-size: clamp(1rem, 1.3vw, 1.2rem);\n    border: 2px solid var(--t-border);\n    flex-shrink: 0;\n}\n\n.testimonial-impact-card .t-meta h4 { \n    margin: 0; \n    font-size: clamp(1.05rem, 1.4vw, 1.2rem); \n    color: #ffffff; \n    font-weight: 700;\n}\n\n.testimonial-impact-card .t-meta p { \n    margin: 4px 0 0 0; \n    color: var(--t-text-sub); \n    font-size: clamp(0.75rem, 0.9vw, 0.85rem); \n    text-transform: uppercase; \n    letter-spacing: 1px; \n}\n\n\/* Body Text *\/\n.testimonial-impact-card .t-body { \n    font-size: clamp(0.98rem, 1.3vw, 1.15rem); \n    line-height: 1.6; \n    color: var(--t-text-main); \n    font-style: italic; \n    margin-bottom: clamp(20px, 4vw, 30px); \n}\n\n.testimonial-impact-card .t-highlight { \n    color: var(--t-cyan); \n    font-weight: 700; \n    font-style: normal; \n}\n\n\/* Comparison Grid *\/\n.testimonial-impact-card .comparison-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: clamp(12px, 2vw, 20px);\n    margin-top: clamp(20px, 3vw, 30px);\n    border-top: 1px solid var(--t-border);\n    padding-top: clamp(20px, 3vw, 30px);\n}\n\n.testimonial-impact-card .comp-item { \n    padding: clamp(16px, 2.5vw, 20px); \n    border-radius: 20px; \n    background: rgba(255, 255, 255, 0.02); \n    border: 1px solid rgba(255, 255, 255, 0.03);\n}\n\n.testimonial-impact-card .comp-lbl { \n    font-size: 10px; \n    font-weight: 900; \n    text-transform: uppercase; \n    letter-spacing: 2px; \n    margin-bottom: 8px; \n}\n\n.testimonial-impact-card .lbl-red { color: var(--t-pink); }\n.testimonial-impact-card .lbl-blue { color: var(--t-cyan); }\n\n.testimonial-impact-card .comp-txt { \n    font-size: clamp(0.82rem, 1vw, 0.9rem); \n    line-height: 1.5; \n    color: #94a3b8;\n}\n\n.testimonial-impact-card .red-dot { color: var(--t-pink); margin-right: 5px; }\n.testimonial-impact-card .blue-dot { color: var(--t-cyan); margin-right: 5px; }\n\n\/* Responsive Collapse for Small Screens (< 600px) *\/\n@media (max-width: 600px) {\n    .testimonial-impact-card .comparison-grid {\n        grid-template-columns: 1fr;\n    }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener('DOMContentLoaded', () => {\n    \/\/ Module initialization or custom interactions can be added here if needed.\n    console.log(\"Testimonial Impact Card module initialized.\");\n});\n<\/script>\n\n<div class=\"cl-testimonial-wrapper\">\n    <div class=\"testimonial-impact-card\">\n        \n        <!-- Header: Parent Avatar & Metadata -->\n        <div class=\"t-header\">\n            <div class=\"t-avatar\">SJ<\/div>\n            <div class=\"t-meta\">\n                <h4>Sarah Jenkins<\/h4>\n                <p>Parent of Liam (Year 6) \u2022 Auckland, NZ<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Body: Main Testimonial Quote -->\n        <div class=\"t-body\">\n            \"I always felt Liam was capable of more, but his school reports always just said <span class=\"t-highlight\">'At Standard.'<\/span> It was so frustratingly vague. When I saw the <span class=\"t-highlight\">Diagnostic Blueprint<\/span>, it was like someone finally turned the lights on. It showed me exactly why he was stalling in Math. Within 12 weeks of targeting those specific 'micro-gaps,' his confidence\u2014and his grades\u2014exploded.\"\n        <\/div>\n\n        <!-- Comparison Grid: School Report vs. Matrix Blueprint -->\n        <div class=\"comparison-grid\">\n            <div class=\"comp-item\">\n                <div class=\"comp-lbl lbl-red\">School Report<\/div>\n                <div class=\"comp-txt\">\n                    <span class=\"red-dot\">\u25cf<\/span> \"Liam is achieving at level. He needs to focus more on his math consistency.\"\n                <\/div>\n            <\/div>\n            \n            <div class=\"comp-item\">\n                <div class=\"comp-lbl lbl-blue\">Matrix Blueprint<\/div>\n                <div class=\"comp-txt\">\n                    <span class=\"blue-dot\">\u25cf<\/span> \"Liam has a logic-gap in Decimal-Fraction conversion preventing Year 7 Math progress.\"\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n\n\n<style data-wp-block-html=\"css\">\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@400;600;700;800;900&display=swap');\n\n\/* ==========================================================================\n   1. WORDPRESS CONTAINER UNLOCKS & SCROLLBAR SUPPRESSION\n   ========================================================================== *\/\n\n\/* Unlocks parent WordPress Gutenberg HTML wrapper to prevent internal scrollbars *\/\n.wp-block-custom-html:has(.cl-dash-wrapper),\n.entry-content > .wp-block-custom-html:has(.cl-dash-wrapper),\n.wp-block-post-content > .wp-block-custom-html:has(.cl-dash-wrapper) {\n    height: auto !important;\n    min-height: 0 !important;\n    max-height: none !important;\n    overflow: visible !important;\n    box-sizing: border-box !important;\n}\n\n\/* Suppresses internal scrollbar tracks *\/\n.cl-dash-wrapper,\n.cl-dash-wrapper * {\n    box-sizing: border-box !important;\n    -ms-overflow-style: none !important;\n    scrollbar-width: none !important;\n}\n\n.cl-dash-wrapper::-webkit-scrollbar,\n.cl-dash-wrapper *::-webkit-scrollbar {\n    display: none !important;\n    width: 0 !important;\n    height: 0 !important;\n    background: transparent !important;\n}\n\n\/* ==========================================================================\n   2. DASHBOARD COMPONENT STYLES\n   ========================================================================== *\/\n\n:root {\n    --cyan: #00e7ff; \n    --pink: #ff007a; \n    --green: #00ff88; \n    --orange: #f97316;\n    --bg: #000000; \n    --panel: #0a0a0a; \n    --border: #1a1a1a;\n}\n\n.cl-dash-wrapper {\n    width: 100% !important;\n    max-width: 100% !important;\n    background: var(--bg) !important;\n    color: #ffffff !important;\n    font-family: 'Outfit', sans-serif !important;\n    padding: clamp(20px, 4vw, 50px) clamp(16px, 3vw, 20px) !important;\n    display: block !important;\n    height: auto !important;\n    overflow: visible !important;\n}\n\n.dashboard-container {\n    max-width: min(1000px, 94vw);\n    margin: 0 auto;\n    background: var(--panel);\n    border-radius: clamp(24px, 4vw, 40px);\n    border: 1px solid var(--border);\n    display: grid;\n    grid-template-columns: 280px 1fr;\n    overflow: hidden;\n    box-shadow: 0 0 100px rgba(0, 231, 255, 0.05);\n}\n\n\/* --- SIDEBAR NAV --- *\/\n.dash-sidebar {\n    background: #050505;\n    border-right: 1px solid var(--border);\n    padding: clamp(25px, 4vw, 40px) 20px;\n}\n\n.profile-card { \n    text-align: center; \n    margin-bottom: clamp(20px, 3vw, 40px); \n}\n\n.avatar-ring {\n    width: 70px; \n    height: 70px; \n    border-radius: 50%; \n    border: 2px solid var(--cyan);\n    margin: 0 auto 12px; \n    display: flex; \n    align-items: center; \n    justify-content: center;\n    background: radial-gradient(circle, rgba(0,231,255,0.1) 0%, transparent 70%);\n}\n\n.avatar-text {\n    font-size: 1.4rem; \n    font-weight: 900; \n    color: #ffffff;\n}\n\n.profile-card h3 { \n    margin: 0; \n    font-size: 1.15rem; \n    font-weight: 900; \n    color: #ffffff;\n}\n\n.profile-card span { \n    color: #64748b; \n    font-size: 0.8rem; \n    text-transform: uppercase; \n    letter-spacing: 1px; \n}\n\n.sidebar-nav {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.nav-link {\n    padding: 14px 16px; \n    border-radius: 12px; \n    cursor: pointer;\n    color: #64748b; \n    font-weight: 700; \n    transition: all 0.3s ease; \n    display: flex; \n    align-items: center; \n    gap: 12px;\n    font-size: clamp(0.88rem, 1vw, 0.95rem);\n}\n\n.nav-link:hover {\n    color: #ffffff;\n    background: rgba(255, 255, 255, 0.03);\n}\n\n.nav-link.active { \n    background: rgba(0, 231, 255, 0.08); \n    color: var(--cyan); \n}\n\n\/* --- MAIN CONTENT AREA --- *\/\n.dash-main { \n    padding: clamp(24px, 4vw, 40px); \n    height: auto !important; \/* Replaced max-height 800px to prevent scrollbar traps *\/\n    overflow: visible !important;\n}\n\n\/* Tab Switcher Logic *\/\n.tab-content {\n    display: none;\n}\n\n.tab-content.active {\n    display: block;\n    animation: fadeIn 0.35s ease;\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; transform: translateY(6px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n.welcome-header { \n    display: flex; \n    justify-content: space-between; \n    align-items: flex-end; \n    margin-bottom: 30px; \n    flex-wrap: wrap;\n    gap: 15px;\n}\n\n.cyan-heading {\n    margin: 0; \n    font-size: clamp(1.5rem, 3vw, 2rem); \n    font-weight: 900;\n    color: var(--cyan);\n}\n\n.sub-header-tag {\n    color: #64748b; \n    margin: 4px 0 0 0; \n    font-weight: 700; \n    text-transform: uppercase; \n    letter-spacing: 1px;\n    font-size: clamp(0.75rem, 0.9vw, 0.85rem);\n}\n\n.text-right { text-align: right; }\n\n.mastery-score-val {\n    font-size: clamp(1.8rem, 3vw, 2.2rem); \n    font-weight: 900; \n    color: var(--green);\n    line-height: 1;\n}\n\n.mastery-score-lbl {\n    margin: 2px 0 0 0; \n    font-size: 0.7rem; \n    color: #64748b; \n    font-weight: 900; \n    text-transform: uppercase;\n}\n\n\/* --- MASTERY NODES GRID --- *\/\n.matrix-grid {\n    display: grid; \n    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); \n    gap: 15px;\n    margin-bottom: 30px;\n}\n\n.node-card {\n    background: #000000; \n    border: 1px solid var(--border); \n    padding: 20px 15px; \n    border-radius: 20px;\n    text-align: center; \n    transition: all 0.3s ease;\n}\n\n.node-card.conquered { \n    border-color: var(--green); \n    box-shadow: 0 0 20px rgba(0, 255, 136, 0.08); \n}\n\n.node-card.active { \n    border-color: var(--cyan); \n    border-style: dashed; \n    animation: pulse-border 2s infinite; \n}\n\n@keyframes pulse-border { \n    0%, 100% { opacity: 1; } \n    50% { opacity: 0.5; } \n}\n\n.node-icon { font-size: 1.5rem; margin-bottom: 8px; display: block; }\n.node-title { font-size: 0.8rem; font-weight: 900; text-transform: uppercase; color: #64748b; display: block; }\n.node-status { font-size: 0.7rem; font-weight: 900; margin-top: 5px; display: block; }\n\n.text-green { color: var(--green); }\n.text-cyan { color: var(--cyan); }\n.text-muted { color: #444444; }\n\n\/* --- PROGRESS & NOTES --- *\/\n.progress-block { \n    background: #000000; \n    border: 1px solid var(--border); \n    border-radius: 24px; \n    padding: clamp(20px, 3vw, 30px); \n}\n\n.progress-header { \n    display: flex; \n    justify-content: space-between; \n    margin-bottom: 12px; \n    font-size: clamp(0.82rem, 1vw, 0.9rem);\n}\n\n.hdr-bold { font-weight: 900; }\n.target-val { color: var(--cyan); font-weight: 900; }\n\n.progress-bar-wrap { \n    width: 100%; \n    height: 12px; \n    background: #111111; \n    border-radius: 20px; \n    overflow: hidden; \n    margin-bottom: 10px; \n}\n\n.progress-fill { \n    height: 100%; \n    background: linear-gradient(to right, var(--cyan), var(--green)); \n    border-radius: 20px; \n}\n\n.progress-desc { \n    color: #64748b; \n    font-size: 0.85rem; \n    margin: 0;\n}\n\n.session-notes { \n    margin-top: 25px; \n    border-top: 1px solid var(--border); \n    padding-top: 20px; \n}\n\n.note-tag { \n    font-size: 10px; \n    font-weight: 900; \n    color: var(--pink); \n    text-transform: uppercase; \n    letter-spacing: 1px; \n}\n\n.note-text { \n    color: #94a3b8; \n    font-size: clamp(0.88rem, 1vw, 0.95rem); \n    font-style: italic; \n    margin: 5px 0 0 0;\n    line-height: 1.6;\n}\n\n.footer-tag {\n    text-align: center; \n    margin-top: 35px; \n    color: #333333; \n    font-size: 0.75rem; \n    font-weight: 900; \n    letter-spacing: 1px;\n}\n\n\/* --- TAB CONTENT STYLES (GROWTH, SCHEDULE, SETTINGS) --- *\/\n.analytics-card-grid {\n    display: grid;\n    gap: 15px;\n}\n\n.analytics-card {\n    background: #000000;\n    padding: 20px;\n    border-radius: 18px;\n    border: 1px solid var(--border);\n}\n\n.analytics-card h4 {\n    margin: 0 0 10px 0;\n    font-size: 0.95rem;\n    color: #ffffff;\n}\n\n.analytics-bar {\n    height: 8px;\n    background: #111111;\n    border-radius: 10px;\n    overflow: hidden;\n    margin-bottom: 8px;\n}\n\n.analytics-bar div { height: 100%; border-radius: 10px; }\n.fill-cyan { background: var(--cyan); }\n.fill-pink { background: var(--pink); }\n.fill-green { background: var(--green); }\n\n.analytics-val {\n    font-size: 0.8rem;\n    color: #64748b;\n    font-weight: 700;\n}\n\n\/* Schedule List *\/\n.schedule-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.schedule-item {\n    background: #000000;\n    border: 1px solid var(--border);\n    padding: 20px;\n    border-radius: 18px;\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    flex-wrap: wrap;\n}\n\n.sched-date {\n    background: var(--border);\n    color: var(--cyan);\n    padding: 10px 14px;\n    border-radius: 12px;\n    font-weight: 900;\n    font-size: 0.8rem;\n}\n\n.sched-info { flex: 1; min-width: 200px; }\n.sched-info h4 { margin: 0 0 4px 0; font-size: 0.95rem; color: #ffffff; }\n.sched-info p { margin: 0; font-size: 0.85rem; color: #64748b; }\n\n.badge-scheduled { background: rgba(0, 231, 255, 0.1); color: var(--cyan); padding: 6px 12px; border-radius: 8px; font-size: 0.7rem; font-weight: 900; }\n.badge-upcoming { background: rgba(255, 255, 255, 0.05); color: #64748b; padding: 6px 12px; border-radius: 8px; font-size: 0.7rem; font-weight: 900; }\n\n\/* Settings *\/\n.settings-box {\n    background: #000000;\n    border: 1px solid var(--border);\n    padding: 20px;\n    border-radius: 20px;\n    display: flex;\n    flex-direction: column;\n    gap: 15px;\n}\n\n.setting-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    font-size: 0.9rem;\n    color: #94a3b8;\n}\n\n\/* ==========================================================================\n   3. RESPONSIVE MOBILE LAYOUT ENGINE (< 768px)\n   ========================================================================== *\/\n\n@media (max-width: 768px) {\n    .dashboard-container { \n        grid-template-columns: 1fr; \n    }\n\n    .dash-sidebar {\n        border-right: none;\n        border-bottom: 1px solid var(--border);\n        padding: 20px;\n    }\n\n    .profile-card {\n        margin-bottom: 15px;\n    }\n\n    .sidebar-nav {\n        flex-direction: row;\n        overflow-x: auto;\n        padding-bottom: 5px;\n    }\n\n    .nav-link {\n        white-space: nowrap;\n        padding: 10px 14px;\n    }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener('DOMContentLoaded', () => {\n    \n    const navLinks = document.querySelectorAll('.cl-dash-wrapper .nav-link');\n    const tabContents = document.querySelectorAll('.cl-dash-wrapper .tab-content');\n\n    \/\/ Sidebar Tab Switcher Function\n    navLinks.forEach(link => {\n        link.addEventListener('click', () => {\n            const targetTabId = link.getAttribute('data-tab');\n\n            \/\/ 1. Remove active state from all links\n            navLinks.forEach(item => item.classList.remove('active'));\n\n            \/\/ 2. Hide all tab content sections\n            tabContents.forEach(content => content.classList.remove('active'));\n\n            \/\/ 3. Set clicked link to active\n            link.classList.add('active');\n\n            \/\/ 4. Show corresponding tab view\n            const activeTab = document.getElementById(targetTabId);\n            if (activeTab) {\n                activeTab.classList.add('active');\n            }\n        });\n    });\n\n});\n<\/script>\n\n<div class=\"cl-dash-wrapper\">\n    <div class=\"dashboard-container\">\n        \n        <!-- Left Sidebar Navigation -->\n        <aside class=\"dash-sidebar\">\n            <div class=\"profile-card\">\n                <div class=\"avatar-ring\">\n                    <span class=\"avatar-text\">LJ<\/span>\n                <\/div>\n                <h3>Liam Jenkins<\/h3>\n                <span>Year 6 \u2022 Auckland<\/span>\n            <\/div>\n            \n            <nav class=\"sidebar-nav\">\n                <div class=\"nav-link active\" data-tab=\"tab-matrix\">\n                    <span>\ud83d\udca0<\/span> <span>Master Matrix<\/span>\n                <\/div>\n                <div class=\"nav-link\" data-tab=\"tab-growth\">\n                    <span>\ud83d\udcca<\/span> <span>Growth Reports<\/span>\n                <\/div>\n                <div class=\"nav-link\" data-tab=\"tab-schedule\">\n                    <span>\ud83d\udcc5<\/span> <span>Mission Schedule<\/span>\n                <\/div>\n                <div class=\"nav-link\" data-tab=\"tab-achievements\">\n                    <span>\ud83c\udfc6<\/span> <span>Achievements<\/span>\n                <\/div>\n                <div class=\"nav-link\" data-tab=\"tab-settings\">\n                    <span>\u2699\ufe0f<\/span> <span>Settings<\/span>\n                <\/div>\n            <\/nav>\n        <\/aside>\n\n        <!-- Right Main View -->\n        <main class=\"dash-main\">\n            \n            <!-- VIEW 1: MASTER MATRIX -->\n            <section id=\"tab-matrix\" class=\"tab-content active\">\n                <div class=\"welcome-header\">\n                    <div>\n                        <h2 class=\"cyan-heading\">Current Mission<\/h2>\n                        <p class=\"sub-header-tag\">Week 4: Logical Deduction &amp; Syntax<\/p>\n                    <\/div>\n                    <div class=\"text-right\">\n                        <span class=\"mastery-score-val\">72%<\/span>\n                        <p class=\"mastery-score-lbl\">Total Mastery<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"matrix-grid\">\n                    <div class=\"node-card conquered\">\n                        <span class=\"node-icon\">\u2714\ufe0f<\/span>\n                        <span class=\"node-title\">Mental Math<\/span>\n                        <span class=\"node-status text-green\">CONQUERED<\/span>\n                    <\/div>\n                    <div class=\"node-card conquered\">\n                        <span class=\"node-icon\">\u2714\ufe0f<\/span>\n                        <span class=\"node-title\">Sentence Flow<\/span>\n                        <span class=\"node-status text-green\">CONQUERED<\/span>\n                    <\/div>\n                    <div class=\"node-card active\">\n                        <span class=\"node-icon\">\u26a1<\/span>\n                        <span class=\"node-title\">Fraction Logic<\/span>\n                        <span class=\"node-status text-cyan\">IN PROGRESS<\/span>\n                    <\/div>\n                    <div class=\"node-card\">\n                        <span class=\"node-icon\">\ud83d\udd12<\/span>\n                        <span class=\"node-title\">NCEA Literacy<\/span>\n                        <span class=\"node-status text-muted\">LOCKED<\/span>\n                    <\/div>\n                <\/div>\n\n                <div class=\"progress-block\">\n                    <div class=\"progress-header\">\n                        <span class=\"hdr-bold\">Quarterly Excellence Goal<\/span>\n                        <span class=\"target-val\">85% Target<\/span>\n                    <\/div>\n                    <div class=\"progress-bar-wrap\">\n                        <div class=\"progress-fill\" style=\"width: 72%;\"><\/div>\n                    <\/div>\n                    <p class=\"progress-desc\">Liam is <b>13% away<\/b> from reaching the Excellence Tier for Year 6.<\/p>\n\n                    <div class=\"session-notes\">\n                        <span class=\"note-tag\">Latest Expert Insight:<\/span>\n                        <p class=\"note-text\">\"Liam had a breakthrough today with multi-step logical deduction. He's now successfully deconstructing ICAS-level questions without external prompts. Moving to Algebraic Foundations next session.\"<\/p>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- VIEW 2: GROWTH REPORTS -->\n            <section id=\"tab-growth\" class=\"tab-content\">\n                <div class=\"welcome-header\">\n                    <div>\n                        <h2 class=\"cyan-heading\">Growth Analytics<\/h2>\n                        <p class=\"sub-header-tag\">Performance across core subject pillars<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"analytics-card-grid\">\n                    <div class=\"analytics-card\">\n                        <h4>Mathematics &amp; Logic<\/h4>\n                        <div class=\"analytics-bar\"><div class=\"fill-cyan\" style=\"width: 88%;\"><\/div><\/div>\n                        <span class=\"analytics-val\">88% (Advanced)<\/span>\n                    <\/div>\n                    <div class=\"analytics-card\">\n                        <h4>Syntactic Literacy<\/h4>\n                        <div class=\"analytics-bar\"><div class=\"fill-pink\" style=\"width: 65%;\"><\/div><\/div>\n                        <span class=\"analytics-val\">65% (Developing)<\/span>\n                    <\/div>\n                    <div class=\"analytics-card\">\n                        <h4>Scientific Inquiry<\/h4>\n                        <div class=\"analytics-bar\"><div class=\"fill-green\" style=\"width: 81%;\"><\/div><\/div>\n                        <span class=\"analytics-val\">81% (Proficient)<\/span>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- VIEW 3: MISSION SCHEDULE -->\n            <section id=\"tab-schedule\" class=\"tab-content\">\n                <div class=\"welcome-header\">\n                    <div>\n                        <h2 class=\"cyan-heading\">Mission Schedule<\/h2>\n                        <p class=\"sub-header-tag\">Upcoming 1-on-1 tutoring &amp; milestones<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"schedule-list\">\n                    <div class=\"schedule-item\">\n                        <div class=\"sched-date\">NOV 14<\/div>\n                        <div class=\"sched-info\">\n                            <h4>Decimal-Fraction Mastery Workshop<\/h4>\n                            <p>Focus: Decimal line representation and logic conversions<\/p>\n                        <\/div>\n                        <span class=\"badge-scheduled\">CONFIRMED<\/span>\n                    <\/div>\n                    <div class=\"schedule-item\">\n                        <div class=\"sched-date\">NOV 21<\/div>\n                        <div class=\"sched-info\">\n                            <h4>ICAS Prep Mock Assessment<\/h4>\n                            <p>Focus: Timed non-verbal reasoning problems<\/p>\n                        <\/div>\n                        <span class=\"badge-upcoming\">UPCOMING<\/span>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- VIEW 4: ACHIEVEMENTS -->\n            <section id=\"tab-achievements\" class=\"tab-content\">\n                <div class=\"welcome-header\">\n                    <div>\n                        <h2 class=\"cyan-heading\">Achievements<\/h2>\n                        <p class=\"sub-header-tag\">Milestones and earned badges<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"matrix-grid\">\n                    <div class=\"node-card conquered\">\n                        <span class=\"node-icon\">\ud83e\udd47<\/span>\n                        <span class=\"node-title\">Logic Specialist<\/span>\n                        <span class=\"node-status text-green\">EARNED<\/span>\n                    <\/div>\n                    <div class=\"node-card conquered\">\n                        <span class=\"node-icon\">\ud83d\udd25<\/span>\n                        <span class=\"node-title\">4-Week Streak<\/span>\n                        <span class=\"node-status text-green\">EARNED<\/span>\n                    <\/div>\n                    <div class=\"node-card conquered\">\n                        <span class=\"node-icon\">\ud83d\ude80<\/span>\n                        <span class=\"node-title\">Fast Starter<\/span>\n                        <span class=\"node-status text-green\">EARNED<\/span>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- VIEW 5: SETTINGS -->\n            <section id=\"tab-settings\" class=\"tab-content\">\n                <div class=\"welcome-header\">\n                    <div>\n                        <h2 class=\"cyan-heading\">Account Settings<\/h2>\n                        <p class=\"sub-header-tag\">Manage profile &amp; diagnostic preferences<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"settings-box\">\n                    <div class=\"setting-row\">\n                        <span>Parent Email Alerts<\/span>\n                        <input type=\"checkbox\" checked>\n                    <\/div>\n                    <div class=\"setting-row\">\n                        <span>Weekly Diagnostic Digest<\/span>\n                        <input type=\"checkbox\" checked>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <p class=\"footer-tag\">CURIOUS LEARNER MATRIX v2.4 \u2022 LIVE DATA FEED<\/p>\n        <\/main>\n\n    <\/div>\n<\/div>\n\n\n\n<style data-wp-block-html=\"css\">\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@400;600;700;800;900&display=swap');\n\n\/* ==========================================================================\n   1. WORDPRESS GUTENBERG BLOCK RESETS (SCOPED TO ROADMAP)\n   ========================================================================== *\/\n\n.wp-block-custom-html:has(.cl-roadmap-wrapper),\n.entry-content > .wp-block-custom-html:has(.cl-roadmap-wrapper),\n.wp-block-post-content > .wp-block-custom-html:has(.cl-roadmap-wrapper) {\n    height: auto !important;\n    min-height: 0 !important;\n    max-height: none !important;\n    overflow: visible !important;\n    box-sizing: border-box !important;\n}\n\n\/* Suppress all internal scrollbars *\/\n.cl-roadmap-wrapper,\n.cl-roadmap-wrapper * {\n    box-sizing: border-box !important;\n    -ms-overflow-style: none !important;\n    scrollbar-width: none !important;\n}\n\n.cl-roadmap-wrapper::-webkit-scrollbar,\n.cl-roadmap-wrapper *::-webkit-scrollbar {\n    display: none !important;\n    width: 0 !important;\n    height: 0 !important;\n    background: transparent !important;\n}\n\n\/* ==========================================================================\n   2. CORE ROADMAP STYLES & FLUID RESPONSIVE ENGINE\n   ========================================================================== *\/\n\n:root {\n    --cyan: #00e7ff; \n    --pink: #ff007a; \n    --green: #00ff88; \n    --orange: #f97316;\n    --bg: #000000; \n    --node-bg: #0a0a0a; \n    --border: #1a1a1a;\n}\n\n.cl-roadmap-wrapper {\n    width: 100% !important;\n    max-width: 100% !important;\n    background: var(--bg) !important;\n    color: #ffffff !important;\n    font-family: 'Outfit', sans-serif !important;\n    padding: clamp(20px, 4vw, 50px) clamp(12px, 3vw, 20px) !important;\n    display: block !important;\n    height: auto !important;\n    overflow: visible !important;\n}\n\n.cl-roadmap-wrapper .roadmap-container {\n    width: 100%;\n    max-width: min(1100px, 94vw);\n    margin: 0 auto;\n    padding: clamp(30px, 5vw, 60px) clamp(16px, 4vw, 50px);\n    background: rgba(10, 10, 10, 0.5);\n    border-radius: clamp(24px, 4vw, 40px);\n    border: 1px solid var(--border);\n    box-shadow: 0 0 80px rgba(0, 231, 255, 0.05);\n    position: relative;\n}\n\n\/* Central Nerve Line *\/\n.cl-roadmap-wrapper .central-nerve {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 50%;\n    width: 6px;\n    transform: translateX(-50%);\n    background: linear-gradient(to bottom, #ffffff, var(--cyan) 15%, var(--pink) 50%, var(--green) 85%, #ffffff);\n    box-shadow: 0 0 20px rgba(0, 231, 255, 0.5);\n    z-index: 1;\n}\n\n\/* Stage Row *\/\n.cl-roadmap-wrapper .roadmap-stage {\n    display: grid;\n    grid-template-columns: 1fr 140px 1fr;\n    align-items: center;\n    margin-bottom: clamp(40px, 6vw, 80px);\n    position: relative;\n    z-index: 2;\n}\n\n.cl-roadmap-wrapper .roadmap-stage:last-child {\n    margin-bottom: 0;\n}\n\n\/* Year Nodes *\/\n.cl-roadmap-wrapper .year-node-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n}\n\n.cl-roadmap-wrapper .year-node {\n    width: clamp(80px, 8vw, 100px);\n    height: clamp(80px, 8vw, 100px);\n    background: var(--node-bg);\n    border: 3px solid #ffffff;\n    border-radius: 50%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    font-weight: 900;\n    color: #ffffff;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);\n    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s ease;\n    cursor: pointer;\n}\n\n.cl-roadmap-wrapper .year-label {\n    font-size: clamp(0.6rem, 0.8vw, 0.75rem);\n    opacity: 0.8;\n}\n\n.cl-roadmap-wrapper .year-num {\n    font-size: clamp(1.8rem, 2.5vw, 2.4rem);\n    line-height: 0.9;\n    margin-bottom: -3px;\n    white-space: nowrap;\n}\n\n.cl-roadmap-wrapper .roadmap-stage:hover .year-node {\n    transform: scale(1.1) rotate(5deg);\n    box-shadow: 0 0 40px var(--node-glow);\n}\n\n\/* Synapse Connectors *\/\n.cl-roadmap-wrapper .stage-synapse {\n    position: absolute;\n    top: 50%;\n    height: 2px;\n    background: var(--node-glow);\n    width: 60px;\n    animation: synaptic-pulse 2s infinite;\n}\n\n.cl-roadmap-wrapper .stage-left .stage-synapse {\n    right: 100%;\n}\n\n.cl-roadmap-wrapper .stage-right .stage-synapse {\n    left: 100%;\n}\n\n@keyframes synaptic-pulse {\n    0% { opacity: 0.2; width: 0; }\n    50% { opacity: 1; width: 60px; }\n    100% { opacity: 0; width: 0; }\n}\n\n\/* Content Cards *\/\n.cl-roadmap-wrapper .stage-card {\n    background: #050505;\n    border: 1px solid var(--border);\n    padding: clamp(20px, 3vw, 30px);\n    border-radius: 25px;\n    transition: all 0.4s ease;\n    position: relative;\n    overflow: hidden;\n}\n\n.cl-roadmap-wrapper .stage-card:hover {\n    border-color: var(--node-glow);\n    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.05);\n}\n\n.cl-roadmap-wrapper .stage-tag {\n    font-size: clamp(0.65rem, 0.8vw, 0.75rem);\n    font-weight: 900;\n    color: #64748b;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    margin-bottom: 10px;\n}\n\n.cl-roadmap-wrapper .stage-title {\n    font-size: clamp(1.2rem, 2vw, 1.5rem);\n    font-weight: 900;\n    color: #ffffff;\n    margin: 0 0 12px 0;\n    letter-spacing: -0.5px;\n}\n\n.cl-roadmap-wrapper .stage-card p {\n    font-size: clamp(0.88rem, 1vw, 0.95rem);\n    color: #94a3b8;\n    margin: 0;\n    line-height: 1.6;\n}\n\n\/* Text Highlights *\/\n.cl-roadmap-wrapper .glimmer-math { color: var(--green); text-shadow: 0 0 10px var(--green); font-weight: 700; }\n.cl-roadmap-wrapper .glimmer-literacy { color: var(--cyan); text-shadow: 0 0 10px var(--cyan); font-weight: 700; }\n.cl-roadmap-wrapper .glimmer-logic { color: var(--orange); text-shadow: 0 0 10px var(--orange); font-weight: 700; }\n\n\/* ==========================================================================\n   3. MOBILE & SMALL SCREEN GUARANTEES (< 800px)\n   ========================================================================== *\/\n\n@media (max-width: 800px) {\n    .cl-roadmap-wrapper .roadmap-container {\n        padding: 30px 15px;\n    }\n\n    \/* Move central nerve line to the left side *\/\n    .cl-roadmap-wrapper .central-nerve {\n        left: 42px;\n    }\n\n    .cl-roadmap-wrapper .roadmap-stage {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        padding-left: 75px;\n        position: relative;\n        margin-bottom: 40px;\n    }\n\n    \/* Position year nodes along the left nerve line *\/\n    .cl-roadmap-wrapper .year-node-wrapper {\n        position: absolute;\n        left: 0;\n        top: 0;\n    }\n\n    .cl-roadmap-wrapper .year-node {\n        width: 65px;\n        height: 65px;\n        border-width: 2px;\n    }\n\n    .cl-roadmap-wrapper .year-num {\n        font-size: 1.5rem;\n    }\n\n    .cl-roadmap-wrapper .empty-spacer {\n        display: none;\n    }\n\n    .cl-roadmap-wrapper .stage-card {\n        width: 100%;\n        margin-left: 0;\n    }\n\n    .cl-roadmap-wrapper .stage-synapse {\n        display: none;\n    }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener('DOMContentLoaded', () => {\n    \/\/ Module initialization\n    console.log(\"Curriculum Nerve Center Roadmap (Years 3-4 Updated) loaded.\");\n});\n<\/script>\n\n<div class=\"cl-roadmap-wrapper\">\n    <div class=\"roadmap-container\">\n        <!-- Central Glow Cable -->\n        <div class=\"central-nerve\"><\/div>\n\n        <!-- STAGE 1: YEARS 3-4 -->\n        <div class=\"roadmap-stage stage-left\" style=\"--node-glow: var(--cyan)\">\n            <div class=\"stage-card\">\n                <div class=\"stage-tag\">Diagnostic Foundations<\/div>\n                <h3 class=\"stage-title\">Bridging the Gaps<\/h3>\n                <p>We scan the Matrix for foundational weaknesses. Focus: Building bulletproof <span class=\"glimmer-math\">Core Numeracy<\/span> and technical <span class=\"glimmer-literacy\">Sentence Syntax<\/span> cohesion.<\/p>\n            <\/div>\n            <div class=\"year-node-wrapper\">\n                <div class=\"year-node\">\n                    <span class=\"year-label\">Years<\/span>\n                    <span class=\"year-num\">3-4<\/span>\n                <\/div>\n                <div class=\"stage-synapse\"><\/div>\n            <\/div>\n            <div class=\"empty-spacer\"><\/div>\n        <\/div>\n\n        <!-- STAGE 2: YEARS 5-6 -->\n        <div class=\"roadmap-stage stage-right\" style=\"--node-glow: var(--pink)\">\n            <div class=\"empty-spacer\"><\/div>\n            <div class=\"year-node-wrapper\">\n                <div class=\"stage-synapse\"><\/div>\n                <div class=\"year-node\">\n                    <span class=\"year-label\">Years<\/span>\n                    <span class=\"year-num\">5-6<\/span>\n                <\/div>\n            <\/div>\n            <div class=\"stage-card\">\n                <div class=\"stage-tag\">Logical Extension<\/div>\n                <h3 class=\"stage-title\">Mastery &amp; Inquiry<\/h3>\n                <p>Transitioning from \"how\" to \"why.\" Focus: <span class=\"glimmer-math\">Multi-Step Algebra<\/span>, Strategic <span class=\"glimmer-logic\">Problem Solving<\/span>, and Analytical <span class=\"glimmer-literacy\">Reading Depth<\/span>.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- STAGE 3: YEARS 7-8 -->\n        <div class=\"roadmap-stage stage-left\" style=\"--node-glow: var(--orange)\">\n            <div class=\"stage-card\">\n                <div class=\"stage-tag\">Pre-NCEA Resilience<\/div>\n                <h3 class=\"stage-title\">Academic Rigor<\/h3>\n                <p>Preparation for high-stakes assessments. Focus: ICAS-Level <span class=\"glimmer-logic\">First Principles Logic<\/span>, Cohesive <span class=\"glimmer-literacy\">Essay Structure<\/span>, and Functional <span class=\"glimmer-math\">NCEA Numeracy<\/span>.<\/p>\n            <\/div>\n            <div class=\"year-node-wrapper\">\n                <div class=\"year-node\">\n                    <span class=\"year-label\">Years<\/span>\n                    <span class=\"year-num\">7-8<\/span>\n                <\/div>\n                <div class=\"stage-synapse\"><\/div>\n            <\/div>\n            <div class=\"empty-spacer\"><\/div>\n        <\/div>\n\n        <!-- STAGE 4: YEARS 9-10 -->\n        <div class=\"roadmap-stage stage-right\" style=\"--node-glow: var(--green)\">\n            <div class=\"empty-spacer\"><\/div>\n            <div class=\"year-node-wrapper\">\n                <div class=\"stage-synapse\"><\/div>\n                <div class=\"year-node\">\n                    <span class=\"year-label\">Years<\/span>\n                    <span class=\"year-num\">9-10<\/span>\n                <\/div>\n            <\/div>\n            <div class=\"stage-card\">\n                <div class=\"stage-tag\">Global Excellence<\/div>\n                <h3 class=\"stage-title\">Matrix Excellence<\/h3>\n                <p>Mastery of university-level critical thinking. Focus: Independent <span class=\"glimmer-logic\">Inquiry Projects<\/span>, Scholarship-Level <span class=\"glimmer-literacy\">Analysis<\/span>, and NCEA Level 1 <span class=\"glimmer-math\">Numeracy Mastery<\/span>.<\/p>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n\n\n<style data-wp-block-html=\"css\">\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@400;600;700;800;900&display=swap');\n\n\/* ==========================================================================\n   1. WORDPRESS BLOCK EDITOR CONTAINER UNLOCKS\n   ========================================================================== *\/\n\n\/* Unlocks parent WordPress Gutenberg HTML block wrappers *\/\n.wp-block-custom-html:has(.cl-booking-wrapper),\n.entry-content > .wp-block-custom-html:has(.cl-booking-wrapper),\n.wp-block-post-content > .wp-block-custom-html:has(.cl-booking-wrapper) {\n    height: auto !important;\n    min-height: 0 !important;\n    max-height: none !important;\n    overflow: visible !important;\n    box-sizing: border-box !important;\n}\n\n\/* Hide internal scrollbar tracks *\/\n.cl-booking-wrapper,\n.cl-booking-wrapper * {\n    box-sizing: border-box !important;\n    -ms-overflow-style: none !important;\n    scrollbar-width: none !important;\n}\n\n.cl-booking-wrapper::-webkit-scrollbar,\n.cl-booking-wrapper *::-webkit-scrollbar {\n    display: none !important;\n    width: 0 !important;\n    height: 0 !important;\n    background: transparent !important;\n}\n\n\/* ==========================================================================\n   2. BOOKING MODAL FLUID STYLES\n   ========================================================================== *\/\n\n:root {\n    --cyan: #00e7ff; \n    --pink: #ff007a; \n    --green: #00ff88; \n    --orange: #f97316;\n    --bg: #000000; \n    --panel: #0a0a0a; \n    --border: #1a1a1a;\n}\n\n.cl-booking-wrapper {\n    width: 100% !important;\n    max-width: 100% !important;\n    background: var(--bg) !important;\n    color: #ffffff !important;\n    font-family: 'Outfit', sans-serif !important;\n    padding: clamp(20px, 4vw, 50px) clamp(16px, 3vw, 20px) !important;\n    display: block !important;\n    height: auto !important;\n    overflow: visible !important;\n}\n\n.booking-modal {\n    max-width: min(550px, 94vw);\n    margin: 0 auto;\n    background: var(--panel);\n    border-radius: clamp(24px, 4vw, 40px);\n    border: 1px solid var(--border);\n    padding: clamp(24px, 5vw, 40px);\n    box-shadow: 0 0 100px rgba(0, 231, 255, 0.08);\n    position: relative;\n    overflow: hidden;\n}\n\n\/* Top Accent Gradient Stripe *\/\n.booking-modal::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 5px;\n    background: linear-gradient(to right, var(--cyan), var(--pink), var(--green));\n}\n\n\/* Header *\/\n.booking-modal .b-header h2 { \n    font-size: clamp(1.6rem, 3.5vw, 2rem); \n    font-weight: 900; \n    margin: 0; \n    text-transform: uppercase; \n    color: #ffffff;\n    line-height: 1.15;\n}\n\n.booking-modal .cyan-text { color: var(--cyan); }\n.booking-modal .pink-text { color: var(--pink); }\n.booking-modal .green-text { color: var(--green); }\n.booking-modal .orange-text { color: var(--orange); }\n\n.booking-modal .b-header p { \n    color: #64748b; \n    font-size: clamp(0.88rem, 1vw, 0.95rem); \n    margin-top: 8px; \n    margin-bottom: clamp(20px, 3vw, 30px); \n}\n\n\/* Input Fields *\/\n.booking-modal .b-field { \n    margin-bottom: 20px; \n}\n\n.booking-modal .b-field label { \n    display: block; \n    font-size: 10px; \n    font-weight: 900; \n    color: var(--cyan); \n    letter-spacing: 2px; \n    text-transform: uppercase; \n    margin-bottom: 8px; \n}\n\n.booking-modal .b-input, \n.booking-modal .b-select {\n    width: 100%; \n    background: #000000; \n    border: 1px solid #222222; \n    padding: clamp(12px, 2vw, 16px); \n    border-radius: 12px; \n    color: #ffffff; \n    outline: none; \n    font-family: inherit; \n    font-size: clamp(0.9rem, 1vw, 0.95rem);\n    transition: all 0.3s ease;\n}\n\n.booking-modal .b-input:focus,\n.booking-modal .b-select:focus { \n    border-color: var(--cyan); \n    box-shadow: 0 0 15px rgba(0, 231, 255, 0.15); \n}\n\n\/* Selectable Cards Grid *\/\n.booking-modal .roadblock-grid { \n    display: grid; \n    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); \n    gap: 10px; \n    margin-bottom: 25px; \n}\n\n.booking-modal .roadblock-card {\n    background: #000000; \n    border: 1px solid #1a1a1a; \n    padding: 15px; \n    border-radius: 15px;\n    cursor: pointer; \n    transition: all 0.3s ease; \n    text-align: center;\n}\n\n.booking-modal .roadblock-card:hover { \n    border-color: #333333; \n}\n\n.booking-modal .roadblock-card.active { \n    border-color: var(--pink); \n    background: rgba(255, 0, 122, 0.05); \n}\n\n.booking-modal .roadblock-card h5 { \n    margin: 0; \n    font-size: clamp(0.8rem, 1vw, 0.85rem); \n    font-weight: 900; \n}\n\n\/* Action Confirmation Buttons *\/\n.booking-modal .btn-confirm {\n    background: var(--cyan); \n    color: #000000; \n    border: none; \n    padding: clamp(16px, 2vw, 20px);\n    border-radius: 100px; \n    font-weight: 900; \n    width: 100%; \n    cursor: pointer;\n    text-transform: uppercase; \n    font-size: clamp(0.9rem, 1.1vw, 1rem); \n    transition: all 0.3s ease;\n    margin-top: 10px;\n}\n\n.booking-modal .btn-confirm:hover { \n    transform: scale(1.02); \n    box-shadow: 0 10px 30px rgba(0, 231, 255, 0.4); \n}\n\n\/* Success View State *\/\n#bookingSuccess { \n    display: none; \n    text-align: center; \n    padding: 20px 0; \n    animation: fadeIn 0.4s ease; \n}\n\n#bookingSuccess h2 {\n    color: #ffffff;\n    font-size: clamp(1.5rem, 3vw, 1.8rem);\n    margin: 0 0 10px 0;\n}\n\n#bookingSuccess p {\n    color: #64748b;\n    font-size: clamp(0.9rem, 1vw, 0.95rem);\n    margin-bottom: 25px;\n    line-height: 1.5;\n}\n\n.booking-modal .success-icon {\n    font-size: clamp(3rem, 5vw, 4rem); \n    color: var(--green); \n    margin-bottom: 15px; \n    line-height: 1;\n}\n\n.booking-modal .btn-reset {\n    background: #ffffff !important;\n    color: #000000 !important;\n}\n\n.booking-modal .btn-reset:hover {\n    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);\n}\n\n@keyframes fadeIn { \n    from { opacity: 0; transform: translateY(6px); } \n    to { opacity: 1; transform: translateY(0); } \n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener('DOMContentLoaded', () => {\n    const bookingForm = document.getElementById('bookingForm');\n    const bookingSuccess = document.getElementById('bookingSuccess');\n    const diagnosticForm = document.getElementById('diagnosticForm');\n    const resetBtn = document.getElementById('resetFormBtn');\n    const roadblockCards = document.querySelectorAll('.cl-booking-wrapper .roadblock-card');\n\n    \/\/ 1. Handle Roadblock Card Selection\n    roadblockCards.forEach(card => {\n        card.addEventListener('click', () => {\n            roadblockCards.forEach(c => c.classList.remove('active'));\n            card.classList.add('active');\n        });\n    });\n\n    \/\/ 2. Handle Form Submission\n    if (diagnosticForm) {\n        diagnosticForm.addEventListener('submit', (e) => {\n            e.preventDefault();\n\n            \/\/ Toggle view to success message\n            if (bookingForm && bookingSuccess) {\n                bookingForm.style.display = 'none';\n                bookingSuccess.style.display = 'block';\n            }\n        });\n    }\n\n    \/\/ 3. Handle Form Reset\n    if (resetBtn) {\n        resetBtn.addEventListener('click', () => {\n            if (bookingForm && bookingSuccess) {\n                bookingForm.style.display = 'block';\n                bookingSuccess.style.display = 'none';\n            }\n        });\n    }\n});\n<\/script>\n\n<div class=\"cl-booking-wrapper\">\n    <div class=\"booking-modal\" id=\"bookingNode\">\n        \n        <!-- Form View -->\n        <div id=\"bookingForm\">\n            <div class=\"b-header\">\n                <h2>Secure Your <span class=\"cyan-text\">Blueprint<\/span><\/h2>\n                <p>Select your primary roadblock to begin the diagnostic.<\/p>\n            <\/div>\n\n            <form id=\"diagnosticForm\">\n                <!-- Roadblock Selection Cards -->\n                <div class=\"roadblock-grid\">\n                    <div class=\"roadblock-card\" data-roadblock=\"Math Logic Gaps\">\n                        <h5 class=\"cyan-text\">Math Logic Gaps<\/h5>\n                    <\/div>\n                    <div class=\"roadblock-card\" data-roadblock=\"Literacy Cohesion\">\n                        <h5 class=\"pink-text\">Literacy Cohesion<\/h5>\n                    <\/div>\n                    <div class=\"roadblock-card\" data-roadblock=\"Gifted Extension\">\n                        <h5 class=\"green-text\">Gifted Extension<\/h5>\n                    <\/div>\n                    <div class=\"roadblock-card\" data-roadblock=\"NCEA Readiness\">\n                        <h5 class=\"orange-text\">NCEA Readiness<\/h5>\n                    <\/div>\n                <\/div>\n\n                <!-- Student Year Selection -->\n                <div class=\"b-field\">\n                    <label for=\"studentYearSelect\">Student Year Level<\/label>\n                    <select id=\"studentYearSelect\" class=\"b-select\" required>\n                        <option value=\"\">Select Year...<\/option>\n                        <option value=\"Year 3-4\">Year 3-4<\/option>\n                        <option value=\"Year 5-6\">Year 5-6<\/option>\n                        <option value=\"Year 7-8\">Year 7-8<\/option>\n                        <option value=\"Year 9-10\">Year 9-10<\/option>\n                        <option value=\"NCEA Prep\">NCEA Prep<\/option>\n                    <\/select>\n                <\/div>\n\n                <!-- Contact Input -->\n                <div class=\"b-field\">\n                    <label for=\"parentContactInput\">Parent Contact (WhatsApp)<\/label>\n                    <input type=\"tel\" id=\"parentContactInput\" class=\"b-input\" placeholder=\"+64 ...\" required>\n                <\/div>\n\n                <!-- Submit Button -->\n                <button type=\"submit\" class=\"btn-confirm\">Initialize Diagnostic \u2192<\/button>\n            <\/form>\n        <\/div>\n\n        <!-- Success Message View -->\n        <div id=\"bookingSuccess\">\n            <div class=\"success-icon\">\u2713<\/div>\n            <h2>Mission Initialized<\/h2>\n            <p>An education expert will reach out via WhatsApp to finalize your diagnostic window.<\/p>\n            <button type=\"button\" class=\"btn-confirm btn-reset\" id=\"resetFormBtn\">Back to Form<\/button>\n        <\/div>\n\n    <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>See Exactly Where Your Child Stands FAQ &amp; Diagnostic Matrix Our interactive Diagnostic Matrix gives you a clear picture of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-593","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"curiouslearneroffice@gmail.com","author_link":"https:\/\/curiouslearneracademy.com\/newzealand\/author\/curiouslearnerofficegmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"See Exactly Where Your Child Stands FAQ &amp; Diagnostic Matrix Our interactive Diagnostic Matrix gives you a clear picture of [&hellip;]","_links":{"self":[{"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/pages\/593","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/comments?post=593"}],"version-history":[{"count":38,"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/pages\/593\/revisions"}],"predecessor-version":[{"id":1043,"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/pages\/593\/revisions\/1043"}],"wp:attachment":[{"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/media?parent=593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}