{{template "site_start" .}}
<main class="mx-auto max-w-7xl px-5 pb-24 pt-32 md:px-8 md:pt-40">
  <section class="grid gap-10 border-b border-neutral-200 pb-14 md:grid-cols-[0.82fr_1.18fr] md:items-end">
    <div>
      <p class="mb-3 text-sm uppercase tracking-[0.2em] text-neutral-500">{{.Content.ServiceArea}}</p>
      <h1 class="text-5xl font-semibold md:text-7xl">Services</h1>
    </div>
    <p class="max-w-2xl text-xl leading-relaxed text-neutral-600">Focused architectural and interior design support for residential clients, renovations, compact interiors, and early-stage project decisions.</p>
  </section>

  <section class="grid gap-6 py-16 md:grid-cols-2">
    {{range .Services}}
    <article class="border-t border-neutral-300 pt-6">
      <div class="mb-4 flex items-start justify-between gap-4">
        <h2 class="text-2xl font-semibold">{{.Title}}</h2>
        <p class="text-sm text-neutral-400">{{.Position}}</p>
      </div>
      <p class="mb-5 text-lg leading-relaxed text-neutral-600">{{.Summary}}</p>
      <p class="leading-relaxed text-neutral-500">{{.Details}}</p>
    </article>
    {{end}}
  </section>

  <section class="grid gap-10 bg-neutral-950 px-5 py-12 text-white md:grid-cols-[0.75fr_1.25fr] md:px-8">
    <div>
      <p class="mb-3 text-sm uppercase tracking-[0.2em] text-white/50">How projects work</p>
      <h2 class="text-3xl font-semibold md:text-5xl">A clear process before a larger commitment</h2>
    </div>
    <div class="grid gap-6 md:grid-cols-3">
      <article class="border-t border-white/25 pt-5">
        <p class="mb-4 text-sm text-white/45">01</p>
        <h3 class="mb-3 text-xl font-medium">{{.Content.ProcessOneTitle}}</h3>
        <p class="leading-relaxed text-white/65">{{.Content.ProcessOneText}}</p>
      </article>
      <article class="border-t border-white/25 pt-5">
        <p class="mb-4 text-sm text-white/45">02</p>
        <h3 class="mb-3 text-xl font-medium">{{.Content.ProcessTwoTitle}}</h3>
        <p class="leading-relaxed text-white/65">{{.Content.ProcessTwoText}}</p>
      </article>
      <article class="border-t border-white/25 pt-5">
        <p class="mb-4 text-sm text-white/45">03</p>
        <h3 class="mb-3 text-xl font-medium">{{.Content.ProcessThreeTitle}}</h3>
        <p class="leading-relaxed text-white/65">{{.Content.ProcessThreeText}}</p>
      </article>
    </div>
  </section>

  <section class="grid gap-10 py-16 md:grid-cols-[0.75fr_1.25fr]">
    <div>
      <p class="mb-3 text-sm uppercase tracking-[0.2em] text-neutral-500">Project fit</p>
      <h2 class="text-3xl font-semibold md:text-5xl">FAQs</h2>
    </div>
    <div class="grid gap-6">
      {{range .FAQs}}
      <article class="border-t border-neutral-300 pt-5">
        <h3 class="mb-3 text-xl font-medium">{{.Question}}</h3>
        <p class="leading-relaxed text-neutral-600">{{.Answer}}</p>
      </article>
      {{end}}
    </div>
  </section>

  <section class="grid gap-6 border-t border-neutral-200 pt-10 md:grid-cols-[0.8fr_1.2fr] md:items-center">
    <h2 class="text-3xl font-semibold">Ready to discuss a project?</h2>
    <div>
      <p class="max-w-2xl text-lg leading-relaxed text-neutral-600">Use the enquiry form to share the project type, site location, budget range, and timeline.</p>
      <a href="/contact" class="mt-6 inline-flex bg-neutral-950 px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-white hover:bg-neutral-700" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">Start an enquiry</a>
    </div>
  </section>
</main>
{{template "site_end" .}}