8-Layer Framework Interactive Section

<div>
  <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>
  <section class="overflow-hidden bg-white pt-[90px] pb-[50px]" id="methodology">
    <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-sky-700 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 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-sky-700/20
            rounded-xl p-6 flex flex-col items-center justify-between
            transition-all duration-300 hover:scale-105
            hover:border-sky-700 hover:shadow-glow-blue
            group-hover:border-sky-700/60">
            <div class="w-8 h-8 rounded-full bg-blue-50 border-2 border-sky-700
              text-sky-700 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-sky-700 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-sky-700/20
            rounded-xl p-6 flex flex-col items-center justify-between
            transition-all duration-300 hover:scale-105
            hover:border-sky-700 hover:shadow-glow-blue
            group-hover:border-sky-700/60">
            <div class="w-8 h-8 rounded-full bg-blue-50 border-2 border-sky-700
              text-sky-700 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-sky-700 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-sky-700/20
            rounded-xl p-6 flex flex-col items-center justify-between
            transition-all duration-300 hover:scale-105
            hover:border-sky-700 hover:shadow-glow-blue
            group-hover:border-sky-700/60">
            <div class="w-8 h-8 rounded-full bg-blue-50 border-2 border-sky-700
              text-sky-700 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-sky-700 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-sky-700/20
            rounded-xl p-6 flex flex-col items-center justify-between
            transition-all duration-300 hover:scale-105
            hover:border-sky-700 hover:shadow-glow-blue
            group-hover:border-sky-700/60">
            <div class="w-8 h-8 rounded-full bg-blue-50 border-2 border-sky-700
              text-sky-700 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-sky-700 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-sky-700/20
            rounded-xl p-6 flex flex-col items-center justify-between
            transition-all duration-300 hover:scale-105
            hover:border-sky-700 hover:shadow-glow-blue
            group-hover:border-sky-700/60">
            <div class="w-8 h-8 rounded-full bg-blue-50 border-2 border-sky-700
              text-sky-700 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-sky-700 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-sky-700/20
            rounded-xl p-6 flex flex-col items-center justify-between
            transition-all duration-300 hover:scale-105
            hover:border-sky-700 hover:shadow-glow-blue
            group-hover:border-sky-700/60">
            <div class="w-8 h-8 rounded-full bg-blue-50 border-2 border-sky-700
              text-sky-700 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-sky-700 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-sky-700/20
            rounded-xl p-6 flex flex-col items-center justify-between
            transition-all duration-300 hover:scale-105
            hover:border-sky-700 hover:shadow-glow-blue
            group-hover:border-sky-700/60">
            <div class="w-8 h-8 rounded-full bg-blue-50 border-2 border-sky-700
              text-sky-700 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-sky-700 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-sky-700/20
            rounded-xl p-6 flex flex-col items-center justify-between
            transition-all duration-300 hover:scale-105
            hover:border-sky-700 hover:shadow-glow-blue
            group-hover:border-sky-700/60">
            <div class="w-8 h-8 rounded-full bg-blue-50 border-2 border-sky-700
              text-sky-700 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-sky-700 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-sky-800
          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>
  </section>
  <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' or 'unprofessional 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 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>