02 - Steps from consultation to launch

---
import DemoLayout from '@/layouts/DemoLayout.astro';

import { Container, Flex, Heading, Inline, Stack, Text } from 'lism-css/astro';
---

<DemoLayout title="02 - Steps from consultation to launch">
  <Container as="section" isWrapper="m" isContainer hasGutter bgc="base" py="50">
    <Stack g="50">
      <Stack g="20">
        <Inline fz="s" c="text-2">Our process</Inline>
        <Heading level="2" class="u--trim" fz="2xl" fw="bold">From first conversation to launch</Heading>
        <Text c="text-2"
          >No need to worry if this is your first project with us. We shape your ideas one step at a time, through ongoing conversation.</Text
        >
      </Stack>

      <Stack as="ol" g="40">
        <Stack as="li" g="20">
          <Flex g="15" ai="center">
            <Inline d="inline-flex" fxsh="0" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
              <Inline fz="xs">Step.</Inline>
              <Inline fz="l">1</Inline>
            </Inline>
            <Heading level="3" fz="l">Get in touch</Heading>
          </Flex>
          <Text px="15"
            >Send us your project details through the contact form. Someone from our team will reply within two business days. It’s fine if your plans
            aren’t settled yet.</Text
          >
        </Stack>

        <Stack as="li" g="20">
          <Flex g="15" ai="center">
            <Inline d="inline-flex" fxsh="0" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
              <Inline fz="xs">Step.</Inline>
              <Inline fz="l">2</Inline>
            </Inline>
            <Heading level="3" fz="l">Discovery and proposal</Heading>
          </Flex>
          <Text px="15"
            >We learn about your strengths and the audience you want to reach, and clarify the challenges. Then we propose a project scope, schedule
            and estimate.</Text
          >
        </Stack>

        <Stack as="li" g="20">
          <Flex g="15" ai="center">
            <Inline d="inline-flex" fxsh="0" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
              <Inline fz="xs">Step.</Inline>
              <Inline fz="l">3</Inline>
            </Inline>
            <Heading level="3" fz="l">Design and build</Heading>
          </Flex>
          <Text px="15"
            >From information architecture to design and development. We set up a review at each milestone and incorporate your feedback as we go.</Text
          >
        </Stack>

        <Stack as="li" g="20">
          <Flex g="15" ai="center">
            <Inline d="inline-flex" fxsh="0" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
              <Inline fz="xs">Step.</Inline>
              <Inline fz="l">4</Inline>
            </Inline>
            <Heading level="3" fz="l">Launch and ongoing support</Heading>
          </Flex>
          <Text px="15"
            >After launch, we look at how people respond and identify what to work on next. From day-to-day updates to revisiting content and design,
            we keep supporting you.</Text
          >
        </Stack>
      </Stack>
    </Stack>
  </Container>
</DemoLayout>