customer-riverside/web/modules/custom/riverside_pt/templates/riverside-pt-service.html.twig

<div class="max-w-[1040px] mx-auto px-6 py-12">
  <div class="mb-8">
    <a href="/book-appointment" class="inline-flex items-center text-pt-blue-500 hover:text-pt-blue-600 text-sm font-medium">
      ← Make an Appointment
    </a>
  </div>

  <h1 class="text-[2.5rem] font-serif font-normal text-gray-900 leading-tight mb-4">{{ title }}</h1>
  <p class="text-xl text-gray-600 mb-10">{{ description }}</p>

  <div class="max-w-none mb-12 text-gray-700 text-[15px] leading-relaxed space-y-4">
    {{ long_description|raw }}
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-12">
    <div>
      <h2 class="text-2xl font-normal mb-4">What to Expect</h2>
      <div class="text-gray-700 text-[15px] leading-relaxed">
        {{ what_to_expect|raw }}
      </div>
    </div>
    <div>
      <h2 class="text-2xl font-normal mb-4">Key Benefits</h2>
      <ul class="space-y-3 text-gray-700">
        {% for benefit in benefits %}
          <li class="flex items-start gap-3">
            <span class="mt-1.5 block w-2 h-2 bg-pt-blue-500 rounded-full flex-shrink-0"></span>
            <span>{{ benefit }}</span>
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>

  <div class="pt-8 border-t border-pt-blue-200 text-center">
    <p class="mb-6 text-lg">Ready to get started with {{ title }}?</p>
    <a href="/book-appointment" class="inline-flex items-center gap-3 px-8 py-4 bg-pt-blue-500 text-white text-[15px] font-medium no-underline hover:bg-pt-blue-600 rounded-xl">
      Make an Appointment →
    </a>
    <p class="mt-3 text-sm text-gray-500">or call us to discuss your needs</p>
  </div>
</div>