# Full-width hero section featuring
a dramatic nighttime city skyline.

The hero occupies the entire viewport height with a darkened background image, left-aligned headline text in a large serif typeface, and a subtle gradient overlay that transitions from transparent to deep navy at the bottom.

SCROLL

## Split-layout About section with
strategic imagery on the left side

This section uses a two-column grid layout. The left column displays a high-contrast photograph of chess pieces, symbolizing strategy and precision. The right column contains a serif heading, body text in a lighter weight, and a ghost-style call-to-action button with an arrow icon. The dark navy background maintains visual consistency with the overall design language.

Details

### Strategy Consulting

Card component with a light background, centered icon in a bordered square frame, and service title below.

### Digital Transformation

Three cards displayed in an equal-width grid, providing a strong contrast against the dark background.

### Brand Architecture

Each card elevates on hover with a subtle shadow effect and a bottom border animation for interactivity.

## Performance

1,200+
Large numeric statistic on the left with a descriptive label beneath it
98%
Circular gauge
at center
95%
Bar chart visualization showing upward growth trend

## Process

01 Initial Discovery Phase
02 Strategy Formulation
03 Execution and Delivery
04 Evaluation and Refinement

When expanded, the answer text appears below with a smooth height transition. The plus icon rotates 45 degrees to form an X shape, indicating the open state.

The FAQ component uses a max-height animation technique for smooth open/close transitions without JavaScript animation libraries.

On smaller screens, the two-column layout stacks vertically with the timeline appearing first, followed by the FAQ section below.