.wp-page{overflow:hidden}

.wp-hero{position:relative;min-height:90vh;display:flex;align-items:center}
.wp-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wp-hero-overlay{position:absolute;inset:0}
.wp-hero-inner{position:relative;display:flex}
.wp-hero-text{max-width:48ch;display:flex;flex-direction:column;gap:var(--space-4)}

.wp-types-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.wp-type-card{display:flex;flex-direction:column;gap:var(--space-3)}

.wp-experience-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:center}
.wp-experience-text{max-width:75ch}
.wp-experience-image img{width:100%}

.wp-scenarios-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.wp-scenario{display:flex;flex-direction:column;gap:var(--space-3)}

.wp-process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);text-align:center}
.wp-step{max-width:40ch;margin-inline:auto;display:flex;flex-direction:column;gap:var(--space-3)}

.wp-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.wp-why-item{display:flex;flex-direction:column;gap:var(--space-3);max-width:60ch}

.wp-gallery{position:relative}
.wp-gallery-inner{text-align:center;max-width:50ch;margin-inline:auto}
.wp-gallery-img{width:100%;height:auto}

.wp-cta{background:var(--color-surface-secondary);padding:var(--space-7) 0}
.wp-cta-inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center;max-width:50ch;margin-inline:auto}

.wp-form-section{display:flex;justify-content:center}
.wp-form{max-width:600px;width:100%;padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.wp-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.wp-form-grid textarea{grid-column:1 / -1}

@media(max-width:1024px){
.wp-types-grid,.wp-scenarios-grid,.wp-process-grid,.wp-why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.wp-experience-grid{grid-template-columns:1fr}
}

@media(max-width:640px){
.wp-types-grid,.wp-scenarios-grid,.wp-process-grid,.wp-why-grid{grid-template-columns:1fr}
.wp-hero{min-height:70vh}
.wp-form-grid{grid-template-columns:1fr}
}