<?php
/**
 * Title: Timeline / Process
 * Slug: wpzoom/timeline-process
 * Description: A numbered step-by-step process or timeline section, useful for "How it works" or company history.
 * Categories: inspiro, featured, columns
 * Keywords: timeline, process, steps, how it works, journey, milestones
 * Viewport Width: 1280
 * Inserter: true
 */
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"80px","right":"20px","bottom":"80px","left":"20px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:80px;padding-right:20px;padding-bottom:80px;padding-left:20px"><!-- wp:heading {"textAlign":"center","level":2,"style":{"typography":{"fontSize":"40px","lineHeight":"1.2"}}} -->
<h2 class="wp-block-heading has-text-align-center" style="font-size:40px;line-height:1.2"><?php esc_html_e( 'How it works', 'inspiro' ); ?></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"bottom":"50px"}}}} -->
<p class="has-text-align-center" style="margin-bottom:50px"><?php esc_html_e( 'A clear, four-step path from first contact to a finished project.', 'inspiro' ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:columns {"style":{"spacing":{"blockGap":{"left":"40px"}}}} -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"56px","fontStyle":"normal","fontWeight":"700","lineHeight":"1"},"color":{"text":"#d8d8d8"}}} -->
<h3 class="wp-block-heading has-text-color" style="color:#d8d8d8;font-size:56px;font-style:normal;font-weight:700;line-height:1">01</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4,"style":{"typography":{"fontSize":"22px"},"spacing":{"margin":{"top":"12px","bottom":"8px"}}}} -->
<h4 class="wp-block-heading" style="margin-top:12px;margin-bottom:8px;font-size:22px"><?php esc_html_e( 'Discovery', 'inspiro' ); ?></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><?php esc_html_e( 'We dig into your goals, audience, and constraints so we’re aligned before a single pixel is drawn.', 'inspiro' ); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"56px","fontStyle":"normal","fontWeight":"700","lineHeight":"1"},"color":{"text":"#d8d8d8"}}} -->
<h3 class="wp-block-heading has-text-color" style="color:#d8d8d8;font-size:56px;font-style:normal;font-weight:700;line-height:1">02</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4,"style":{"typography":{"fontSize":"22px"},"spacing":{"margin":{"top":"12px","bottom":"8px"}}}} -->
<h4 class="wp-block-heading" style="margin-top:12px;margin-bottom:8px;font-size:22px"><?php esc_html_e( 'Design', 'inspiro' ); ?></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><?php esc_html_e( 'Concepts, wireframes, and design rounds tuned to your brand. Quick iterations, no surprises.', 'inspiro' ); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"56px","fontStyle":"normal","fontWeight":"700","lineHeight":"1"},"color":{"text":"#d8d8d8"}}} -->
<h3 class="wp-block-heading has-text-color" style="color:#d8d8d8;font-size:56px;font-style:normal;font-weight:700;line-height:1">03</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4,"style":{"typography":{"fontSize":"22px"},"spacing":{"margin":{"top":"12px","bottom":"8px"}}}} -->
<h4 class="wp-block-heading" style="margin-top:12px;margin-bottom:8px;font-size:22px"><?php esc_html_e( 'Build', 'inspiro' ); ?></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><?php esc_html_e( 'Engineering, integrations, and QA. We move fast and ship code you can trust.', 'inspiro' ); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"56px","fontStyle":"normal","fontWeight":"700","lineHeight":"1"},"color":{"text":"#d8d8d8"}}} -->
<h3 class="wp-block-heading has-text-color" style="color:#d8d8d8;font-size:56px;font-style:normal;font-weight:700;line-height:1">04</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4,"style":{"typography":{"fontSize":"22px"},"spacing":{"margin":{"top":"12px","bottom":"8px"}}}} -->
<h4 class="wp-block-heading" style="margin-top:12px;margin-bottom:8px;font-size:22px"><?php esc_html_e( 'Launch', 'inspiro' ); ?></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><?php esc_html_e( 'A smooth handoff, documentation, and ongoing support to keep things humming.', 'inspiro' ); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
