# Layout & grid (`layout.md`)

## Global marketing shell (`layouts/app.blade.php`)

- HTML root includes `scroll-smooth` for anchor jumps.
- Sticky stacking: `#site-header-wrapper { position: sticky; top:0; z-index:50; background:#fff }`.
- Header height locked to `64px` inside wrapper to avoid cumulative layout shift.
- When `body.has-region-banner` is present, mega menu + backdrop offset (`top: 6.75rem`) to clear language suggestion banner.

## Responsive breakpoints

Tailwind CDN defaults:

- `sm` 640px
- `md` 768px
- `lg` 1024px
- `xl` 1280px
- `2xl` 1536px

Additional custom mobile rules (max-width 767px) enforce:

- Minimum `44px` touch targets on `a, button`
- `overflow-x: hidden` on `html, body`
- Hero text clamp overshoot guard

## Grid recipes

| Pattern | Example | Pages |
| --- | --- | --- |
| Two-column hero | `grid-cols-1 md:grid-cols-[50%_1fr_35%]` | `home.blade.php` |
| Three-card feature | `md:grid-cols-3 gap-8` | service / industry funnels |
| KPI deck | `grid-cols-2 sm:grid-cols-3 xl:grid-cols-7` | dashboard leads |
| Split proof + CTA | `flex flex-col md:flex-row` | multiple service templates |

## Spacing cadence

- Marketing outer padding — `px-4 sm:px-6` or `px-6` on wide templates.
- Section vertical rhythm — `py-10` to `py-20` depending on density; consult sibling sections when unsure.
- Dashboard — `py-8` main + `gap-4/5` between cards.

## Safe areas

`env(safe-area-inset-bottom)` padding applied to `footer` for notched devices.

## Implementation checklist

1. Choose container width matching sibling pages (see [`tokens.md`](tokens.md)).
2. Validate sticky header interaction (region banner present or not).
3. Confirm main content does not require compensatory top padding (wrapper already reserves space).
4. On long pages, ensure sticky CTA partial is included with thoughtful `stickyCtaTitle`.