How it works

<section class="mx-auto max-w-6xl px-6 py-16 sm:py-24">
  <div class="mx-auto max-w-2xl text-center">
    <h2 class="mt-0! mb-0! border-t-0! pt-0! text-3xl! font-bold! leading-tight! tracking-tight sm:text-4xl!">How it works</h2>
    <p class="mt-4! mb-0! text-lg leading-relaxed! text-black/70 dark:text-white/70">From first message to finished garden in three steps.</p>
  </div>
  <ol class="mt-14! mb-0! grid list-none! gap-10 pl-0! md:grid-cols-3">
    <li class="mt-0! flex flex-col gap-3">
      <span class="text-5xl font-bold tracking-tight text-brand-500">01</span>
      <h3 class="mt-0! mb-0! text-lg! font-semibold! leading-snug!">Tell us about your garden</h3>
      <p class="my-0! leading-relaxed! text-black/70 dark:text-white/70">Send a few photos and what you are hoping for. It takes two minutes.</p>
    </li>
    <li class="mt-0! flex flex-col gap-3">
      <span class="text-5xl font-bold tracking-tight text-brand-500">02</span>
      <h3 class="mt-0! mb-0! text-lg! font-semibold! leading-snug!">Get a price in writing</h3>
      <p class="my-0! leading-relaxed! text-black/70 dark:text-white/70">A real number, not a guess, usually within one working day.</p>
    </li>
    <li class="mt-0! flex flex-col gap-3">
      <span class="text-5xl font-bold tracking-tight text-brand-500">03</span>
      <h3 class="mt-0! mb-0! text-lg! font-semibold! leading-snug!">We show up and do it</h3>
      <p class="my-0! leading-relaxed! text-black/70 dark:text-white/70">On the day we agreed, with everything we need, and we leave it tidy.</p>
    </li>
  </ol>
</section>

<section class="mx-auto max-w-3xl px-6 py-16 sm:py-24">
  <h2 class="mt-0! mb-0! border-t-0! pt-0! text-3xl! font-bold! leading-tight! tracking-tight sm:text-4xl!">What happens after you enquire</h2>
  <ol class="mt-12! mb-0! list-none! border-l-2 border-black/10 pl-0! dark:border-white/15">
    <li class="relative mt-0! pb-10 pl-8">
      <span class="absolute top-1 -left-[9px] size-4 rounded-full border-2 border-brand-500 bg-white dark:bg-neutral-950"></span>
      <p class="my-0! text-sm font-semibold text-brand-600 dark:text-brand-50">Within a day</p>
      <h3 class="mt-1! mb-0! text-lg! font-semibold! leading-snug!">We reply with questions</h3>
      <p class="mt-2! mb-0! leading-relaxed! text-black/70 dark:text-white/70">Dates, number of guests, anything you want us to arrange. No automated emails, a person writes back.</p>
    </li>
    <li class="relative mt-0! pb-10 pl-8">
      <span class="absolute top-1 -left-[9px] size-4 rounded-full border-2 border-brand-500 bg-white dark:bg-neutral-950"></span>
      <p class="my-0! text-sm font-semibold text-brand-600 dark:text-brand-50">Same week</p>
      <h3 class="mt-1! mb-0! text-lg! font-semibold! leading-snug!">You get a quote and hold the dates</h3>
      <p class="mt-2! mb-0! leading-relaxed! text-black/70 dark:text-white/70">The full price, including cleaning and taxes. We hold the dates for five days while you decide.</p>
    </li>
    <li class="relative mt-0! pb-10 pl-8">
      <span class="absolute top-1 -left-[9px] size-4 rounded-full border-2 border-brand-500 bg-white dark:bg-neutral-950"></span>
      <p class="my-0! text-sm font-semibold text-brand-600 dark:text-brand-50">To confirm</p>
      <h3 class="mt-1! mb-0! text-lg! font-semibold! leading-snug!">A 30% deposit</h3>
      <p class="mt-2! mb-0! leading-relaxed! text-black/70 dark:text-white/70">Paid by bank transfer or card. The rest is due two weeks before you arrive.</p>
    </li>
    <li class="relative mt-0! pl-8">
      <span class="absolute top-1 -left-[9px] size-4 rounded-full bg-brand-500"></span>
      <p class="my-0! text-sm font-semibold text-brand-600 dark:text-brand-50">Arrival day</p>
      <h3 class="mt-1! mb-0! text-lg! font-semibold! leading-snug!">We meet you at the gate</h3>
      <p class="mt-2! mb-0! leading-relaxed! text-black/70 dark:text-white/70">Keys, a walk around the house, and a list of the places we'd go ourselves.</p>
    </li>
  </ol>
</section>