.contact-page{display:block}

.contact-hero-inner{display:grid;grid-template-columns:60% 40%;gap:var(--space-lg);align-items:center}
.contact-hero-text{max-width:60ch}
.contact-hero-decor{background:var(--color-primary);border-radius:var(--radius-lg);min-height:200px}

.contact-types-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.contact-card{text-align:center;justify-content:space-between;min-height:220px;transition:var(--transition)}
.contact-card:hover{transform:translateY(-4px);background:var(--color-primary);color:#fff}

.form-wrapper{display:flex;justify-content:center}
.contact-form-container{width:60%;display:flex;flex-direction:column;gap:var(--space-md)}
.form-intro{max-width:45ch;text-align:center;margin-inline:auto}
.form-field{display:flex;flex-direction:column;gap:var(--space-xs)}
.form-field input,.form-field textarea{border:var(--border);border-radius:var(--radius-sm);padding:0.6rem;background:#fff}
.error{font-size:var(--fs-sm);color:red;min-height:1em}
.form-feedback{margin-top:var(--space-sm);font-weight:600}

.contact-alt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg)}
.contact-alt-block{max-width:60ch}

.expect-inner{display:flex;justify-content:center}
.expect-box{width:60%;max-width:50ch}

.faq-inner{display:flex;justify-content:center}
.faq-list{width:70%;display:flex;flex-direction:column;gap:var(--space-sm)}
.faq-item{border:var(--border);border-radius:var(--radius-md);background:var(--color-surface);overflow:hidden}
.faq-question{width:100%;text-align:left;padding:var(--space-sm);font-weight:600}
.faq-answer{display:none;padding:var(--space-sm)}
.faq-item.active .faq-answer{display:block}

.cta-inner{display:flex;justify-content:center}
.cta-box{width:50%;text-align:center;background:var(--color-primary);color:#fff;padding:var(--space-lg);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--space-md)}

@media (max-width:1024px){
.contact-hero-inner{grid-template-columns:1fr}
.contact-form-container{width:100%}
.expect-box{width:100%}
.faq-list{width:100%}
.cta-box{width:100%}
.contact-types-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
.contact-types-grid{grid-template-columns:1fr}
.contact-alt-grid{grid-template-columns:1fr}
}