{{template "site_start" .}}
<main>
  <section class="relative min-h-[88vh] overflow-hidden bg-neutral-950">
    <img src="{{.Content.HeroImage}}" alt="" class="absolute inset-0 h-full w-full object-cover opacity-90">
    <div class="absolute inset-0 bg-gradient-to-b from-black/40 via-black/10 to-black/65"></div>
    <div class="relative mx-auto flex min-h-[88vh] max-w-7xl flex-col justify-end px-5 pb-16 text-white md:px-8 md:pb-20">
      <p class="mb-4 max-w-xl text-sm uppercase tracking-[0.22em] text-white/75">{{.Content.Positioning}}</p>
      <h1 class="max-w-5xl text-5xl font-semibold leading-[0.95] md:text-8xl">{{.Content.HeroTitle}}</h1>
      <p class="mt-6 max-w-2xl text-lg leading-relaxed text-white/80 md:text-xl">{{.Content.HeroSubtitle}}</p>
      <div class="mt-8 flex flex-wrap gap-3" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">
        <a href="{{.Content.HeroCTAURL}}" class="bg-white px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-neutral-950 hover:bg-neutral-200">{{.Content.HeroCTALabel}}</a>
        <a href="{{.Content.SecondaryCTAURL}}" class="border border-white/60 px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-white hover:bg-white hover:text-neutral-950">{{.Content.SecondaryCTALabel}}</a>
      </div>
    </div>
  </section>

  <section class="mx-auto grid max-w-7xl gap-8 px-5 py-20 md:grid-cols-[0.8fr_1.2fr] md:px-8 md:py-28">
    <h2 class="text-3xl font-semibold md:text-5xl">{{.Content.IntroTitle}}</h2>
    <div class="max-w-2xl">
      <p class="text-xl leading-relaxed text-neutral-600">{{.Content.IntroText}}</p>
      <a href="/about" class="mt-6 inline-flex text-sm uppercase tracking-[0.18em] text-neutral-500 hover:text-neutral-950" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">Meet the studio</a>
    </div>
  </section>

  <section class="border-y border-neutral-200 bg-white px-5 py-20 md:px-8 md:py-24">
    <div class="mx-auto grid max-w-7xl gap-10 md:grid-cols-[0.75fr_1.25fr]">
      <div>
        <p class="mb-3 text-sm uppercase tracking-[0.2em] text-neutral-500">Services</p>
        <h2 class="text-3xl font-semibold md:text-5xl">Focused support for homes and small spaces</h2>
      </div>
      <div class="grid gap-6 md:grid-cols-3">
        <article class="border-t border-neutral-300 pt-5">
          <h3 class="mb-3 text-xl font-medium">{{.Content.ServiceOneTitle}}</h3>
          <p class="leading-relaxed text-neutral-600">{{.Content.ServiceOneText}}</p>
        </article>
        <article class="border-t border-neutral-300 pt-5">
          <h3 class="mb-3 text-xl font-medium">{{.Content.ServiceTwoTitle}}</h3>
          <p class="leading-relaxed text-neutral-600">{{.Content.ServiceTwoText}}</p>
        </article>
        <article class="border-t border-neutral-300 pt-5">
          <h3 class="mb-3 text-xl font-medium">{{.Content.ServiceThreeTitle}}</h3>
          <p class="leading-relaxed text-neutral-600">{{.Content.ServiceThreeText}}</p>
        </article>
      </div>
    </div>
  </section>

  <section class="px-5 py-20 md:px-8 md:py-28" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">
    <div class="mx-auto mb-8 flex max-w-7xl items-end justify-between">
      <h2 class="text-2xl font-semibold md:text-4xl">Featured Projects</h2>
      <a href="/projects" class="text-sm uppercase tracking-[0.18em] text-neutral-500 hover:text-neutral-950">All work</a>
    </div>
    <div class="mx-auto grid max-w-7xl gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {{range .Projects}}
      <a href="/projects/{{.Slug}}" class="group block">
        <div class="aspect-square overflow-hidden bg-neutral-200">
          <img src="{{.CoverImage}}" alt="{{.Title}}" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
        </div>
        <div class="mt-3 flex items-start justify-between gap-4">
          <div>
            <h3 class="text-lg font-medium">{{.Title}}</h3>
            <p class="text-sm text-neutral-500">{{.Location}} · {{.Status}}</p>
            <p class="mt-2 max-w-sm text-sm leading-relaxed text-neutral-600">{{.Summary}}</p>
          </div>
          <p class="text-sm text-neutral-500">{{.Year}}</p>
        </div>
      </a>
      {{end}}
    </div>
  </section>

  <section class="bg-neutral-950 px-5 py-20 text-white md:px-8 md:py-28">
    <div class="mx-auto grid max-w-7xl gap-10 md:grid-cols-[0.7fr_1.3fr]">
      <div>
        <p class="mb-3 text-sm uppercase tracking-[0.2em] text-white/50">Process</p>
        <h2 class="text-3xl font-semibold md:text-5xl">Clear decisions from first conversation to detailed direction</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>
    </div>
  </section>

  <section class="mx-auto grid max-w-7xl gap-10 px-5 py-20 md:grid-cols-[0.85fr_1.15fr] md:px-8 md:py-28 md:items-center">
    <div class="aspect-[4/5] max-h-[640px] overflow-hidden bg-neutral-200">
      <img src="{{.Content.AboutImage}}" alt="{{.Content.AboutName}}" class="h-full w-full object-cover">
    </div>
    <div>
      <p class="mb-3 text-sm uppercase tracking-[0.2em] text-neutral-500">{{.Content.AboutRole}}</p>
      <h2 class="text-4xl font-semibold md:text-6xl">{{.Content.AboutName}}</h2>
      <p class="mt-6 max-w-2xl text-xl leading-relaxed text-neutral-600">{{.Content.AboutBio}}</p>
      <a href="/about" class="mt-8 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">Studio profile</a>
    </div>
  </section>
</main>
{{template "site_end" .}}