8-Layer Psychological Framework Section

<div class="overflow-hidden bg-white pt-[90px] pb-[50px]">
  <style>.no-scrollbar::-webkit-scrollbar{display:none}
    .no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
    .shadow-glow-blue{box-shadow:0 0 20px rgba(14,116,188,0.15)}

    #layer-modal{
      position:fixed;inset:0;z-index:9999;
      display:flex;align-items:center;justify-content:center;
      background:rgba(10,18,40,0.55);backdrop-filter:blur(6px);
      opacity:0;pointer-events:none;
      transition:opacity 0.25s ease;
    }
    #layer-modal.open{opacity:1;pointer-events:all;}
    #layer-modal-inner{
      background:#fff;border-radius:20px;
      width:min(680px,94vw);max-height:88vh;overflow-y:auto;
      padding:40px;position:relative;
      transform:translateY(16px) scale(0.98);
      transition:transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
      box-shadow:0 32px 80px rgba(10,18,40,0.2);
    }
    #layer-modal.open #layer-modal-inner{transform:translateY(0) scale(1);}
    #layer-modal-close{
      position:absolute;top:16px;right:16px;
      width:32px;height:32px;border-radius:50%;border:none;
      background:#f1f5f9;color:#64748b;font-size:18px;
      cursor:pointer;display:flex;align-items:center;justify-content:center;
      transition:background 0.2s;
    }
    #layer-modal-close:hover{background:#e2e8f0;}

    .modal-badge{
      display:inline-block;font-size:11px;font-weight:700;
      letter-spacing:0.1em;text-transform:uppercase;
      padding:4px 10px;border-radius:6px;margin-bottom:12px;
      background:#EFF6FF;color:#1D4ED8;
    }
    .modal-section-label{
      font-size:11px;font-weight:700;letter-spacing:0.12em;
      text-transform:uppercase;color:#94a3b8;margin-bottom:6px;
    }
    .modal-card{
      background:#f8fafc;border-radius:12px;padding:16px 18px;
      border:1px solid #e2e8f0;margin-bottom:10px;
    }
    .modal-core-q{
      font-size:22px;font-weight:700;color:#0f172a;
      margin:0;line-height:1.3;
    }
    .modal-failure{
      background:#fff5f5;border:1px solid #fecaca;
      border-radius:12px;padding:16px 18px;margin-bottom:10px;
    }
    .modal-kpi{
      background:#eff6ff;border:1px solid #bfdbfe;
      border-radius:12px;padding:14px 18px;
    }
    .modal-cta{
      display:inline-flex;align-items:center;gap:8px;
      background:#0e4fa8;color:#fff;font-size:14px;font-weight:600;
      padding:12px 24px;border-radius:100px;border:none;
      cursor:pointer;margin-top:24px;text-decoration:none;
      transition:background 0.2s,transform 0.15s;
    }
    .modal-cta:hover{background:#1a63c5;transform:translateY(-1px);}

    .framework-box{cursor:pointer;}
    .framework-box:focus-visible .glass-card{outline:2px solid #0e4fa8;outline-offset:2px;}</style>
  <div class="max-w-[1280px] mx-auto px-6">
    <div class="text-center mb-16">
      <div class="text-[12px] uppercase font-bold text-slate-600 tracking-[0.15em] mb-4">OUR METHODOLOGY</div>
      <h2 class="text-[48px] font-bold text-slate-900 mb-4 tracking-tight">8-Layer Psychological Architecture</h2>
      <p class="text-[18px] text-slate-600 max-w-[700px] mx-auto">The decision-engineering framework that identifies exactly where patient intent collapses</p>
      <p class="text-[14px] text-blue-600 font-medium mt-4">Click any layer to learn more</p>
    </div>
    <div class="flex overflow-x-auto pb-12 pt-4 gap-4 no-scrollbar justify-start xl:justify-center px-4 snap-x">
      <div class="framework-box flex-shrink-0 w-[160px] snap-center group" tabindex="0" data-layer="1">
        <div class="h-[140px] glass-card bg-white border-2 border-blue-600/20
          rounded-xl p-6 flex flex-col items-center justify-between
          transition-all duration-300 hover:scale-105
          hover:border-blue-600 hover:shadow-glow-blue
          group-hover:border-blue-600/60">
          <div class="w-8 h-8 rounded-full bg-blue-50 border-2 border-blue-600
            text-blue-600 text-[14px] font-bold flex items-center
            justify-center">01</div>
          <div class="text-[14px] font-bold text-slate-900 text-center leading-tight">Attention Capture</div>
          <div class="text-[12px] text-slate-600 flex items-center gap-1 group-hover:text-blue-600 transition-colors">
            <iconify-icon icon="solar:arrow-right-linear"></iconify-icon>
          </div>
        </div>
      </div>
      <div class="flex items-center text-slate-300">
        <iconify-icon icon="solar:arrow-right-linear" width="20"></iconify-icon>
      </div>
      <div class="framework-box flex-shrink-0 w-[160px] snap-center group" tabindex="0" data-layer="2">
        <div class="h-[140px] glass-card bg-white border-2 border-blue-600/20
          rounded-xl p-6 flex flex-col items-center justify-between
          transition-all duration-300 hover:scale-105
          hover:border-blue-600 hover:shadow-glow-blue
          group-hover:border-blue-600/60">
          <div class="w-8 h-8 rounded-full bg-blue-50 border-2 border-blue-600
            text-blue-600 text-[14px] font-bold flex items-center
            justify-center">02</div>
          <div class="text-[14px] font-bold text-slate-900 text-center leading-tight">Authority & Safety</div>
          <div class="text-[12px] text-slate-600 flex items-center gap-1 group-hover:text-blue-600 transition-colors">
            <iconify-icon icon="solar:arrow-right-linear"></iconify-icon>
          </div>
        </div>
      </div>
      <div class="flex items-center text-slate-300">
        <iconify-icon icon="solar:arrow-right-linear" width="20"></iconify-icon>
      </div>
      <div class="framework-box flex-shrink-0 w-[160px] snap-center group" tabindex="0" data-layer="3">
        <div class="h-[140px] glass-card bg-white border-2 border-blue-600/20
          rounded-xl p-6 flex flex-col items-center justify-between
          transition-all duration-300 hover:scale-105
          hover:border-blue-600 hover:shadow-glow-blue
          group-hover:border-blue-600/60">
          <div class="w-8 h-8 rounded-full bg-blue-50 border-2 border-blue-600
            text-blue-600 text-[14px] font-bold flex items-center
            justify-center">03</div>
          <div class="text-[14px] font-bold text-slate-900 text-center leading-tight">Risk Reduction</div>
          <div class="text-[12px] text-slate-600 flex items-center gap-1 group-hover:text-blue-600 transition-colors">
            <iconify-icon icon="solar:arrow-right-linear"></iconify-icon>
          </div>
        </div>
      </div>
      <div class="flex items-center text-slate-300">
        <iconify-icon icon="solar:arrow-right-linear" width="20"></iconify-icon>
      </div>
      <div class="framework-box flex-shrink-0 w-[160px] snap-center group" tabindex="0" data-layer="4">
        <div class="h-[140px] glass-card bg-white border-2 border-blue-600/20
          rounded-xl p-6 flex flex-col items-center justify-between
          transition-all duration-300 hover:scale-105
          hover:border-blue-600 hover:shadow-glow-blue
          group-hover:border-blue-600/60">
          <div class="w-8 h-8 rounded-full bg-blue-50 border-2 border-blue-600
            text-blue-600 text-[14px] font-bold flex items-center
            justify-center">04</div>
          <div class="text-[14px] font-bold text-slate-900 text-center leading-tight">Intent Qualification</div>
          <div class="text-[12px] text-slate-600 flex items-center gap-1 group-hover:text-blue-600 transition-colors">
            <iconify-icon icon="solar:arrow-right-linear"></iconify-icon>
          </div>
        </div>
      </div>
      <div class="flex items-center text-slate-300">
        <iconify-icon icon="solar:arrow-right-linear" width="20"></iconify-icon>
      </div>
      <div class="framework-box flex-shrink-0 w-[160px] snap-center group" tabindex="0" data-layer="5">
        <div class="h-[140px] glass-card bg-white border-2 border-blue-600/20
          rounded-xl p-6 flex flex-col items-center justify-between
          transition-all duration-300 hover:scale-105
          hover:border-blue-600 hover:shadow-glow-blue
          group-hover:border-blue-600/60">
          <div class="w-8 h-8 rounded-full bg-blue-50 border-2 border-blue-600
            text-blue-600 text-[14px] font-bold flex items-center
            justify-center">05</div>
          <div class="text-[14px] font-bold text-slate-900 text-center leading-tight">Decision Acceleration</div>
          <div class="text-[12px] text-slate-600 flex items-center gap-1 group-hover:text-blue-600 transition-colors">
            <iconify-icon icon="solar:arrow-right-linear"></iconify-icon>
          </div>
        </div>
      </div>
      <div class="flex items-center text-slate-300">
        <iconify-icon icon="solar:arrow-right-linear" width="20"></iconify-icon>
      </div>
      <div class="framework-box flex-shrink-0 w-[160px] snap-center group" tabindex="0" data-layer="6">
        <div class="h-[140px] glass-card bg-white border-2 border-blue-600/20
          rounded-xl p-6 flex flex-col items-center justify-between
          transition-all duration-300 hover:scale-105
          hover:border-blue-600 hover:shadow-glow-blue
          group-hover:border-blue-600/60">
          <div class="w-8 h-8 rounded-full bg-blue-50 border-2 border-blue-600
            text-blue-600 text-[14px] font-bold flex items-center
            justify-center">06</div>
          <div class="text-[14px] font-bold text-slate-900 text-center leading-tight">Consultation Show-Up</div>
          <div class="text-[12px] text-slate-600 flex items-center gap-1 group-hover:text-blue-600 transition-colors">
            <iconify-icon icon="solar:arrow-right-linear"></iconify-icon>
          </div>
        </div>
      </div>
      <div class="flex items-center text-slate-300">
        <iconify-icon icon="solar:arrow-right-linear" width="20"></iconify-icon>
      </div>
      <div class="framework-box flex-shrink-0 w-[160px] snap-center group" tabindex="0" data-layer="7">
        <div class="h-[140px] glass-card bg-white border-2 border-blue-600/20
          rounded-xl p-6 flex flex-col items-center justify-between
          transition-all duration-300 hover:scale-105
          hover:border-blue-600 hover:shadow-glow-blue
          group-hover:border-blue-600/60">
          <div class="w-8 h-8 rounded-full bg-blue-50 border-2 border-blue-600
            text-blue-600 text-[14px] font-bold flex items-center
            justify-center">07</div>
          <div class="text-[14px] font-bold text-slate-900 text-center leading-tight">Treatment Acceptance</div>
          <div class="text-[12px] text-slate-600 flex items-center gap-1 group-hover:text-blue-600 transition-colors">
            <iconify-icon icon="solar:arrow-right-linear"></iconify-icon>
          </div>
        </div>
      </div>
      <div class="flex items-center text-slate-300">
        <iconify-icon icon="solar:arrow-right-linear" width="20"></iconify-icon>
      </div>
      <div class="framework-box flex-shrink-0 w-[160px] snap-center group" tabindex="0" data-layer="8">
        <div class="h-[140px] glass-card bg-white border-2 border-blue-600/20
          rounded-xl p-6 flex flex-col items-center justify-between
          transition-all duration-300 hover:scale-105
          hover:border-blue-600 hover:shadow-glow-blue
          group-hover:border-blue-600/60">
          <div class="w-8 h-8 rounded-full bg-blue-50 border-2 border-blue-600
            text-blue-600 text-[14px] font-bold flex items-center
            justify-center">08</div>
          <div class="text-[14px] font-bold text-slate-900 text-center leading-tight">Retention & Reputation</div>
          <div class="text-[12px] text-slate-600 flex items-center gap-1 group-hover:text-blue-600 transition-colors">
            <iconify-icon icon="solar:arrow-right-linear"></iconify-icon>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center mt-8">
      <a href="/methodology" class="inline-flex items-center justify-center gap-2 text-[15px]
        transition-all duration-300 hover:bg-blue-700
        hover:shadow-glow-blue hover:-translate-y-0.5 group
        font-semibold text-white bg-sky-700 rounded-full pt-3 pr-6
        pb-3 pl-6 shadow-md">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-1">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </a>
    </div>
  </div>
  <div id="layer-modal" role="dialog" aria-modal="true">
    <div id="layer-modal-inner">
      <button id="layer-modal-close" aria-label="Close">✕</button>
      <div id="modal-content"></div>
    </div>
  </div>
  <script>(function(){
    var layers = {
      1: {
        name: "Attention Capture",
        tagline: "Interrupt the scroll. Establish immediate relevance.",
        definition: "First contact point between patient and clinic. Interrupts scrolling and searching behaviour, establishing immediate relevance before the patient moves on.",
        purpose: "Activate pattern recognition and relevance detection. The patient's brain must answer: 'Is this for me?' — filtering, not persuading. Wrong patients bounce; right patients proceed.",
        failure: "Wasted ad spend. High-intent patients never enter the system because nothing caught their attention at the right moment.",
        kpi: "Qualified Attention Rate = % of traffic that proceeds to Layer 2",
        coreQ: "Is this for me?"
      },
      2: {
        name: "Authority &amp; Safety",
        tagline: "Establish legitimacy fast. Reduce fear before engagement.",
        definition: "Establish clinic legitimacy and medical credibility. The patient must perceive: 'These are real doctors, this is a real clinic.'",
        purpose: "Activate authority bias and satisfy the safety heuristic. Credentials, professional imagery, and medical-grade aesthetics answer: 'Can I trust these people with my body?'",
        failure: "High-intent patients leave. Fear of the 'wrong doctor' orrofessional clinic' dominates — attention without trust always ends in bounce.",
        kpi: "Trust Engagement Index = time on authority content + credential interaction rate",
        coreQ: "Can I trust these people with my body?"
      },
      3: {
        name: "Risk Reduction",
        tagline: "Address fear of wrong choice or bad outcome.",
        definition: "Surface compliant proof at the moment of doubt — track pre-booking behaviour signals and provide evidence that the treatment works and is safe.",
        purpose: "Neutralise loss aversion and reduce uncertainty anxiety. Social proof, before/after evidence, and peer similarity bias answer: 'Will this work for me? Has it worked for people like me?'",
        failure: "Patient believes the clinic is legitimate but fears the treatment will go wrong. Stalls at the research phase — analysis paralysis sets in and they never book.",
        kpi: "Friction Drop Rate = % reduction in exit rate after engaging with proof content",
        coreQ: "Will this work for me?"
      },
      4: {
        name: "Intent Qualification",
        tagline: "Separate serious patients from researchers.",
        definition: "Constrain access to consultations by forcing commitment signals — turns intent into an irreversible decision path. Patients either commit forward or self-select out.",
        purpose: "Activate commitment bias and self-selection. Smart inquiry forms and progressive disclosure answer: 'Am I ready to move forward, or still exploring?'",
        failure: "Calendar fills with low-intent consultations. Clinic time is wasted on follow-ups that never convert. Capacity consumed without revenue.",
        kpi: "Qualified Lead Probability Score = predictive model of booking + show-up + acceptance likelihood",
        coreQ: "Am I ready to move forward?"
      },
      5: {
        name: "Decision Acceleration",
        tagline: "Move patients from thinking about it to booking.",
        definition: "Removes booking friction and collapses the delay between intent and scheduled consultation — constrains the booking path into a single completion flow.",
        purpose: "Combat temporal discounting and decision paralysis. Real-time availability, cognitive ease, and genuine scarcity framing answer: 'Do I book now, or later?'",
        failure: "Patients intend to book but return to Google, delay, or ghost entirely. Revenue leaks through abandonment and delay.",
        kpi: "Booking Velocity = time from Layer 4 qualification to booked consultation",
        coreQ: "Do I book now, or later?"
      },
      6: {
        name: "Consultation Show-Up",
        tagline: "Ensure booked patients actually attend.",
        definition: "Locks follow-through after booking by reducing avoidance — constrains the post-booking journey so patients confirm, prepare, reschedule cleanly, or self-select out early.",
        purpose: "Activate consistency bias and sunk cost reinforcement. Multi-channel reminders, expectation setting, and pre-commitment mechanics answer: 'Will I follow through on my commitment?'",
        failure: "No-shows waste clinical capacity. Teams scramble to fill gaps. Doctor time is consumed without output and revenue forecasting breaks.",
        kpi: "Show-Up Rate = % of booked consultations attended",
        coreQ: "Will I follow through?"
      },
      7: {
        name: "Treatment Acceptance",
        tagline: "Convert consultation into an accepted treatment plan.",
        definition: "Forces decision clarity in consultation — constrains acceptance into a clear yes/no outcome, reducing 'I'll think about it' objections.",
        purpose: "Neutralise decision delay and increase cognitive ease. Visual explanations, doctor confidence, and plan clarity answer: 'Do I say yes now, or wait?'",
        failure: "Patients attend and understand the plan but leave without committing. They 'think about it' and often never return — lost revenue despite all clinic effort invested.",
        kpi: "Case Acceptance Rate = % of consultations resulting in an accepted treatment plan",
        coreQ: "Do I say yes now, or wait?"
      },
      8: {
        name: "Retention &amp; Reputation",
        tagline: "Turn patients into advocates. Build repeatable growth.",
        definition: "Operationalises retention through follow-up, reviews, and return pathways — maximises lifetime value and converts satisfied patients into referral sources.",
        purpose: "Activate reciprocity and dopamine reinforcement. Review requests, referral programmes, and maintenance scheduling answer: 'Was this worth it? Should I tell others?'",
        failure: "One-time transactional relationship. No reviews, no referrals. Constant need for new patient acquisition. High CAC, low LTV — growth is permanently expensive.",
        kpi: "Patient LTV · Review Velocity · Referral Rate",
        coreQ: "Should I return or refer?"
      }
    };

    var modal = document.getElementById('layer-modal');
    var modalContent = document.getElementById('modal-content');
    var closeBtn = document.getElementById('layer-modal-close');

    function openModal(num) {
      var d = layers[num];
      if (!d) return;
      modalContent.innerHTML =
        '<div class="modal-badge">Layer 0' + num + '</div>' +
        '<h3 style="font-size:24px;font-weight:800;color:#0f172a;margin:0 0 6px;">' + d.name + '</h3>' +
        '<p style="font-size:15px;color:#64748b;margin:0 0 24px;">' + d.tagline + '</p>' +

        '<div class="modal-section-label">What it does</div>' +
        '<div class="modal-card"><p style="font-size:14px;color:#334155;margin:0;line-height:1.6;">' + d.definition + '</p></div>' +

        '<div class="modal-section-label">Psychological purpose</div>' +
        '<div class="modal-card"><p style="font-size:14px;color:#334155;margin:0;line-height:1.6;">' + d.purpose + '</p></div>' +

        '<div class="modal-section-label">Core question</div>' +
        '<div class="modal-card" style="background:#eff6ff;border-color:#bfdbfe;">' +
          '<p class="modal-core-q">' + d.coreQ + '</p>' +
        '</div>' +

        '<div class="modal-section-label">Failure mode</div>' +
        '<div class="modal-failure"><p style="font-size:14px;color:#991b1b;margin:0;line-height:1.6;">' + d.failure + '</p></div>' +

        '<div class="modal-kpi"><span style="font-size:12px;font-weight:700;color:#1d4ed8;letter-spacing:0.08em;text-transform:uppercase;">KPI — </span>' +
          '<span style="font-size:13px;color:#1e3a5f;">' + d.kpi + '</span>' +
        '</div>' +

        '<a href="/methodology#framework" class="modal-cta">' +
          'Explore the full framework' +
          '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>' +
        '</a>';

      modal.classList.add('open');
      document.body.style.overflow = 'hidden';
    }

    function closeModal() {
      modal.classList.remove('open');
      document.body.style.overflow = '';
    }

    var cards = document.querySelectorAll('.framework-box[data-layer]');
    for (var i = 0; i < cards.length; i++) {
      (function(card){
        card.addEventListener('click', function(){
          openModal(parseInt(card.getAttribute('data-layer')));
        });
        card.addEventListener('keydown', function(e){
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            openModal(parseInt(card.getAttribute('data-layer')));
          }
        });
      })(cards[i]);
    }

    closeBtn.addEventListener('click', closeModal);
    modal.addEventListener('click', function(e){
      if (e.target === modal) closeModal();
    });
    document.addEventListener('keydown', function(e){
      if (e.key === 'Escape') closeModal();
    });
  })();</script>
</div>